遍历与操作容器元素子节点示例

马黑黑 · 发表于 2026-6-30 19:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

要操作容器元素内的子节点，首先需要遍历所有子节点，接着才是去操作特定的子节点。不同的操作目的遍历的方法不一样，下面的探讨不可能包罗万象，但力求做到目标明确、操作精准：每一个实例我们将预设一个需求，然后通过遍历与过滤等手段去操作指定的子节点。具体而言：所有示例都是遍历指定容器元素的子元素节点，找出第一层级或所有层级的 img 标签，并对它们做相应操作。

例一：添加所有第一层级img子元素的title属性

<style>
    .mdiv { margin: 20px auto 0; width: 600px; border: 1px solid gray; padding: 12px; }
    .mdiv img { max-width: 150px; }
    .tMid { text-align: center; }
</style>

<div class="mdiv">
    <h2 class="tMid">图片title属性设置演示</h2>
    <img src="https://638183.freep.cn/638183/small/2025/ff1.webp" alt="" />
    <img src="https://638183.freep.cn/638183/small/2025/featherjpg.png" alt="" />
    <img src="https://638183.freep.cn/638183/small/2025/ring.webp" alt="" />
    <p>【说明】上面的图片初始时没有设置 title 属性，可以点击下方按钮添加该属性。请在点击前、后分别将鼠标指针移到图片上面，看看前后有什么不同。</p>
</div>
<p class="tMid"><button onclick="addTitle2Img();this.disabled='true';">图片元素加 title 属性</button></p>

<script>
    function addTitle2Img() {
        const div = document.querySelector('.mdiv');
        const elms = div.children;
        [...elms].forEach((elm, key) => {
            if (elm.tagName === 'IMG') elm.setAttribute('title', `图 ${key}`);
        });
    }
</script>

例二：添加所有层级img子元素的title属性

方法一：querySelectorAll()方法（最简洁高效）

<style>
    .mdiv { margin: 20px auto 0; width: 600px; border: 1px solid gray; padding: 12px; }
    .mdiv img { max-width: 150px; }
    .tMid { text-align: center; }
</style>

<div class="mdiv">
    <h2 class="tMid">图片title属性设置演示</h2>
    <p>下图在第一层级：</p>
    <img src="https://638183.freep.cn/638183/small/2025/ff1.webp" alt="" />
    <p>下图在第二层级：</p>
    <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/featherjpg.png" alt="" /></p>
    <div>
        <p>下图在第三层级：</p>
        <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/ring.webp" alt="" /></p>
    </div>
    <p>【说明】上面的图片初始时没有设置 title 属性，可以点击下方按钮添加该属性。请在点击前、后分别将鼠标指针移到图片上面，看看前后有什么不同。</p>
</div>
<p class="tMid"><button onclick="addTitle2Img(document.querySelector('.mdiv'));this.disabled='true';">图片元素加 title 属性</button></p>

<script>
    // 使用 querySelectorAll()方法拿到所有img元素节点并一一添加itle属性
    function addTitle2Img(elm) {
        const imgs = elm.querySelectorAll('img'); // 获取元素下所有img子元素
        imgs.forEach((img, key) => img.setAttribute('title', `图 ${key + 1}`));
    }
</script>

方法二：递归遍历元素节点（简洁但性能略差、容易爆栈）

<style>
    .mdiv { margin: 20px auto 0; width: 600px; border: 1px solid gray; padding: 12px; }
    .mdiv img { max-width: 150px; }
    .tMid { text-align: center; }
</style>

<div class="mdiv">
    <h2 class="tMid">图片title属性设置演示</h2>
    <p>下图在第一层级：</p>
    <img src="https://638183.freep.cn/638183/small/2025/ff1.webp" alt="" />
    <p>下图在第二层级：</p>
    <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/featherjpg.png" alt="" /></p>
    <div>
        <p>下图在第三层级：</p>
        <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/ring.webp" alt="" /></p>
    </div>
    <p>【说明】上面的图片初始时没有设置 title 属性，可以点击下方按钮添加该属性。请在点击前、后分别将鼠标指针移到图片上面，看看前后有什么不同。</p>
</div>
<p class="tMid"><button onclick="addTitle2Img(document.querySelector('.mdiv'));this.disabled='true';">图片元素加 title 属性</button></p>

<script>
    let total = 0; // 当前图片序号
    
    // 递归遍历所有子元素节点 ：碰上img元素节点时加title属性
    function addTitle2Img(node) {
        // 若节点标签名是 IMG则设置 title 属性，同时 total 自增
        if (node.tagName === 'IMG') node.setAttribute('title', `图 ${++total}`);
        for (let j = 0; j < node.children.length; j ++) {
            addTitle2Img(node.children[j]); // 往内遍历其它层级的节点
        }
    }
</script>

方法三：使用 treeWalker API（抽象但更优雅、性能消耗低、不会爆栈）

<style>
    .mdiv { margin: 20px auto 0; width: 600px; border: 1px solid gray; padding: 12px; }
    .mdiv img { max-width: 150px; }
    .tMid { text-align: center; }
</style>

<div class="mdiv">
    <h2 class="tMid">图片title属性设置演示</h2>
    <p>下图在第一层级：</p>
    <img src="https://638183.freep.cn/638183/small/2025/ff1.webp" alt="" />
    <p>下图在第二层级：</p>
    <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/featherjpg.png" alt="" /></p>
    <div>
        <p>下图在第三层级：</p>
        <p class="tMid"><img src="https://638183.freep.cn/638183/small/2025/ring.webp" alt="" /></p>
    </div>
    <p>【说明】上面的图片初始时没有设置 title 属性，可以点击下方按钮添加该属性。请在点击前、后分别将鼠标指针移到图片上面，看看前后有什么不同。</p>
</div>
<p class="tMid"><button onclick="addTitle2Img(document.querySelector('.mdiv'));this.disabled='true';">图片元素加 title 属性</button></p>

<script>
    // 使用 treeWalker API遍历所有子元素节点 ：碰上img元素节点时加title属性
    function addTitle2Img(elm) {
        let total = 0; // 当前图片序号
        let walker = document.createTreeWalker(
            elm, // 元素
            NodeFilter.SHOW_ELEMENT, // 节点过滤器 ：只要元素节点
            // 过滤器 ：只要img元素
            { acceptNode: (node) => node.tagName === 'IMG' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP },
        );
        while (walker.nextNode()) {
            const node = walker.currentNode;
            node.setAttribute('title', `图 ${++total}`);
        }
    }
</script>

递归和TreeWalker：

递归的核心：访问一个节点，处理它，然后依次访问它的子节点、孙节点（深度优先）。

TreeWalker 的实现：它内部维护了一个“遍历状态栈”（逻辑栈）。调用 nextNode() 时，它内部执行的就是标准的深度优先遍历（DFS）算法逻辑，只不过它把“递归的压栈/出栈”操作隐藏在了 API 内部，通过 currentNode 指针来记录位置。