Can't access the value of HTMLCollection

Asked 26/8, 2015 at 9:2 Answered 26/8, 2015 at 9:43

Solved javascript html dom htmlcollection

test.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script>
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
    // for(var i=0, max=eles.length)
    </script>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
</body>

I checked eles represents HTMLCollenction.

Here says HTMLCollection also exposes its members directly as properties by both name and index.

So I tried to debug by console.log(eles.length) and console.log(eles[0]). But unfortunately console shows 0 and undefined.(using Google Chrome Tool Developer)

How can I access the result of eles? I want to change style and add attribute to the tags gotten by ClassName. Plus, I can only use natural Javascript.

Barham answered 26/8, 2015 at 9:2 Comment(0)

The problem is you have placed the script in the header which gets executed before the html elements are loaded, so getElementsByClassName() will not return any elements.

One solution is to wait for the html elements to be loaded then execute your script, for that you can use the window objects load event

window.addEventListener('load', function () {
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
})

Or you can place your script at the bottom of the body element instead of in head so that by the time the script is parsed and executed the elements are loaded in the dom

Kenwrick answered 26/8, 2015 at 9:4 Comment(1)

I chose Arun's as the best answer, although other feedbacks are thankful as much as this one. Thanks. – Barham 26/8, 2015 at 12:1

Your html elements dont exist when you run the code. you code is processed, at that poiint your body tag doesnt exist. so:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>

    <script>
      var eles = document.getElementsByClassName('review');
      console.log(eles);
      console.log(eles.length);
      console.log(eles[0]);
    </script>
</body>

Works fine because you've ran your code after your html elements have been added.

Best practices are that you generally have your javascript right at the end of your body tag.

(Or another technique is using a 'ready' script, like document.load or $(function(){)

Leatherman answered 26/8, 2015 at 9:6 Comment(0)

-2

Use below code for access 0 position element:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
</body>
<script>
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
    // for(var i=0, max=eles.length)
    </script>
</html>

Laguna answered 26/8, 2015 at 9:43 Comment(0)

Recommended topics

Hot tags