因此，我将在我的问题前先让您知道这是学校的作业。我一直在努力解决这个问题，并尝试在 MDN 文档中找到解决方案，但我不知所措。我必须:
- 获取 bug 的 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>
我已经能够通过以下代码使用 DOM 来获取 li 元素:
var list = document.getElementsByTagName("ul");
当我在 DOM 中调用 list 时，我返回 ul，其中包含所有 li 元素。不确定这是否是我应该对 NodeList 执行的操作。我也对如何将 NodeList 转换为数组感到困惑。不确定是否需要使用 for 循环并将 NodeList 的每个元素附加到新数组中？这对我来说仍然是非常新的和令人困惑的。
非常感谢任何帮助，但如果您愿意分享见解和解释，那就更理想了。我真的很努力地思考这个问题，但我却做不到。预先感谢您!
最佳答案
您可以迭代所有 <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]);
}
nodeList 或 HTMLCollection 可以使用简单的 for 进行迭代循环如上所示。这些对象没有数组方法，但如果您确实想使用数组方法，可以将其复制到数组中。
注意，使用 document.querySelectorAll() 可能更简单列出所有 <li>元素，您可能希望定位特定的 <ul>通过在其上放置 id 进行标记，以防有其他 <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 - 使用 NodeList 并转换为数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29721044/