在HTML中遍历通常指的是使用JavaScript对DOM（文档对象模型）进行操作，从而访问和修改页面元素，下面是一些常用的方法来遍历HTML结构：
1、querySelectorAll 方法
querySelectorAll 是一个可以返回文档中匹配特定CSS选择器的所有元素的函数，这个方法返回的是一个非实时的NodeList对象，可以用数组的方法进行遍历。
let elements = document.querySelectorAll('div'); // 选取所有div元素
elements.forEach(function(element) {
console.log(element);
});
2、getElementsByTagName 方法
getElementsByTagName 方法可以根据指定的标签名获取元素集合，它返回一个实时的HTMLCollection，当DOM更新时，这个集合会自动更新。
let divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
console.log(divs[i]);
}
3、getElementsByClassName 方法
getElementsByClassName 可以根据类名获取元素集合，与getElementsByTagName类似，它也返回一个实时的HTMLCollection。
let items = document.getElementsByClassName('item');
for (let i = 0; i < items.length; i++) {
console.log(items[i]);
}
4、children 属性
children 属性返回元素的子元素集合，它是一个实时的HTMLCollection。
let parent = document.getElementById('parent');
for (let i = 0; i < parent.children.length; i++) {
console.log(parent.children[i]);
}
5、childNodes 属性
childNodes 属性返回元素的子节点集合，包括文本节点和元素节点，这是一个实时的NodeList。
let element = document.getElementById('someElement');
for (let i = 0; i < element.childNodes.length; i++) {
console.log(element.childNodes[i]);
}
6、firstChild 和 nextSibling 属性
通过firstChild属性获取第一个子节点，然后使用nextSibling逐级遍历兄弟节点。
let node = document.getElementById('startNode');
while (node) {
console.log(node);
node = node.nextSibling;
}
相关问题与解答：
Q1: querySelectorAll 和 getElementsByTagName 有什么区别？
A1: querySelectorAll 可以接受任何合法的CSS选择器作为参数，而getElementsByTagName 只能接受标签名。querySelectorAll 返回的是一个非实时的NodeList，不随DOM的变化自动更新；而getElementsByTagName 返回的是一个实时的HTMLCollection，当DOM更新时会自动变化。
Q2: 如何理解“实时”的HTMLCollection和“非实时”的NodeList？
A2: “实时”意味着当底层DOM更新时，HTMLCollection或NodeList会自动反映这些更改，因此它们总是表示最新的状态，相反，“非实时”的NodeList不会自动更新，如果在文档结构更改后需要最新的信息，必须重新查询，这在处理大量元素时可能影响性能，因为实时集合会导致更多的计算开销。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/307775.html
微信扫一扫 