Get immediate first child element

Question

I m writing a Chrome content script extension and I need to be able to target a specific element that  unfortunately  has no unique identifiers except its parent element   I need to target the immediate first child element of parentElement  console log parentElement  reports both of the child elements nodes perfectly  but the succeeding console logs  the ones that target the childNodes  always return an undefined value no matter what I do   This is my code so far  I have excluded the actual names to avoid confusion and extra  unnecessary explanation   function injectCode          var parentElement   document getElementsByClassName  uniqueClassName         if  parentElement  amp  amp  parentElement innerHTML                   console log parentElement           console log parentElement firstElementChild           console log parentElement firstChild           console log parentElement childNodes           console log parentElement childNodes 0            console log parentElement childNodes 1           else            setTimeout injectCode  250                How do I select the first child element node of parentElement     Update  parentElement children 0  also has the same error as parentElement childNodes 0

User · Accepted Answer

Both these will give you the first child node:

console.log(parentElement.firstChild); // or
console.log(parentElement.childNodes[0]);

If you need the first child that is an element node then use:

console.log(parentElement.children[0]);

Edit

Ah, I see your problem now; parentElement is an array.

If you know that getElementsByClassName will only return one result, which it seems you do, you should use [0] to dearray (yes, I made that word up) the element:

var parentElement = document.getElementsByClassName("uniqueClassName")[0];

[javascript] Get immediate first child element

Examples related to javascript

Examples related to dom