js中的节点是什么意思

原创

ithorizon 7个月前 (09-17) 阅读数 194 #Javascript

### JS中的节点：懂得DOM的核心概念

在JavaScript中，"节点"是一个非常重要的概念，特别是在操作网页文档结构时。节点（Node）在文档对象模型（DOM，Document Object Model）中扮演着基础角色。本文将通过HTML的`

`标签来解释节点的含义，并使用`

`标签排版各级标题。

1. 什么是节点

在DOM中，任何构成网页的对象都可以被视为节点。整个文档结构实际上是由不同类型的节点构成的树形结构。节点可以是以下几种类型：

- 文档节点（Document）：整个HTML文档

- 元素节点（Element）：HTML标签，如`

`、`

`等

- 属性节点（Attribute）：元素的属性，如`class="example"`

- 文本节点（Text）：元素内的文本内容

- 注释节点（Comment）：HTML中的注释部分

每个节点都是文档树中的一个节点，并与其他节点存在父子、兄弟等关系。

2. 节点的父子关系

在DOM树中，一个节点可以有多个子节点，也可以有一个父节点。例如，一个`

`元素包含多个`

`元素，那么每个`

`元素都是`

`的子节点。

3. 节点的兄弟关系

共享同一父节点的两个节点互为兄弟节点。例如，两个相邻的`

`元素是兄弟节点。

4. 怎样获取节点

在JavaScript中，可以使用各种方法获取DOM中的节点。以下是获取节点的一些常用方法：


// 获取指定ID的元素节点
var elementById = document.getElementById('id');
// 获取指定标签名的元素节点列表
var elementsByTagName = document.getElementsByTagName('p');
// 使用querySelector获取符合特定CSS选择器的第一个元素节点
var elementBySelector = document.querySelector('.example');
// 使用querySelectorAll获取符合特定CSS选择器的所有元素节点列表
var elementsBySelector = document.querySelectorAll('.example');

5. 节点的操作

一旦获取到节点，就可以对其进行各种操作，比如添加、删除、修改子节点等：


// 创建新的元素节点
var newElement = document.createElement('p');
// 创建文本节点
var newText = document.createTextNode('这是一个新段落');
// 将文本节点添加到新建的元素节点中
newElement.appendChild(newText);
// 将新创建的节点添加到DOM树中
document.body.appendChild(newElement);