0

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:

  1. Grab a NodeList of bugs
  2. 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!

Improve this question
4
  • use a for loop and append each element of the NodeList into a new array - yes, exactly. You can get the <li> elements with .getElementsByTagName("li"); Commented Apr 18, 2015 at 18:18
  • to convert nodeList to array use [].slice.call(nodeList); Commented Apr 18, 2015 at 18:18
  • document.getElementsByTagName('li') will return an HTMLCollection. document.querySelectorAll('li') will return a NodeList. Note that NodeLists are immutable. Commented Apr 18, 2015 at 18:26
  • In ES6 you can use var nodeArray = [...document.querySelectorAll("li")]; Commented Oct 22, 2015 at 2:14

1 Answer 1

Reset to default
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);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

19 Comments

Thank you for the quick reply! So, I am trying to make sense of what you have going on here and I am not able to get this to run. I am being hit with a syntax error. I took your last section of code that converts a node list to an array and modified it to not require me to change the id of the ul in my html file: var list = Array.prototype.slice.call(document.getElementsByTagName("li"), 0); list.forEach(function(item) { console.log(item); });
When I try to call list[1]; that is where I am hit with the syntax error. I am not sure why
@DrewTuzson - make sure you have the latest code from my answer because I fixed a few typos. And, I'm sure we could help you make your code work, but you'd have to show us exactly what code you were using.
@DrewTuzson - there is no list[1] in my code. Did you mean list[i]?
Why not Array.slice(…)?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.