螺竹编程
发布于 2024-05-27 / 4 阅读
0

JavaScript/DOM节点:Node

在 DOM(文档对象模型)中,节点(Node)是构成文档结构的基本单元。节点可以是元素、文本、注释、属性等等。DOM 将文档表示为一个树形结构,每个节点都是树中的一个元素。

DOM 中的节点可以分为以下几种类型:

  1. 元素节点(Element Node):表示 HTML 元素,如 <div><p><span> 等等。

  2. 文本节点(Text Node):表示文档中的文本内容,如 <p>Some text</p> 中的 "Some text"。

  3. 属性节点(Attribute Node):表示 HTML 元素的属性,如 <img src="image.png"> 中的 "src" 属性。

  4. 注释节点(Comment Node):表示 HTML 中的注释内容,如 <!-- This is a comment -->

DOM 中的节点可以通过 JavaScript 来访问和操作。例如,可以使用以下方法获取节点:

  1. document.getElementById():根据元素的 ID 属性获取节点。

  2. document.querySelector():使用 CSS 选择器获取节点。

  3. parentNode.childNodes[]:获取指定元素的子节点列表。

  4. parentNode.firstChild 和 parentNode.lastChild:获取指定元素的第一个子节点和最后一个子节点。

可以使用以下方法来创建新的节点:

  1. document.createElement():创建一个新的元素节点。

  2. document.createTextNode():创建一个新的文本节点。

  3. element.setAttribute():为元素节点设置属性。

可以使用以下方法来修改节点:

  1. node.textContent:修改节点的文本内容。

  2. element.setAttribute():修改元素节点的属性值。

  3. parentNode.appendChild():将一个节点添加为另一个节点的子节点。

  4. parentNode.removeChild():从一个节点中删除一个子节点。

  5. node.cloneNode():复制一个节点。

通过这些方法,可以方便地访问、创建、修改和删除 DOM 中的节点,实现对网页的动态操作。