js 获取子节点|极客笔记

js 获取子节点

在开发网页时，经常需要使用JavaScript来操作DOM元素。其中，获取子节点是我们经常会用到的操作之一。通过获取子节点，我们可以对子元素进行操作，例如修改样式、添加事件监听器等。

在JavaScript中，有多种方式可以获取子节点。本文将详细介绍这些方式，并给出相应的示例代码。

使用childNodes属性

DOM元素的childNodes属性可以获取所有子节点，包括文本节点、元素节点和注释节点。这个属性返回的是一个NodeList对象，它类似于一个数组，可以通过下标来访问子节点。

示例代码如下：

// 获取父元素
const parent = document.getElementById('parent');

// 获取子节点
const childNodes = parent.childNodes;

// 遍历子节点
for(let i = 0; i < childNodes.length; i++) {
    const child = childNodes[i];
    console.log(child);
}

运行结果如下：

#text
<div>子元素1</div>
#text
<div>子元素2</div>
#text

上面的示例代码中，我们首先通过getElementById方法获取父元素，然后使用childNodes属性获取所有子节点，并遍历输出每个子节点。

需要注意的是，childNodes属性返回的是一个包含所有子节点的NodeList对象，其中包含文本节点和元素节点，因此我们在遍历时需要注意排除文本节点。

使用children属性

如果我们只想获取元素节点（不包括文本节点和注释节点），可以使用children属性。这个属性返回的是一个HTMLCollection对象，也可以通过下标来访问子节点。

示例代码如下：

// 获取父元素
const parent = document.getElementById('parent');

// 获取子节点
const children = parent.children;

// 遍历子节点
for(let i = 0; i < children.length; i++) {
    const child = children[i];
    console.log(child);
}

运行结果如下：

<div>子元素1</div>
<div>子元素2</div>

上面的示例代码中，我们通过getElementById方法获取父元素，然后使用children属性获取所有子元素节点，并遍历输出每个子节点。由于children属性只返回元素节点，因此遍历时不需要额外判断节点类型。

使用firstChild和lastChild属性

除了获取所有子节点，我们还可以使用firstChild和lastChild属性分别获取第一个子节点和最后一个子节点。

示例代码如下：

// 获取父元素
const parent = document.getElementById('parent');

// 获取第一个子节点
const firstChild = parent.firstChild;
console.log(firstChild);

// 获取最后一个子节点
const lastChild = parent.lastChild;
console.log(lastChild);

运行结果如下：

#text
<div>子元素1</div>
#text
<div>子元素2</div>
#text

上面的示例代码中，我们通过getElementById方法获取父元素，然后分别使用firstChild和lastChild属性获取第一个子节点和最后一个子节点。需要注意的是，这两个属性返回的是包含文本节点的所有子节点，因此在实际应用中可能需要做额外的判断和处理。

使用querySelectorAll方法

除了上述属性之外，我们还可以使用querySelectorAll方法来获取符合指定选择器的所有子节点。该方法返回的是一个NodeList对象。

示例代码如下：

// 获取所有子节点
const children = document.querySelectorAll('#parent > *');

// 遍历子节点
children.forEach(child => {
    console.log(child);
});

运行结果如下：

<div>子元素1</div>
<div>子元素2</div>

上面的示例代码中，我们使用querySelectorAll方法获取父元素下所有子元素节点，并遍历输出每个子节点。需要注意的是，querySelectorAll方法接受一个CSS选择器作为参数，因此可以根据需要灵活选择子节点。

总结

通过以上介绍，我们了解了在JavaScript中如何获取子节点。无论是使用childNodes、children属性，还是firstChild、lastChild属性，亦或是querySelectorAll方法，都可以方便地获取子节点，并对其进行操作。

在实际应用中，根据具体需求选择合适的方法来获取子节点是非常重要的。

js 获取子节点