Home / Questions / 560203
Accepted
PySanti
Asked: 2022-10-04 01:59:30 +0800 CST 2022-10-04 01:59:30 +0800 CST

Why is the HTML document.getElementsByTagName() method not working as expected?

  • 772
  • Good, it turns out that I am doing some practices with HTMLand the method document.getElementsByTagNamedoes not work as I expect. This method is supposed to return a HTMLColletion, which despite not being an array, is iterable as one, however when I try to iterate the HTMLCollectionreturn, it gives me unexpected results, let's see:

Code:

 'use strict';
    let body = document.getElementsByTagName('body'); // por qué no funciona como se espera el getElementByTagName
    console.log(body)

-This code returns what could be expected...

Result:

HTMLCollection { length: 0 }

However, if I try to iterate it the following happens...

Code:

 'use strict'; let body = document.getElementsByTagName('body')[0]; 
 console.log(body)

Result:

null

  • On the other hand, if we iterate using the method .item(0), instead of returning nullreturns undefined. On the other hand, on the console, everything works as I expect. What is this behavior due to?
javascript

1 Answers

  1. Best Answer

    You probably have your javascript code in your HTML code before the tag body:

    <html>
 ...
<script> // tu código </script>
...
<body>
</body>
</html>

    Browsers interpret HTML sequentially: in this case the Javascript is loaded, executed, and then the body:

    <script>
   console.log("buscando antes", document.getElementById("despues"));
</script>

<div id="despues"></div>

<script>
   console.log("buscando después", document.getElementById("despues"));
</script>

    Solutions:

    • Add the code after the body.

    • Make the code run when the page finishes running:

    window.addEventListener('load', (event) => {
  // tu código
});
    • If your Javascript code is in an external file (that is, instead of adding the code in the HTML itself you are using the attribute src), you can use the attribute deferto indicate that the execution takes place after all the HTML is processed:
    <script src="miFichero.js" defer></script>
    • 4