JavaScript DOM - 使用节点列表并转换为数组

Question

所以我会先让您知道这是学校的作业，以此作为我的问题的开头。我一直在努力解决这个问题，我试图在 MDN 文档中找到解决方案，但我不知所措。我必须：

获取错误节点列表
将 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 中调用列表时，我返回了 ul，其中包含所有 li 元素。不确定这是否是我应该对 NodeList 执行的操作。我也对如何将 NodeList 转换为数组感到困惑。不确定我是否需要使用 for 循环并将 NodeList 的每个元素附加到一个新数组中？这对我来说仍然是非常新的和令人困惑的。

非常感谢任何帮助，但如果您愿意分享见解和解释，那将是理想的选择。我真的很想全神贯注于此，但我做不到。提前致谢！

Answer 1

您可以像这样迭代页面中每个 <ul> 中的所有 <li> 项，同时能够分别分辨出它们在哪个 <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]);
}

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

请注意，使用 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 - 使用节点列表并转换为数组

JavaScript DOM - Using NodeLists and Converting to an Array

html

javascript

arrays

dom

nodelist