在 HTML DOM 中，网页的每个部分（如标签、文本、属性等）都被视为节点。节点是构成 DOM 树的基本单位。每个节点都可以通过 JavaScript 进行访问、修改和操作。常见的节点类型包括元素节点、文本节点、属性节点、注释节点等。

1. 节点类型

在 DOM 中，常见的节点类型有：

• 元素节点 (ELEMENT_NODE): 对应 HTML 标签，如 <div>、<p> 等。
• 文本节点 (TEXT_NODE): 包含标签之间的文本内容。
• 属性节点 (ATTRIBUTE_NODE): HTML 元素的属性，如 class、id。
• 注释节点 (COMMENT_NODE): 注释文本，如 <!-- comment -->。

2. 获取 DOM 元素

JavaScript 提供了几种方法来访问 DOM 元素（节点）：

• getElementById()：根据元素的 id 获取元素节点。
• getElementsByClassName()：根据类名获取一组元素节点。
• getElementsByTagName()：根据标签名获取一组元素节点。
• querySelector()：根据 CSS 选择器获取第一个匹配的元素节点。
• querySelectorAll()：根据 CSS 选择器获取所有匹配的元素节点。

示例：

<div id="myDiv" class="myClass">Hello World</div>
<p id="myPara">This is a paragraph.</p>

<script>
  const div = document.getElementById("myDiv");
  const p = document.querySelector("#myPara");

  console.log(div); // 输出 <div id="myDiv" class="myClass">Hello World</div>
  console.log(p);   // 输出 <p id="myPara">This is a paragraph.</p>
</script>

3. DOM 元素的属性和方法

DOM 元素（节点）提供了多种属性和方法来操作它们：

常用属性：

• id：获取或设置元素的 id 属性。
• className：获取或设置元素的 class 属性。
• innerHTML：获取或设置元素的 HTML 内容。
• innerText：获取或设置元素的文本内容。
• style：访问元素的行内样式。

常用方法：

• setAttribute(name, value)：设置元素的指定属性。
• getAttribute(name)：获取元素的指定属性。
• removeAttribute(name)：删除元素的指定属性。
• appendChild()：向元素添加子节点。
• removeChild()：从元素中移除子节点。
• createElement()：创建新的 HTML 元素。
• createTextNode()：创建文本节点。

示例：

<div id="myDiv" class="myClass">Hello World</div>

<script>
  const div = document.getElementById("myDiv");

  // 修改属性
  div.className = "newClass";         // 修改 class
  div.id = "newId";                  // 修改 id
  div.innerHTML = "New Content";      // 修改 HTML 内容
  div.style.color = "red";           // 修改样式

  // 设置/获取属性
  div.setAttribute("data-info", "example");
  console.log(div.getAttribute("data-info"));  // 输出 "example"

  // 创建和添加新节点
  const newPara = document.createElement("p");
  newPara.innerHTML = "This is a new paragraph.";
  div.appendChild(newPara);  // 将新段落添加为 myDiv 的子元素
</script>

4. 节点遍历

DOM 提供了遍历节点树的方法，允许访问元素的父节点、子节点、兄弟节点等。

常用属性：

• parentNode：返回当前节点的父节点。
• childNodes：返回当前节点的所有子节点（包括文本节点和元素节点）。
• firstChild：返回第一个子节点。
• lastChild：返回最后一个子节点。
• nextSibling：返回当前节点之后的兄弟节点。
• previousSibling：返回当前节点之前的兄弟节点。

示例：

<div id="parent">
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</div>

<script>
  const parentDiv = document.getElementById("parent");
  const childNodes = parentDiv.childNodes;

  console.log(childNodes);   // 输出父节点的所有子节点（包括文本节点）
  console.log(parentDiv.firstChild);  // 输出第一个子节点
  console.log(parentDiv.lastChild);   // 输出最后一个子节点
</script>

5. 节点的事件处理

DOM 元素还可以通过事件监听器与事件关联。当事件发生时，可以在指定元素上执行相应的操作。

示例：

<button id="myButton">Click Me!</button>

<script>
  const button = document.getElementById("myButton");

  // 为按钮添加点击事件
  button.addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

6. 总结

• DOM 元素节点 是构成网页结构的基本单位，它们代表 HTML 标签、文本、属性等。
• 通过 JavaScript 提供的各种方法，可以获取、修改和删除 DOM 元素。
• 节点遍历 允许访问父节点、子节点和兄弟节点，方便进行节点的操作。
• 可以通过 事件监听器 为元素节点添加交互事件。

JavaScript 的 DOM 元素操作让我们能够动态地修改网页内容，并与用户进行交互。

更多详细内容请关注其他相关文章。