The Web Developer Bootcamp 2024

Colt Steele

Back to DOM Index Page

Parent | Child | Sibling
parentElement

Because of the DOM's hierarchal structure, elements can be navigated through their parent, child, and sibling relationships. parentElement allows us to navigate up one level to an element's parent element. Let's demonstrate this by using the [b] tags from this paragraph. Since there are several [b] tags, we will use querySelector('b') to select the first one. We are also going to assign it to a variable for easier coding:

  • const firstBold = document.querySelector('b');
  • firstBold now returns < b>parentElement< /b>
    • because the 1st [b] tag of the paragraph is parentElement.
We can use parentElement to navigate up one level of the DOM to return the "parent Element" of the [b] tag:
  • firstBold.parentElement    // returns < p>...< /p>
    • because we have "navigated" up one level to the [p] tag that contains the [b] tag.
And if we continued:
  • firstBold.parentElement.parentElement    // returns < article>...< /article>
    • because the [article] tag is the parent of the [p] tag
and so on, and so on. We could continue "stringing" parentElement's until we get to the very top element which would be the HTML tag itself.

We can see that parentElement gives us a way to navigate up the DOM structure, so that we can then affect some change on an element such as appending, or removing an element.

children Elements

While parentElement allows us to navigate up one level of a DOM structure, navigating through children elements is a little different because, while each element will only have one parent element, it could possible have many children elements.

For example, if we select the 1st paragraph on this page (the 1st [p] tag), and assign it to a variable like so:

  • const firstPara = document.querySelector('p');
and then call:
  • firstPara.parentElement it would return
    • < article>...< /article>
because the parent element of the 1st [p] tag is an [article] element.

Before we start using children elements, we may want to find out how many child elements an element actually has. childElementCount can be used for this. For example:

  • firstPara.childElementCount would return 6,
    • because there are 6 child elements in the first [p] element.
      • (a [span] element and 5 [b] elements).

We can also build an HTML Collection of the child elements by calling:

  • firstPara.children
    • which would return (for our 1st paragraph)
      • HTML Collection(6) [span.firstWord, b, b, b, b, b]
      • showing us all of the children for the 1st [p] element.
if we EXPAND this HTML Collection (in the console) we would get:
  • HTMLCollection(6) [span.firstWord, b, b, b, b, b]
    • 0: span.firstWord
    • 1: b
    • 1: b
    • 1: b
    • 1: b
    • 1: b
  • length: 6
  • [[Prototype]]: HTMLCollection
and we could further expand each individual item in the collection to see ALL of the DOM Object properties for each child element.

while this HTML Collection looks like an ARRAY, it is not. It is an HTML Collection. But it IS iterable like an array. So we could call:

  • firstPara.children[0];
    • returns < span class="firstWord">Because< /span>
  • or firstPara.children[1];
    • returns < b>firstElement< /b>
  • and so on.

prev/next element sibling

If a parent element has multiple child elements, AND we have selected one of these child elements, we can then navigate back and forth within the child elements using previousElementSibling and nextElementSibling.

From our previous example, if we select firstPara.children[1]; and assign it to a variable:

  • const child = firstPara.children[1];
  • child would = < b>parentElement< /b>    //the 2nd child of the 1st paragraph.
    • remember, the HTML Collection indexes start counting at 0 so index[1] would be the second element
and if we call:
  • child.previousElementSibling
  • we would return < span class="firstWord">Because< /span>    //the 1st child of the 1st paragraph.
    • because the previous child element (to firstPara.Element[1]) would be firstPara.Element[0] which would be the [span] element.
but if we call:
  • child.nextElementSibling
  • we would return < b>parent< /b>    //the 3rd child of the 1st paragraph.
    • because the next child element (to firstPara.Element[1]) would be firstPara.Element[2] which would be another [b] element.

Back to Top