How to get an array from html using javascript?

Question

I have an HTML like this:

<div class='item'>
    <h1 id="Python">Python</h1>
</div>

<div class='item'>
    <h1 id="C++">C++</h1>
</div>

<div class='item'>
    <h1 id="PHP">PHP</h1>
</div>

How to use javascript to get an array like [Python, C++, PHP]?

I tried and wrote like this:

var myList = document.getElementsByTagName('h1');
console.log(myList.length)

But the Output is 0, it's strange.

Your code is valid. http://jsfiddle.net/gilleez/gez37k9m/ – Gurkan İlleez Oct 30 '14 at 12:29 — Gurkan İlleez, Oct 30 '14 at 12:29

score 2 · Accepted Answer · answered Oct 30 '14 at 12:33

Your code logs 3: http://jsfiddle.net/t0ho10hw/

To get an array of languages you can convert the HTMLCollection to an actual Array, then .map it to get languages:

var myList = document.getElementsByTagName('h1');
var languages = [].slice.call( myList ).map( function( item ){
    return item.innerHTML;
});

http://jsfiddle.net/t0ho10hw/1/

Or the "classic" way from before Array.map:

var languages = [];
for( var i=0; i<myList.length; i++){
   languages.push( myList[i].innerHTML );
}

http://jsfiddle.net/t0ho10hw/2/

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Using JQuery you could use this code :

var tab = [];
$(".item h1").each(function() {
    tab.push($(this).text());
 });

see Get an array of list element contents in jQuery

edited May 23 '17 at 12:05

Community

1
1

answered Oct 30 '14 at 12:37

Marc Delerue

65
10

Or simpler `$(".item h1").map(function(){ return $(this).text() });` but the question is not tagged `jQuery`. – pawel Oct 30 '14 at 12:40

score 0 · Answer 3 · answered Oct 30 '14 at 12:33

You need to be careful where and when you do your JS computation

<!DOCTYPE html>
<html>
  <head>
    <script>
        var myList = document.getElementsByTagName('h1');
        console.log(myList.length)
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

Will give you 0, because the Javascript is called before any parsing of the HTML body by your browser.

You need either : - to wait the page load

<!DOCTYPE html>
<html>
  <head>
    <script>
        window.onload = function(){
            var myList = document.getElementsByTagName('h1');
            console.log(myList.length)
        }
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

or write this javascript at the end of the page :

<!DOCTYPE html>
<html>
  <head>
    <script>
        var myList = document.getElementsByTagName('h1');
        console.log(myList.length)
    </script>
  </head>
  <body>
    <div class='item'>
        <h1 id="Python">Python</h1>
    </div>

    <div class='item'>
        <h1 id="C++">C++</h1>
    </div>

    <div class='item'>
        <h1 id="PHP">PHP</h1>
    </div>
</style>
</body>
</html>

Even better is to write it at the end of the page with the window.onload. It will be shorter to reach the HTML part of your page and rendering would be faster (this is significant for large amount of JS, but in this case, you should do file inclusion)

Thank you very much. I solved the problem after reading your answer. JS should load after the DOM is OK. — liyuhao, Oct 30 '14 at 12:37

How to get an array from html using javascript?

3 Answers3