JavaScript DOM - Using NodeLists and Converting to an Array

问题

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:

Grab a NodeList of bugs
Convert the NodeList to an Array

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>

I have been able to grab the li elements, while using the DOM with the following code:

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

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.

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!

回答1:

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]);
    }
}

Or, if you just want all <li> tags, not broken out by <ul>:

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

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.

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]);
}

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);
});

来源：https://stackoverflow.com/questions/29721044/javascript-dom-using-nodelists-and-converting-to-an-array

标签

javascript

html

arrays

dom

nodelist