JavaScript: Node List to Array Conversion

Question

I am trying to convert Node List to Array. I want to print the list (caption 1,...caption 5), but it prints:

[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Caption</title>
<style>
    .captn {
    position: absolute;
    padding: 10px;
    margin: 200px auto;
    text-align: center;
    font-family:serif, fantasy;
    font-size:36px;
    color: #009933;
    text-decoration: none;
    text-transform: uppercase;
    list-style-type: none;
}
</style>

</head>

<body>


 <div> 
    <ul id = "caption" class="captn"><li id = "caption0">caption 0</li><li id = "caption1">caption 1</li><li id = "caption2">caption 2</li><li id = "caption3">caption 3</li><li id = "caption4">caption 4</li><li id = "caption5">caption 5</li></ul>
 </div> 

<script>

    var msg;
    var cap = [];
    var capList;

    var f = document.getElementsByClassName("captn");
    msg = f.item(0).childNodes;
    b = f.item(0).childNodes.length;
    var classAr = Array.prototype.slice.call(msg);

    document.write(classAr);


</script>       

</body>
</html>

Welcome to Stack Overflow. Read here for more information about how to create a Minimal, Complete and Verifiable question. — Toby
– Toby, Commented Jul 27, 2016 at 2:16

Red Mercury · Accepted Answer · 2016-07-27 14:48:14Z

1

Use querySelectorAll and select all elements under class captn with an id beginning with caption, then convert the node list to array usingArray.from and lastly map through the array, returning a new array containing only the textContent

var captions = Array.from(
  document.querySelectorAll('.captn [id^="caption"]')
);

var captionsText = captions.map(function(caption) {
  return caption.textContent;
});


document.write(captionsText);

<div>
  <ul id="caption" class="captn">
    <li id="caption0">caption 0</li>
    <li id="caption1">caption 1</li>
    <li id="caption2">caption 2</li>
    <li id="caption3">caption 3</li>
    <li id="caption4">caption 4</li>
    <li id="caption5">caption 5</li>
  </ul>
</div>

edited Jul 27, 2016 at 14:48

answered Jul 27, 2016 at 1:59

Red Mercury

4,3703 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user6642297 Over a year ago

Thank you. I am new in Java Script. What is the meaning of Bitwise XOR operator in JavaScript: '.captn [id^="caption"]'

Red Mercury Over a year ago

The hat symbol ^ in this context does not mean bitwise XOR. document.querySelectorAll is a function which takes in a selector developer.mozilla.org/en-US/docs/Web/API/Document/…. The .captn is a class selector and the [id^="caption"] is a attribute selector. developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors. The ^= means starts with, so [id^="caption"] means select all the elements with an id that starts with "caption". Please consider marking my answer with the green checkmark of it helped you!

user6642297 Over a year ago

Thanks again. This answer is a turning point in my understanding for JavaScript. I marked the top arrow in the answer, but I couldn't see the green checkmark.

jonS90 · Accepted Answer · 2016-07-27 01:50:44Z

0

You can use Array.from().

Array.from(nodeList)

answered Jul 27, 2016 at 1:50

jonS90

1,3892 gold badges11 silver badges15 bronze badges

Comments

user6642297 · Accepted Answer · 2016-07-29 23:57:38Z

First of all I want to thank @Red Mercury that his answer greatly boosted my knowledge in JavaScript. I am new to Stack Overflow and don't know how to mark his answer green, if there is a gold mark, I would do for him. Thank you Red Mercury.

What I was trying to do is to put captions list as a sliding captions. It was easy to do with arrays in Javascript, but I was unable to convert node list into array, because nodelist did not work in loops with innerHtml. So here is the solution:

<html>
<head>
    <title>Slide 3</title>
    <style>
       .captn {
    padding-top: 550px;
    text-align:center;
    font-family:serif, fantasy;
    font-size:36px;
    color: #009933;
    text-decoration: none;
    text-transform: uppercase;  
}
    </style>
</head>

<body>


 <div> 
    <ul id = "caption" class="captn">
        <li id = "caption0">caption 0</li>
        <li id = "caption1">caption 1</li>
        <li id = "caption2">caption 2</li>
        <li id = "caption3">caption 3</li>
        <li id = "caption4">caption 4</li>
        <li id = "caption5">caption 5</li>
        <li id = "atim">item</li>
        <li id = "caption6">caption 6</li>
     </ul>
 </div> 

<script>
    var i = 0;
    var j = 0;
    var intv = 1000;
    var msg = "";
    var cap = [];
    var capList = "";


    var captions = Array.from(
            document.querySelectorAll('.captn [id ^= "caption"]')
        );

    var captionsText = captions.map(function(caption) {
            return caption.textContent;
        })


    for (i = 0; i < captions.length; i++) {
        cap[i] = captionsText[i] + "<br>";
        msg = cap[i];
        capList += msg.replace(/\,/g, "");
    }
    b = captions.length;

    function swapImage() {  
        var elm = document.getElementById("caption"); 
        elm.innerHTML = cap[j];

        if(j < b - 1 ) { 
            j++;
        }  
        else  { 
            j = 0; 
        }
        setTimeout("swapImage()", intv);
    }

    window.onload=swapImage;
    </script>   




</body>
</html>

Collectives™ on Stack Overflow

JavaScript: Node List to Array Conversion

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related