DOM-节点对象

在 Web 开发中，DOM（Document Object Model）是一个非常重要的概念。DOM 允许开发者使用对象来表示 HTML 文档中的元素，并进行各种操作。在 DOM 中，每个 HTML 元素都是一个节点对象。

节点类型

在 DOM 中，不同的节点对象有不同的类型。常见的节点类型有以下几种：

• 元素节点：代表 HTML 元素，例如 <div>、<p> 等。
• 文本节点：代表 HTML 元素中的文本，例如 <p>这是一段文本</p> 中的“这是一段文本”。
• 属性节点：代表 HTML 元素中的属性，例如 <a href="https://www.google.com">Google</a> 中的“href”属性。
• 注释节点：代表 HTML 元素中的注释，例如 <!-- 这是一段注释 -->。

节点对象的属性和方法

节点对象拥有多个属性和方法，常用的有以下几个：

Node.nodeName

返回节点的名称，如果是元素节点则返回元素名称，如果是属性节点则返回属性名称。

const element = document.getElementById('myElement');
console.log(element.nodeName); // 输出元素名称，例如 "DIV"

Node.nodeType

返回节点的类型，具体的值可以参考上文的“节点类型”部分。

const element = document.getElementById('myElement');
console.log(element.nodeType); // 输出节点类型，例如 1 表示元素节点

Node.childNodes

返回当前节点的子节点列表，是一个 Node 对象的数组。

const element = document.getElementById('myElement');
const childNodes = element.childNodes

Node.firstChild

返回当前节点的第一个子节点，如果没有子节点则返回 null。

const element = document.getElementById('myElement');
const firstChild = element.firstChild;

Node.lastChild

返回当前节点的最后一个子节点，如果没有子节点则返回 null。

const element = document.getElementById('myElement');
const lastChild = element.lastChild;

Node.nextSibling

返回当前节点的下一个兄弟节点，如果没有下一个兄弟节点则返回 null。

const element = document.getElementById('myElement');
const nextSibling = element.nextSibling;

Node.previousSibling

返回当前节点的上一个兄弟节点，如果没有上一个兄弟节点则返回 null。

const element = document.getElementById('myElement');
const previousSibling = element.previousSibling;

Node.parentNode

返回当前节点的父节点，如果没有父节点则返回 null。

const element = document.getElementById('myElement');
const parentNode = element.parentNode;

总结

节点对象是 DOM 编程中非常重要的概念，掌握节点对象的属性和方法能够帮助开发者更加灵活地操作 HTML 文档中的元素。