Convert a HTML Collection to Javascript Array?

Question

I am a newbie, trying to learn w3c-dom, html-dom, just went through this DOM-Introduction

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>
  <body>
    <script type="text/javascript">
      var getByTag = function(selector) {
        // FIXME: Do more conditions -- Come Up with more non-verbose regex condition
        return /\w/i.test(selector) ? document.getElementsByTagName(selector) : null;
      }
      var isHTMLCollection = function(data) {
        return data.toString() === '[object HTMLCollection]';
      }
      var toArray = function(c) {
        return Array.prototype.slice.call(c);
      }
      var getAllPs = getByTag('p');
      console.log(isHTMLCollection(getAllPs), 'isHTMLCollection');
      console.log(Array.isArray(getAllPs), 'isArray-1');
      console.log(getAllPs, 'getAllPs');
      var _arrayLike = toArray(getAllPs);
      console.log(Array.isArray(_arrayLike), 'isArray-2');
      console.log(_arrayLike.length, 'Array.length');
    </script>
    <p id="p1">
      First Para
    </p>
    <p id="p2">
      Second Para
    </p>
  </body>
</html>

While logging this on console, i got just an empty array, when i tried to convert the HTMLCollection to Array.

Note: Tried using for-loop also.

Attached the console output,

Your code will not work as it is looking for <p> tags before the p tags are actually read by the DOM. Either move your script to below the <p> tags or wrap your code in document.addEventListener('DOMContentLoaded', function(){ ... }) - To show you: log getAllPs.length. — somethinghere
– somethinghere, Commented Aug 10, 2016 at 14:06
Should be noted that [].slice.call(document.getElementsByTagName(selector)) does roughly the same thing — adeneo
– adeneo, Commented Aug 10, 2016 at 14:07
@adeneo Yes it does, but it instantiates a new object, which is technically a wasted resource. — somethinghere
– somethinghere, Commented Aug 10, 2016 at 14:08
The reason you see the objects in the console, is that console ouput is generated asynchronously, and by that time the live node list has already been updated. But your code completes before that time, and at that time the node list is still empty. You are being mislead by the console output. — trincot
– trincot, Commented Aug 10, 2016 at 14:09
Unless you really need the "live" feature of the HTMLCollection I would go with the new .querySelectorAll() method. It returns a "non-live" NodeList which wouldn't have produced this output. — Andreas
– Andreas, Commented Aug 10, 2016 at 14:19

Sathish · Accepted Answer · 2016-08-10 14:16:12Z

1

Yes, adding

document.addEventListener('DOMContentLoaded', function() { //rest of the code });

fixes the issue

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DOM</title>
  </head>
  <body>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var getByTag = function(selector) {
          // FIXME: Do more conditions -- Come Up with more non-verbose regex condition
          return /\w/i.test(selector) ? document.getElementsByTagName(selector) : null;
        }
        var isHTMLCollection = function(data) {
          return data.toString() === '[object HTMLCollection]';
        }
        var toArray = function(c) {
          return Array.prototype.slice.call(c);
        }
        var getAllPs = getByTag('p');
        console.log(isHTMLCollection(getAllPs), 'isHTMLCollection');
        console.log(Array.isArray(getAllPs), 'isArray-1');
        console.log(getAllPs, 'getAllPs');
        var _arrayLike = toArray(getAllPs);
        console.log(Array.isArray(_arrayLike), 'isArray-2');
        console.log(_arrayLike.length, 'Array.length');
      });
    </script>
    <p id="p1">
      First Para
    </p>
    <p id="p2">
      Second Para
    </p>
  </body>
</html>

Note: Problem with chrome console is, array values are evaluated on asynchronously.

Thanks to @somethinghere & @trincot.

edited Aug 10, 2016 at 14:16

answered Aug 10, 2016 at 14:12

Sathish

2,2183 gold badges29 silver badges45 bronze badges

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

3 Comments

somethinghere Over a year ago

Wooot! It's these kind of things that trip things up when you start (What the f*ck is going on???? Aaaarrrrrggghhh!), but once you found them and answered them you won't be fooled twice!

somethinghere Over a year ago

I would like to suggest that the answer is not document.addEventListener, but specifically adding an event listener for the DOMContentLoaded event. Adding a click event, for example, won't make a difference nor solve your problem (well, it will, but it requires a click)

Sathish Over a year ago

Corrected & Updated @somethinghere

Collectives™ on Stack Overflow

Convert a HTML Collection to Javascript Array?

1 Answer 1

Thanks to @somethinghere & @trincot.

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Thanks to @somethinghere & @trincot.

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related