获取容器元素的子节点

马黑黑

在网页结构中，HTML容器元素就像“收纳盒”，用于组织和包裹内容，使页面结构更清晰，方便后续的样式和交互处理。通俗一点讲，容器元素就是可以装载其它元素的元素。

最常用的容器元素之一是 <div>，它是块级（block）元素，默认独占一行，没有明显的语义含义，常用于布局和分组。本文以 div 元素为例，简单介绍其内子节点的获取。请看如下示例：

<div id="ma" title="点击查看子节点信息">
    <p>这行是一个 p 标签，它是 id="ma" 的 div 容器的标签节点（亦可称元素节点）。</p>
    <div>这是一个 div 节点，内含纯文本。下一个标签节点是一个 img 标签：</div>
    <img src="https://638183.freep.cn/638183/small/dolan.png" alt="">
</div>

<script>
    const ma = document.getElementById('ma');
    ma.onclick = () => {
        let msg = 'id="ma" 的 div 包含如下子标签节点：\n\n';
        const nodes = ma.children;
        [...nodes].forEach((n, k) => msg += `${k+1}. ${n.tagName}\n`);
        alert(msg);
    };
</script>
    

重点观察 div 标签包裹的子标签，后面的JS仅是交互辅助。从 DIV 的 HTML 代码结构看，我们真真切切看到了三个子标签：p、div和img，它们依次出现在 div 标签之内、被 div 标签所包裹，是 div 的子元素。预览查看效果时点击id="ma"的 div，弹出的信息框会给出所有子标签节点的标签名。

示例中的JS，先获得 id="ma" 的容器元素 ma，ma 的点击事件则通过 children 属性获得其内所有标签（元素）节点，并将其标签名（tagName）取出。

元素的 children 是一个常用的属性或方法，用于获取某个元素的所有直接子元素。它在原生 JavaScript 和 jQuery 中均有实现，主要用于操作 DOM 树。

element.children 即元素子节点属性拿到的是子元素节点（children 是 child 即孩子的复数形式）。但需要注意：容器元素内的子节点不全然是元素节点。以下示例，HTML代码结构和第一例的一样，但在JS中使用元素的 childNodes 即子节点属性获取节点名称（nodeName）——不是第一例的标签名，因为有些节点可能不是元素节点。可以在打开预览页面后点击 div 容器元素，比较弹出的信息和上例弹出信息的区别：

<div id="ma" title="点击查看子节点信息">
    <p>这行是一个 p 标签，它是 id="ma" 的 div 容器的标签节点（亦可称元素节点）。</p>
    <div>这是一个 div 节点，内含纯文本。下一个标签节点是一个 img 标签：</div>
    <img src="https://638183.freep.cn/638183/small/dolan.png" alt="">
</div>

<script>
    const ma = document.getElementById('ma');
    ma.onclick = () => {
        let msg = 'id="ma" 的 div 包含如下子节点：\n\n';
        const nodes = ma.childNodes;
        [...nodes].forEach((n, k) => msg += `${k+1}. ${n.nodeName}\n`);
        alert(msg);
    };
</script>
    

可以看到，节点变多一倍不止，多出来的全是 #text 文本节点，这些 #text 子节点基于示例的 HTML 代码结构，编号1的 #text 是 p 标签和 容器 div 之间的换行符 \n，编号3和编号5的 #text 是上下两个元素标签之间的换行符 \n，编号7的 #text 是 IMG 标签和容器div收尾符号之间的换行符 \n。

childNodes 属性是一个非常重要的 DOM 属性，它返回一个包含指定节点的所有子节点的 NodeList 对象。这个NodeList 是一个实时的集合，意味着如果 DOM 结构发生变化，NodeList 也会相应地更新

最后再给出一组 div 容器的示例，各 div 子节点由于代码结构的不同而不同，值得细细研究、领悟：

<style>
    div { margin: 10px auto; width: 600px; border: 1px solid gray; padding: 12px; }
</style>

<div>
    本div只有一个文本节点
</div>

<div><p>本div只有一个p元素节点</p></div>

<div>
    <p>本div有头尾两个文本节点，中间是p元素节点</p>
</div>

<div>
    这里是文本节点1
    <p>这里是p元素节点</p>
    这里是文本节点2
</div>

<div>
    <!-- 这行是注释节点（预览时看不到） -->
    <p>这行p元素节点（上一行是注释行）</p>
</div>

<script>
    const divs = document.querySelectorAll('div');
    divs.forEach(div => {
        div.title = '点击查看节点信息';
        div.onclick = () => {
            let msg = '本 div 包含如下子标签节点：\n\n';
            const nodes = div.childNodes;
            [...nodes].forEach((n, k) => msg += `${k+1}. ${n.nodeName}\n`);
            alert(msg);
        };
    });
</script>
    

小结：容器元素可以包含很多类型的子节点，通过 element.children 属性可以获取其内的子 element 即子元素节点，而 element.childNodes 属性则返回所有节点——包括文本节点、标签节点和注释节点等。特别注意：当子节点中包含有元素节点且元素节点独占一行时，其上、下均存在换行文本节点（\n）。

红影

预览里能看到返回的子元素节点或所有节点，只是不知道获取这些是派什么用的呢？