如何将节点列表中的HREF属性分配到常规数组中?

Question

正如你在下面的代码中看到的，downloadLinks变量是<a>元素的 NodeList，我需要获取href属性并将它们分配到linkContainer数组中。for 循环根本不起作用。我做错了什么？

谢谢！

( () => {
"use strict";
// Variables holding content to show & hide
const tab1 = $("#default"),
tab2 = $("#dim"),
featureList = $("#default-wac-feature-list"),
downloadLinks = document.querySelectorAll("#dropdown-download-links > li > a"),
linkContainer = [];
for(let i = 0; i < downloadLinks.length - 1; i++) {
linkContainer[] = downloadLinks[i].href;
}
console.log(linkContainer);

}) ();

Answer 1

使用i < downloadLinks.length而不是i < downloadLinks.length - 1，并将链接分配给索引 -linkContainer[i](或使用Array.push(。

const downloadLinks = document.querySelectorAll("#dropdown-download-links > li > a"),
linkContainer = [];
for (let i = 0; i < downloadLinks.length; i++) {
linkContainer[i] = downloadLinks[i].href;
}
console.log(linkContainer);

<ul id="dropdown-download-links">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
</ul>

一个更简单的选择是使用Array.from()将 NodeList 直接转换为 href 数组：

const downloadLinks = document.querySelectorAll("#dropdown-download-links > li > a");
const linkContainer = Array.from(downloadLinks, el => el.href);
console.log(linkContainer);

<ul id="dropdown-download-links">
<li><a href="1">1</a></li>
<li><a href="2">2</a></li>
<li><a href="3">3</a></li>
</ul>

Answer 2

节点列表可能是一个问题，因为你不知道它们不是真正的数组。我使用大卫沃尔什详述的方法。它简单明了。

var domElems = [].slice.call( downloadLinks = document.querySelectorAll("#dropdown-download-links > li > a") );

我经常遇到这种情况，以至于我为它创建了一个实用程序函数。

function nodeToArray(domElems ){
return [].slice.call(domElems);
}
// and then I use it like this.
var getDomArr = nodeToArray(document.querySelectorAll("#dropdown-download-links > li > a") );