DOM 节点树学习笔记

DOM（Document Object Model）是一种以树形结构表示 HTML 或 XML 文档的方式，它将每个元素、属性、文本和其他组成部分都视为一个节点，并且规定了这些节点之间的关系和属性。在 JavaScript 中，可以通过 DOM API 对页面进行操作。

节点类型

DOM 中定义了许多不同类型的节点，包括元素节点、文本节点、注释节点等。其中，元素节点是最常见的节点类型，代表 HTML 或 XML 文档中的一个标签。

例如，对于下面的 HTML 代码：

htmlCopy Code
<div>
  <p>Hello, World!</p>
</div>

可以用如下的 DOM 结构表示：

Copy Code
+-- HTML
    +-- HEAD
    +-- BODY
        +-- DIV
            +-- P
                +-- #text

其中，HTML 是文档的根节点，HEAD 和 BODY 是文档的子节点，DIV 是 BODY 的子节点，P 是 DIV 的子节点，#text 是 P 的子节点，代表 Hello, World! 文本。

节点属性

节点除了有自己的类型外，还可能拥有其他的属性，例如元素节点可能拥有 class、id 等属性。可以通过 DOM API 获取节点的属性值，并可以通过设置节点的属性值来修改页面的样式和内容。

例如，对于下面的 HTML 代码：

htmlCopy Code
<div class="container" id="main">
  <p>Hello, World!</p>
</div>

可以通过 DOM API 获取 div 元素的 class 和 id 属性值：

javascriptCopy Code
const div = document.querySelector('div');
console.log(div.className); // "container"
console.log(div.id);        // "main"

也可以通过设置 div 元素的 class 和 id 属性值来修改页面样式：

javascriptCopy Code
div.className = 'wrapper';
div.id = 'content';

节点操作

DOM API 还提供了丰富的方法，用于对页面中的节点进行增、删、改、查等操作。例如，可以使用 createElement 方法创建新的元素节点，并使用 appendChild 方法将其添加到文档中。

例如，下面的代码可以在页面中添加一个新的 h1 元素：

javascriptCopy Code
const h1 = document.createElement('h1');
h1.textContent = 'Welcome to my website!';
document.body.appendChild(h1);

除了添加节点外，还可以使用 removeChild 方法删除节点，使用 replaceChild 方法替换节点，使用 setAttribute 方法设置属性，使用 style 属性设置样式等等。这些方法都能够方便地对页面进行操作，实现动态的交互效果。

以上是对 DOM 节点树的学习笔记。