在 DOM(文档对象模型)中,节点(Node)是构成文档结构的基本单元。节点可以是元素、文本、注释、属性等等。DOM 将文档表示为一个树形结构,每个节点都是树中的一个元素。
DOM 中的节点可以分为以下几种类型:
元素节点(Element Node):表示 HTML 元素,如
<div>
、<p>
、<span>
等等。文本节点(Text Node):表示文档中的文本内容,如
<p>Some text</p>
中的 "Some text"。属性节点(Attribute Node):表示 HTML 元素的属性,如
<img src="image.png">
中的 "src" 属性。注释节点(Comment Node):表示 HTML 中的注释内容,如
<!-- This is a comment -->
。
DOM 中的节点可以通过 JavaScript 来访问和操作。例如,可以使用以下方法获取节点:
document.getElementById():根据元素的 ID 属性获取节点。
document.querySelector():使用 CSS 选择器获取节点。
parentNode.childNodes[]:获取指定元素的子节点列表。
parentNode.firstChild 和 parentNode.lastChild:获取指定元素的第一个子节点和最后一个子节点。
可以使用以下方法来创建新的节点:
document.createElement():创建一个新的元素节点。
document.createTextNode():创建一个新的文本节点。
element.setAttribute():为元素节点设置属性。
可以使用以下方法来修改节点:
node.textContent:修改节点的文本内容。
element.setAttribute():修改元素节点的属性值。
parentNode.appendChild():将一个节点添加为另一个节点的子节点。
parentNode.removeChild():从一个节点中删除一个子节点。
node.cloneNode():复制一个节点。
通过这些方法,可以方便地访问、创建、修改和删除 DOM 中的节点,实现对网页的动态操作。