JavaScript的DOM - 使用的NodeLists并转换为一个数组 [英] JavaScript DOM - Using NodeLists and Converting to an Array
问题描述
所以我会preface我的问题与让你知道，这是学校的一项任务。我一直在努力解决这个问题，我试图找到MDN文档中的解决方案，我很茫然。我有：
so I will preface my question with letting you know that this is an assignment for school. I have been working to solve this and I have tried to find the solution within the MDN documentation and I am at a loss. I have to:
- 抢错误的NodeList
- 转换节点树到数组
下面是我的index.html文件：
Here is my index.html file:
<!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具有以下code：
I have been able to grab the li elements, while using the DOM with the following code:
var list = document.getElementsByTagName("ul");
当我在DOM通话清单，我回到了UL，它包含了所有的李元素。不知道这是我应该相对于节点树做。我也困惑，我怎么能在节点列表转换为数组。不知道如果我需要使用一个for循环，并追加节点列表中的每个元素到一个新的数组？这一切都还是很新的，混乱给我。
When i call list in the DOM, I am returned the ul, which contains all of the li elements. Not sure if that is what I am supposed to do with respect to the NodeList. I am also confused as to how I can convert the NodeList to an array. Not sure if I need to use a for loop and append each element of the NodeList into a new array? This is all still very new and confusing to me.
任何帮助很多AP preciated，但如果你愿意分享洞察力和解释，这将是理想的。我真的试图总结我的脑海围绕这一点，我未能达到。谢谢你在前进！
Any help is much appreciated, but if you are willing to share insight and an explanation, that would be ideal. I am really trying to wrap my mind around this and I am falling short. Thank you in advance!
推荐答案
您可以遍历所有的＆LT;李＆GT; 中的每个＆LT物品; UL＆GT; 在这样的页面，同时能够分别判断哪些＆LT; UL＆GT; 它们是：
You can iterate all the <li> items in each <ul> in the page like this while able to separately tell which <ul> they are in:
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]);
}
}
或者，如果你只是希望所有＆LT;李＆GT; 标签，而不是爆发＆LT; UL＆GT;
var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
console.log(items[i]);
}
一个节点列表或的HTMLCollection可以用一个简单的为迭代环路上面看到的。这些对象不具有阵列的方法，但可以复制到一个数组，如果你真的想用数组的方法。
A nodeList or HTMLCollection can be iterated with a simple for loop as seen above. These objects do not have array methods, but can be copied into an array if you really want to use array methods.
请注意，它可能是简单的使用 document.querySelectorAll（）上市所有的＆LT;李＆GT; 元素，你可能想针对特定＆LT; UL＆GT;通过把一个ID就可以了，以防标记还有其他＆LT; UL＆GT; 和＆LT;李方式＆gt; 页面元素
Note, it is probably simpler to use document.querySelectorAll() for listing all the <li> elements and you may want to target a specific <ul> tag by putting an id on it in case there are other <ul> and <li> elements in the page.
<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]);
}
一个节点列表或的HTMLCollection可以被复制到一个这样的数组：
A nodeList or HTMLCollection can be copied into an array like this:
var list = Array.prototype.slice.call(document.querySelectorAll("#buglist li"), 0);
list.forEach(function(item) {
console.log(item);
});
这篇关于JavaScript的DOM - 使用的NodeLists并转换为一个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
