Summary: in this tutorial, you will learn how to get the first child element, last child element, and all children of a specified element.

Suppose that you have the following HTML fragment:

Code language: HTML, XML (xml)

Get the first child element

To get the first child element of a specified element, you use the firstChild property of the element:

Code language: JavaScript (javascript)

If the parentElement does not have any child element, the firstChild returns null. The firstChild property returns a child node which can be any node type such as an element node, a text node, or a comment node. The following script shows the first child of the #menu element:

Code language: JavaScript (javascript)

Output:

Code language: CSS (css)

The Console window show #text because a text node is inserted to maintain the whitespace between the openning <ul> and <li> tags. This whitespace creates a #text node.

Note that any whitespace such as a single space, multiple spaces, returns, and tabs will create a #text node. To remove the #text node, you can remove the whitespaces as follows:

Code language: HTML, XML (xml)

Or to get the first child with the Element node only, you can use the firstElementChild property:

Code language: JavaScript (javascript)

The following code returns the first list item which is the first child element of the menu:

Code language: JavaScript (javascript)

Output:

Code language: HTML, XML (xml)

In this example:

• First, select the #menu element by using the getElementById() method.
• Second,  get the first child element by using the firstElementChild property.

Get the last child element

To get the last child element of a node, you use the lastChild property:

Code language: JavaScript (javascript)

In case the parentElement does not have any child element, the lastChild returns null. Similar to the the firstChild property, the lastChild property returns the first element node, text node, or comment node. If you want to select only the last child element with the element node type, you use the lastElementChild property:

Code language: JavaScript (javascript)

The following code returns the list item which is the last child element of the menu:

Code language: JavaScript (javascript)

Output:

Code language: HTML, XML (xml)

Get all child elements

To get a live NodeList of child elements of a specified element, you use the childNodes property:

Code language: JavaScript (javascript)

The childNodes property returns all child elements with any node type. To get the child element with only the element node type, you use the children property:

Code language: JavaScript (javascript)

The following example selects all child elements of the element with the Id main:

Code language: JavaScript (javascript)

Output:

Summary

• The firstChild and lastChild return the first and last child of a node, which can be any node type including text node, comment node, and element node.
• The firstElementChild and lastElementChild return the first and last child Element node.
• The childNodes returns a live NodeList of all child nodes of any node type of a specified node. The children return all child Element nodes of a specified node.