Skip to content
On this page

DOM

DOM是?

DOM"代表文档对象模型(Document Object Model)。它是一种用于 HTML 和 XML 文档的编程接口,它将整个文档表示为一个树形结构,使开发人员可以通过编程方式操纵和修改文档的内容和结构。

DOM提供了一组方法和属性,使开发人员可以轻松地访问和修改文档中的元素、属性和文本。这些方法和属性可以通过JavaScript来访问和操作,使开发人员能够创建交互式的Web页面。

DOM树

DOM树是指将HTML或XML文档表示为节点层次结构的模型。DOM树由各种节点组成,这些节点通过它们在文档中的关系相互连接。树的根节点是文档节点,表示整个文档,而其他节点则表示文档中的元素、属性、文本等。以下是一个简单的HTML文档的DOM树示例:

html
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<h1>Hello World!</h1>
	<p>This is an example paragraph.</p>
</body>
</html>

在这个例子中,DOM树由以下节点组成:

  • 文档节点(Document Node):表示整个HTML文档。
  • 元素节点(Element Nodes):表示HTML文档中的各种元素,如html、head、title、body、h1和p等。
  • 文本节点(Text Nodes):表示HTML文档中的文本内容,如标签中的文本,如"Example"、"Hello World!"和"This is an example paragraph."等。 下面是该HTML文档的DOM树的简化版本:
json
Document Node
└── Element Node: <html>
    ├── Element Node: <head>
    │   └── Element Node: <title>
    │       └── Text Node: "Example"
    └── Element Node: <body>
        ├── Element Node: <h1>
        │   └── Text Node: "Hello World!"
        └── Element Node: <p>
            └── Text Node: "This is an example paragraph."