Question

所以我会在提问时告诉你这是学校的一项任务。我一直在努力解决这个问题，我试图在MDN文档中找到解决方案而且我很茫然。我必须：

抓住错误的NodeList
将NodeList转换为数组

这是我的index.html文件：

<!DOCTYPE html>
<html>
<head>
    <title>Bugs in the DOM</title>
</head>
<body>

<div>

    <h1>Bugs in the DOM</h1>

    <ul>
        <li>Horse Flies</li>
        <li>Bed bugs</li>
        <li>Mosquito</li>
        <li>Ants</li>
        <li>Mites</li>
        <li>Cricket</li>
        <li>Woolly Bear Caterpillar</li>
        <li>Fleas</li>
        <li>Worms</li>
        <li>Leeches</li>
    </ul>

</div>

<script>
    (function() {
        // Your code here.
    }());
</script>

</body>
</html>

我已经能够获取li元素，同时使用带有以下代码的DOM：

var list = document.getElementsByTagName("ul");

当我在DOM中调用list时，我返回了ul，其中包含所有li元素。不确定这是否是我应该对NodeList做的。我也很困惑如何将NodeList转换为数组。不确定我是否需要使用for循环并将NodeList的每个元素追加到一个新数组中？这对我来说仍然是一个非常新的和令人困惑的。

非常感谢任何帮助，但如果您愿意分享见解和解释，那将是理想的。我真的试图围绕这一点，我正在做空。提前谢谢！

Answer 1

您可以像这样迭代页面中每个<li>中的所有<ul>项，同时能够单独告知它们所在的<ul>：

var list = document.getElementsByTagName("ul");
for (var i = 0; i < list.length; i++) {
    var items = list[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; j++) {
        console.log(items[j]);
    }
}

或者，如果您只想要所有<li>代码，而不是<ul>分析：

var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
    console.log(items[i]);
}

如上所示，可以使用简单的for循环迭代nodeList或HTMLCollection。这些对象没有数组方法，但如果你真的想使用数组方法，可以将它们复制到数组中。

注意，使用document.querySelectorAll()列出所有<li>元素可能更简单，您可能希望通过在其上添加ID来定位特定的<ul>标记，以防万一页面中的其他<ul>和<li>元素。

<ul id="buglist">
    <li>Horse Flies</li>
    <li>Bed bugs</li>
    <li>Mosquito</li>
    <li>Ants</li>
    <li>Mites</li>
    <li>Cricket</li>
    <li>Woolly Bear Caterpillar</li>
    <li>Fleas</li>
    <li>Worms</li>
    <li>Leeches</li>
</ul>

var items = document.querySelectorAll("#buglist li");
for (var j = 0; j < items.length; j++) {
    console.log(items[j]);
}

可以将nodeList或HTMLCollection复制到这样的数组中：

var list = Array.prototype.slice.call(document.querySelectorAll("#buglist li"), 0);
list.forEach(function(item) {
    console.log(item);
});

JavaScript DOM - 使用NodeLists并转换为数组

1 个答案: