怎么使用JavaScript操作DOM节点遍历？-js教程-PHP中文网

怎么使用JavaScript操作DOM节点遍历？

夢幻星辰

发布： 2025-09-19 19:33:01

原创

648人浏览过

答案：JavaScript通过DOM属性如childNodes、children和querySelectorAll遍历节点，推荐使用缓存、DocumentFragment和事件委托优化性能，并可用递归、TreeWalker及MutationObserver处理复杂场景。

怎么使用javascript操作dom节点遍历？

JavaScript操作DOM节点遍历，简单来说，就是用JS代码像探险一样，在HTML这座大房子里，一层层、一间间地找到你想要的东西。

首先，DOM（Document Object Model）是HTML文档的一个树形表示。每个HTML元素、属性、文本都成为树上的一个节点。遍历，就是按照某种规则访问这些节点。

解决方案

最常用的方法是利用DOM节点的属性，比如

parentNode

登录后复制

、

childNodes

登录后复制

、

firstChild

登录后复制

、

lastChild

登录后复制

、

nextSibling

登录后复制

、

previousSibling

登录后复制

。

举个例子，假设你有一个

<ul>

登录后复制

列表：

立即学习“Java免费学习笔记（深入）”；

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

登录后复制

用JS获取这个

<ul>

登录后复制

，然后遍历它的子节点：

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

const myList = document.getElementById('myList');

// 获取所有子节点
const listItems = myList.childNodes;

// 遍历子节点
for (let i = 0; i < listItems.length; i++) {
  const item = listItems[i];

  // 检查节点类型是否为元素节点 (Node.ELEMENT_NODE === 1)
  if (item.nodeType === 1) {
    console.log(item.textContent); // 输出 Item 1, Item 2, Item 3
  }
}

登录后复制

注意，

childNodes

登录后复制

会包含文本节点、注释节点等，所以通常需要用

nodeType

登录后复制

来过滤。

另外，还有一些更方便的方法，比如

children

登录后复制

属性，它只返回元素节点：

const myList = document.getElementById('myList');
const listItems = myList.children; // 只包含<li>元素

for (let i = 0; i < listItems.length; i++) {
  console.log(listItems[i].textContent); // 输出 Item 1, Item 2, Item 3
}

登录后复制

querySelectorAll

登录后复制

方法配合CSS选择器，可以更精确地选择节点：

const listItems = document.querySelectorAll('#myList li');

listItems.forEach(item => {
  console.log(item.textContent); // 输出 Item 1, Item 2, Item 3
});

登录后复制

如何避免DOM遍历时的性能问题？

DOM操作是比较耗费性能的。频繁的DOM操作会导致页面卡顿。所以，尽量减少DOM操作的次数。

缓存DOM节点： 如果你需要多次访问同一个DOM节点，先把它缓存起来，避免每次都重新获取。

const myList = document.getElementById('myList'); // 缓存DOM节点

for (let i = 0; i < 1000; i++) {
  myList.innerHTML += '<li>New Item</li>'; // 避免在循环中重复获取DOM
}

登录后复制

使用DocumentFragment： DocumentFragment是一个轻量级的DOM结构，不会被添加到真实的DOM树中。你可以先在DocumentFragment中构建DOM结构，然后一次性添加到页面中。

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = 'New Item';
  fragment.appendChild(li);
}

document.getElementById('myList').appendChild(fragment); // 一次性添加到DOM

登录后复制

减少重绘和重排： 修改DOM结构、样式会导致浏览器重新计算布局和绘制页面。尽量批量修改样式，避免频繁的重绘和重排。

除了基本的DOM节点属性，还有哪些高级遍历技巧？

递归遍历： 如果你需要遍历一个复杂的DOM树，可以使用递归函数。

function traverse(node) {
  console.log(node.nodeName);

  for (let i = 0; i < node.childNodes.length; i++) {
    traverse(node.childNodes[i]); // 递归调用
  }
}

traverse(document.body); // 从body开始遍历

登录后复制

TreeWalker和NodeIterator： 这两个API提供了更高级的DOM遍历功能。可以自定义过滤器，选择特定类型的节点。

const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT, // 只显示元素节点
  null,
  false
);

let node;
while (node = treeWalker.nextNode()) {
  console.log(node.nodeName);
}

登录后复制

MutationObserver： 如果你需要监听DOM树的变化，可以使用MutationObserver。它可以让你在DOM节点被添加、删除、修改时收到通知。

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log(mutation.type); // 变化的类型
    console.log(mutation.addedNodes); // 添加的节点
    console.log(mutation.removedNodes); // 删除的节点
  });
});

observer.observe(document.body, {
  childList: true, // 监听子节点的变化
  subtree: true, // 监听所有后代节点的变化
  attributes: true, // 监听属性的变化
  characterData: true // 监听文本内容的变化
});

登录后复制

如何处理动态生成的DOM节点？

动态生成的DOM节点，指的是通过JavaScript代码创建并添加到页面中的节点。对于这些节点，需要注意事件委托和及时更新缓存。

事件委托： 如果你的动态节点需要绑定事件，不要直接给每个节点绑定事件。而是把事件绑定到父节点上，利用事件冒泡机制来处理。

<ul id="myList">
  <!-- 动态生成的<li>元素将会添加到这里 -->
</ul>

<button id="addButton">Add Item</button>

<script>
  document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('Clicked on item: ' + event.target.textContent);
    }
  });

  document.getElementById('addButton').addEventListener('click', function() {
    const li = document.createElement('li');
    li.textContent = 'New Item';
    document.getElementById('myList').appendChild(li);
  });
</script>

登录后复制

及时更新缓存： 如果你缓存了DOM节点，当动态节点被添加或删除时，需要及时更新缓存。

let listItems = document.querySelectorAll('#myList li'); // 初始缓存

document.getElementById('addButton').addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = 'New Item';
  document.getElementById('myList').appendChild(li);

  listItems = document.querySelectorAll('#myList li'); // 更新缓存
});

登录后复制

以上就是怎么使用JavaScript操作DOM节点遍历？的详细内容，更多请关注php中文网其它相关文章！