本文阅读量 次
1. W3C HTML¶
1.1 NodeList 和 HTMLCollection¶
| NodeList | HTMLCollection | 备注 | |
|---|---|---|---|
| 如何生成 | document.querySelectorAll() 的返回值 | ||
| 本质 | Node 顾名思义就是节点，可以是 HTML 的，也可以是其它的 | 仅支持 HTML 的 | |
| 遍历 | 可以使用 forEach 遍历，但不是 Array, 不能使用 map, filter 遍历 可以通过 Array.from 转成 Array | 不能使用 forEach，只能使用 for ... of | |
| 获取 item 属性值 | Array.from 转换后可以按照 Element 获取 | ||
| 即时性 | 通过 querySelectorAll 获取的是静态的 通过 Node.childNodes 获取的是动态的 | 总是动态的 |
NodeList 获取每个元素的 href 属性
Array.from($$('td.left a')).map(item => item.getAttribute('href'))
参考
- https://www.bookstack.cn/read/javascript-tutorial/docs-dom-nodelist.md ⧉
- https://www.freecodecamp.org/news/dom-manipulation-htmlcollection-vs-nodelist/ ⧉
- https://developer.mozilla.org/en-US/docs/Web/API/NodeList ⧉
- https://developer.mozilla.org/en-US/docs/Web/API/Node ⧉
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection ⧉