Get immediate first child element

JavascriptDom

Javascript Problem Overview


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 && 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?

enter image description here

Update:
parentElement.children[0] also has the same error as parentElement.childNodes[0].

Javascript Solutions


Solution 1 - Javascript

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];

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmythofechelonView Question on Stackoverflow
Solution 1 - JavascriptPaulView Answer on Stackoverflow