HTML | DOM 基础目标属性

在使用 HTML 和 JavaScript 进行编程时，了解 DOM（文档对象模型）是很重要的。DOM 提供了一种表示网页文档的方式，使我们可以通过 JavaScript 来操纵和操作网页的内容、结构和样式。

DOM 是一个树状结构，由不同的节点组成。节点可以是元素节点、文本节点、注释节点等。每个节点都有一些属性，这些属性提供了有关节点的信息，并且可以用于访问和修改节点。

本文将介绍一些常用的基础目标属性，以帮助程序员更好地理解和使用 DOM。

1. node.nodeName

该属性返回节点的名称，对于元素节点，返回元素的标签名；对于文本节点，返回“#text”；对于注释节点，返回“#comment”等。

例如：<div id="myDiv"></div>
      var divNode = document.getElementById("myDiv");
      console.log(divNode.nodeName); // 输出：DIV

2. node.nodeType

该属性返回节点的类型代码，不同类型的节点有不同的代码，元素节点的代码为1，文本节点的代码为3，注释节点的代码为8，等等。

例如：<div id="myDiv"></div>
      var divNode = document.getElementById("myDiv");
      console.log(divNode.nodeType); // 输出：1

3. node.nodeValue

该属性返回节点包含的值，对于文本节点，返回文本内容；对于元素节点和其他类型的节点，返回null。

例如：<div id="myDiv">Hello World!</div>
      var divNode = document.getElementById("myDiv");
      console.log(divNode.firstChild.nodeValue); // 输出：Hello World!

4. node.firstChild 和 node.lastChild

这两个属性分别返回节点的第一个子节点和最后一个子节点。如果没有子节点，返回null。

例如：<div id="myDiv">
         <p>First paragraph</p>
         <p>Second paragraph</p>
       </div>
      var divNode = document.getElementById("myDiv");
      console.log(divNode.firstChild.nodeName); // 输出：P
      console.log(divNode.lastChild.nodeName); // 输出：P

5. node.childNodes

该属性返回一个类数组对象，包含了节点的所有子节点。可以通过遍历这个数组来访问和操作子节点。

例如：<ul id="myList">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
      var listNode = document.getElementById("myList");
      var childNodes = listNode.childNodes;
      for (var i = 0; i < childNodes.length; i++) {
        console.log(childNodes[i].nodeName);
      }
      // 输出：#text, LI, #text, LI, #text, LI, #text

6. node.parentNode

该属性返回节点的父节点，如果节点没有父节点（即为根节点），则返回null。

例如：<div id="myDiv">
         <p>Child Paragraph</p>
       </div>
      var pNode = document.querySelector("p");
      console.log(pNode.parentNode.nodeName); // 输出：DIV

7. node.previousSibling 和 node.nextSibling

这两个属性分别返回节点的前一个兄弟节点和后一个兄弟节点。如果没有前一个兄弟节点或后一个兄弟节点，返回null。

例如：<ul id="myList">
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
      var secondItemNode = document.getElementsByTagName("li")[1];
      console.log(secondItemNode.previousSibling.nodeName); // 输出：#text
      console.log(secondItemNode.nextSibling.nodeName); // 输出：LI

这些基础目标属性对于操作和遍历 DOM 树非常有用，希望本文能够帮助你更好地使用 HTML 和 JavaScript 进行开发。