Traversing the DOM

While it is always easier to select an element directly using getElementById() or querySelector(), there are times when that will be difficult to do. During those times it might be necessary to move through the DOM from a specific point. Fortunately, JavaScript provide many different methods for doing just that.

children

The children property is a read-only property that contains all of the child elements of a specific element.

const list = document.getElementById('list')
const items = list.children // HTMLCollection

NOTE

An HTMLCollection is an array-like object of HTML elements that offers methods and properties for access and manipulating the elements.

firstElementChild

The firstElementChild property returns an element's first child element, or null if the element has no children.

const list = document.getElementById('list')
const firstItem = list.firstElementChild // HTML Element

NOTE

There is also a [lastElementChild] property, which returns an element's last child element.

nextElementSibling

The nextElementSibling is a property that returns an element's next sibling element.

const list = document.getElementById('list')
const firstItem = list.firstElementChild // HTML Element
const nextItem = firstItem.nextElementSibling // HTML Element

NOTE

There is also a `previousElementSibling is a property that returns an element's previous sibling element.

This YouTube video was created by Steve Griffith.