.firstElementChild, .lastElementChild... what about those in between?

Question

I'm trying to update an existing markup element in React rather than replacing an entire fragment. When I assign a div container element to a variable with .getElement(); I can select the first element within the div with firstElementChild. Then I can find its ".style.color" for example.

Now there's a popover that's the before-last element that I also want to get to it (and its backgroundColor). Not the lastElementChild, the one before that. How do I "get to it"? Is there an array of children I can use?

Answer 1

Not the lastElementChild, the one before that. How do I "get to it"?

You can go from the lastElementChild to its previousSibling

Is there an array of children I can use?

There is a live HTMLCollection (which is array-like) called children

Answer 2

DOM_Selector_Image

As can be shown in the attached image. Which presents a basic website with the "HTML Tree Generator" Add on.

typing the following in the chrome console:-

document.firstElementChild.lastElementChild.lastElementChild.previousElementSibling;

Will give you the following results:

<p>? The DOM ?</p>?

This is because

firstElementChild

This is the HTML document

lastElementChild

This is the Body

lastElementChild

This is the SCRIPT

previousElementSibling

This is the element before the SCRIPT which is the text "The DOM"