0

Why is it that when I run: 

document.getElementsByTagName('p')[0].innerText;

from the console, the inner text of the first p element is returned (correctly as the inner text of the p element), but when I run it via a script file from the browser the console logs it as 'undefined'?

here's the code I'm running from the internal .js file:

console.log('test', document.getElementsByTagName('p').innerText);

here's the console output: test undefined

hanumanDev
  • 6,226
  • 11
  • 76
  • 144
  • 5
    You're not selecting the first element of the collection in your second example: the [0] – GMaiolo Jun 13 '18 at 20:24
  • Another possibility is that the DOM changes after the initial call and you calling the `getElementByTagName` in the console. – tantalum Jun 13 '18 at 20:26
  • @user184994 I had considered that, but the script file is right above the closing body tag. – hanumanDev Jun 13 '18 at 20:27

1 Answers1

3

.getElementsByTagName() returns a node list. The following:

document.getElementsByTagName('p').innerText

attempts to get the .innerText of that node list, but node lists don't have .innerText, only individual nodes do. You must access one of the nodes in the list and then you can get its .innerText, like this:

document.getElementsByTagName('p')[0].innerText

Also, at the time that you have the console open and are typing into it, the document has been fully parsed. Your same test, but with code in the file is being attempted prior to the p elements being parsed.

Make sure you have your script tag located just before the closing body tag in your document so that by the time it is encountered, all HTML will have been parsed into memory.

Examples:

<!doctype html>
<html>
<head>
  <title>Attempting to get DOM references too early</title>
  
  <script>
    // This will fail because, at this point, the <p> hasn't been parsed yet
    console.log(document.querySelector("p").textContent);
  </script>
  
</head>
<body>
  <p>Test</p>
</body>
</html>

<!doctype html>
<html>
<head>
  <title>Getting DOM references after the DOM is ready</title>
</head>
<body>
  <p>Test</p>
  
  <script>
    // This will work because, at this point, the <p> has been parsed
    console.log(document.querySelector("p").textContent);
  </script>
  
</body>
</html>

FYI:

  • .getElementsByTagName() returns a "live" node list that can hinder page performance because every time the variable is accessed, the entire document must be searched again to ensure you have the most up-to-date collection. This is not appropriate in many use-cases (especially if your document isn't dynamically adding/removing elements). So, in most cases, use .querySelectorAll() instead, as this method returns a "static" node list.
  • .innerText is a "de facto" standard, but it works differently than .textContent, which is an actual standard. Use .textContent instead.
Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
  • Thank you! I did check that my javascript was right above the

    and not executing before the

    tag had loaded. My code has the p above the script include:

    Please fill in all the fields

     – hanumanDev Jun 13 '18 at 20:45
  • 1
    @hanumanDev Refer to the first part of my answer. What you are testing in the console is a specific node's text and what you have in the code is trying to get the `.innerText` of an entire node list. – Scott Marcus Jun 13 '18 at 20:47