|
|
马黑黑教程专版 https://www.huachaowang.com/foru ... 9&page=1#pid2598647
在网页结构中，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）。
|
|
发表于