马黑黑教程《获取容器元素的子节点》
<style>
.artBox { margin: 20px auto; max-width: 1200px; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
.artBox blockquote { padding: 14px; border: solid gray; border-width: 0 4px; border-radius: 10px; background: #ddd; }
.artBox p { margin: 10px 0; }
</style>
<div class="artBox"><blockquote>在网页结构中，HTML容器元素就像“收纳盒”，用于组织和包裹内容，使页面结构更清晰，方便后续的样式和交互处理。通俗一点讲，容器元素就是可以装载其它元素的元素。</blockquote>
<p>最常用的容器元素之一是 <mark><div></mark>，它是块级（block）元素，默认独占一行，没有明显的语义含义，常用于布局和分组。本文以 div 元素为例，简单介绍其内子节点的获取。请看如下示例：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<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>
</pre></div>
<p>重点观察 div 标签包裹的子标签，后面的JS仅是交互辅助。从 DIV 的 HTML 代码结构看，我们真真切切看到了三个子标签：p、div和img，它们依次出现在 div 标签之内、被 div 标签所包裹，是 div 的子元素。预览查看效果时点击id="ma"的 div，弹出的信息框会给出所有子标签节点的标签名。</p>
<p>示例中的JS，先获得 id="ma" 的容器元素 ma，ma 的点击事件则通过 <mark>children</mark> 属性获得其内所有标签（元素）节点，并将其标签名（tagName）取出。</p>
<blockquote>元素的 children 是一个常用的属性或方法，用于获取某个元素的所有直接子元素。它在原生 JavaScript 和 jQuery 中均有实现，主要用于操作 DOM 树。</blockquote>
<p><mark>element.children</mark> 即<b>元素子节点</b>属性拿到的是子元素节点（<mark>children</mark> 是 child 即孩子的复数形式）。但需要注意：<b>容器元素内的子节点不全然是元素节点</b>。以下示例，HTML代码结构和第一例的一样，但在JS中使用元素的 <mark>childNodes</mark> 即<b>子节点属性</b>获取节点名称（<mark>nodeName</mark>）——不是第一例的标签名，因为有些节点可能不是元素节点。可以在打开预览页面后点击 div 容器元素，比较弹出的信息和上例弹出信息的区别：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<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>
</pre></div>
<p>可以看到，节点变多一倍不止，多出来的全是 <mark>#text</mark> 文本节点，这些 #text 子节点基于示例的 HTML 代码结构，编号1的 #text 是 p 标签和 容器 div 之间的换行符 <mark>\n</mark>，编号3和编号5的 #text 是上下两个元素标签之间的换行符 <mark>\n</mark>，编号7的 #text 是 IMG 标签和容器div收尾符号之间的换行符 <mark>\n</mark>。</p>
<blockquote>childNodes 属性是一个非常重要的 DOM 属性，它返回一个包含指定节点的所有子节点的 NodeList 对象。这个NodeList 是一个实时的集合，意味着如果 DOM 结构发生变化，NodeList 也会相应地更新</blockquote>
<p>最后再给出一组 div 容器的示例，各 div 子节点由于代码结构的不同而不同，值得细细研究、领悟：</p>
<div class="hEdiv" data-prev="1"><pre class="hEpre">
<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>
</pre></div>
<p>小结：容器元素可以包含很多类型的子节点，通过 <mark>element.children</mark> 属性可以获取其内的子 element 即子元素节点，而 <mark>element.childNodes</mark> 属性则返回所有节点——包括文本节点、标签节点和注释节点等。特别注意：当子节点中包含有元素节点且元素节点独占一行时，其上、下均存在换行<b>文本节点</b>（<mark>\n</mark>）。</p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 一个新知识点，谢谢友友精彩分享
页:
[1]