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
?
Update:parentElement.children[0]
also has the same error as parentElement.childNodes[0]
.
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
The child combinator ( > ) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. Elements matched by the second selector must be the immediate children of the elements matched by the first selector.
The firstChild property returns the first child node of a node. The firstChild property returns a node object.
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];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With