All geek questions in one place

Unable to access HTMLCollection value

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 that eles represents an HTMLCollenction.

It says that HTMLCollection also exposes its members directly as properties by name and index.

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

How can I access eles results? I want to change the style and add an attribute to the tags received by ClassName. In addition, I can only use natural Javascript.

+1
source share
3 answers

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

One solution is to wait for the html elements to load and then execute your script, for which you can use the window object 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 put your script at the bottom of the body element instead of head , so that at the time of analyzing and running the script, the elements are loaded in dom

+4
source

Html elements do not exist when running the code. you code is being processed, while the poiint body tag does not 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>

It works fine because you ran your code after your html elements were added.

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

(Or another method uses a "ready" script, for example document.load or $(function(){ )

+1
source

Use the code below to access position item 0: -

 <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>
0
source

Source: https://habr.com/ru/post/1232786/

More articles:


All Articles