61

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

2
  • 2
    Do you want the first child node or the first child element (node)? May 6, 2012 at 22:07
  • don't let any spaces between parent div and child but it in one line Nov 10, 2015 at 12:43

1 Answer 1

124

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];
7
  • Everything returns undefined (as you can see in the image), and when you use a [0] it trips up the whole script. I just tried .children[0] too, and that didn't work either. :/ May 6, 2012 at 22:15
  • @BenHooper Updated my answer since you added the screenshot, I noticed the actual problem.
    – Paul
    May 6, 2012 at 22:16
  • 10
    Also note , that to get FIRST CHILD ELEMENT NODE there is a read-only property firstElementChild ..... ParentNode.firstElementChild
    – jave.web
    Apr 28, 2015 at 15:55
  • childNodes[0] returns nothing, everytime. It's childNodes[1] aka base1 Mar 23, 2017 at 22:08
  • No, childNodes[1] is always the second child node. Note that if the DOM was constructed with HTML containing whitespace (newline, tab, space, etc) before the HTML tag of the child, then childNodes[0] is a TextNode containing that whitespace and childNodes[1] is the element node (but it is still the second child).
    – Paul
    Mar 23, 2017 at 22:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.