原生JS实现循环Nodelist Dom列表的4种方式示例的完整攻略如下：
1. 使用for循环遍历Nodelist
可以使用常规的for循环来遍历Nodelist。要遍历Nodelist的所有项，需要使用nodelist.length属性，并使用nodelist.item(index)方法来访问单个元素。
const nodeList = document.querySelectorAll('li');
for (let i = 0; i < nodeList.length; i++) {
console.log(nodeList.item(i).textContent);
}
2. 使用forEach方法遍历Nodelist
如果想用更简洁的方式遍历Nodelist，可以使用forEach方法。这种方法的语法更加简洁，但不支持在每个项上使用break或continue。
const nodeList = document.querySelectorAll('li');
nodeList.forEach((element) => {
console.log(element.textContent);
});
3. 使用for...of循环遍历Nodelist
使用for...of循环可直接遍历Nodelist的每个元素，它的语法更简单，且不需要使用nodelist.item(index)方法来访问单个元素。
const nodeList = document.querySelectorAll('li');
for (const element of nodeList) {
console.log(element.textContent);
}
4. 将Nodelist转换为数组，使用数组方法
还可以将Nodelist转换为数组，然后使用支持在每个项上使用break或continue的数组方法，例如for循环、forEach方法、map方法、reduce方法等等。
const nodeList = document.querySelectorAll('li');
const listArray = Array.from(nodeList);
listArray.forEach((element) => {
console.log(element.textContent);
});
以上是四种常用的方法，使用哪一种可能根据实际需求而定。至于示例，可以使用以下网页代码：
<!DOCTYPE html>
<html>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>
</body>
</html>
同时在JavaScript代码块中使用以上的四种方法都会输出ul中li的文本内容，例如：
const nodeList = document.querySelectorAll('li');
for (let i = 0; i < nodeList.length; i++) {
console.log(nodeList.item(i).textContent);
}
const nodeList = document.querySelectorAll('li');
nodeList.forEach((element) => {
console.log(element.textContent);
});
const nodeList = document.querySelectorAll('li');
for (const element of nodeList) {
console.log(element.textContent);
}
const nodeList = document.querySelectorAll('li');
const listArray = Array.from(nodeList);
listArray.forEach((element) => {
console.log(element.textContent);
});
以上代码块可以再控制台中测试运行。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现循环Nodelist Dom列表的4种方式示例 - Python技术站
微信扫一扫 
支付宝扫一扫 