Navigating the DOM tree

DOM nodes have a number of properties and methods for navigating around the document tree. Once we have a reference to an element, we can walk along the document tree to find other nodes.

Let’s have a look at a couple of the more useful ones.

Child nodes

We can get a collection of all the child elements of an element using the children property. In our food list example, food.children will return a node list of all the child elements of the <ul> element that has an ID of food. These are highlighted in the diagram below.