📅 最后修改于: 2023-12-03 15:31:13.150000 🧑 作者: Mango
HTML是构建Web页面的基础语言，而DOM是HTML页面中的对象树，表示了页面中的各个元素及其属性。DOM通过JavaScript编写的脚本可以对页面元素进行操作，包括创建、移动、修改、删除等。
下面是一个HTML页面的DOM图例，展示了元素的包含关系和属性：
html
└───head
│ └───title
│ │ ├───textContent: "Page Title"
│ └───link
│ ├───rel: "stylesheet"
│ ├───type: "text/css"
│ └───href: "style.css"
└───body
└───h1
│ ├───textContent: "Hello, World!"
│ └───style
│ ├───color: "red"
│ └───font-size: "24px"
└───p
├───textContent: "This is a paragraph."
└───a
├───textContent: "Click me!"
├───href: "https://www.example.com"
└───target: "_blank"
在DOM树中，每个HTML页面中的标签都是一个元素节点。元素节点可以包含其他元素节点和文本节点，例如上面的示例中，<body>元素节点包含了<h1>和<p>两个子节点。
每个HTML标签可以有一些属性，例如示例中的<a>标签有href和target两个属性。属性节点是元素节点的一部分，可以通过JavaScript代码访问和修改。
文本节点是DOM中的叶子节点，代表标签内的文本内容。例如上面示例中的<h1>标签包含了一个文本节点，其内容为"Hello, World!"。
通过JavaScript代码，可以获取DOM中的元素节点和属性节点，通过操作DOM实现页面的交互和动态效果。例如，可以通过以下代码获取<h1>元素节点，并修改其颜色和字体大小：
var h1Node = document.getElementsByTagName("h1")[0];
h1Node.style.color = "red";
h1Node.style.fontSize = "24px";
DOM是HTML页面中的对象树，由元素节点、属性节点和文本节点组成。通过JavaScript代码，可以对DOM进行操作，实现页面的交互和动态效果。熟练掌握DOM操作可以大大提高Web开发的效率与质量。