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 && 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); } } ``` Ho…

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

Get immediate first child element

Solution

Problem