本文介绍如何使用Array.from()将DOM节点转换为数组，并利用Array.filter()和Array.forEach()等数组方法对DOM元素进行筛选和操作。通过具体示例展示了如何实现这一过程。
Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach()on them.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Array.from() example</title> </head> <body> <ul> <li class="product">15.99</li> <li class="product">7.99</li> <li class="product">32.99</li> <li class="product">24.99</li> <li class="product">5.99</li> </ul> </body> <script src="./index.js"></script> </html>
const products = Array.from(document.querySelectorAll('.product')); products .filter(product => parseFloat(product.innerHTML) < 10) .forEach(product => product.style.color = 'red');
What we got from document,querySelectorAll('.product') is 'NodeList', it is an array-like type, but cannot apply .filter, .map, .forEach to it. SO we use Array.from() method to convert is.
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
