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]
JS Get Child Elements Home Products Customer Support Careers Investors News About Us
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]
let firstChild = parentElement.firstChild;
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]
let content = document.getElementById['menu']; let firstChild = content.firstChild.nodeName; console.log[firstChild];
Output:
Code language: CSS [css]
#text
The Console window show #text
because a text node is inserted to maintain the whitespace between the openning
and 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]
HeadingFirst paragraph
Or to get the first child with the Element node only, you can use the firstElementChild
property:
Code language: JavaScript [javascript]
let firstElementChild = parentElement.firstElementChild;
The following code returns the first list item which is the first child element of the menu:
Code language: JavaScript [javascript]
let content = document.getElementById['menu']; console.log[content.firstElementChild];
Output:
Code language: HTML, XML [xml]
Home
In this example:
- First, select the
#menu
element by using thegetElementById[]
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]
let lastChild = parentElement.lastChild;
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]
let lastChild = parentElement.lastElementChild;
The following code returns the list item which is the last child element of the menu:
Code language: JavaScript [javascript]
let menu = document.getElementById['menu']; console.log[main.lastElementChild];
Output:
Code language: HTML, XML [xml]
About Us
To get a live NodeList
of child elements of a specified element, you use the childNodes
property:
Code language: JavaScript [javascript]
let children = parentElement.childNodes;
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]
let children = parentElement.children;
The following example selects all child elements of the element with the Id
main
:
Code language: JavaScript [javascript]
let menu = document.getElementById['menu']; let children = menu.children; console.log[children];
Output:
Summary
- The
firstChild
andlastChild
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
andlastElementChild
return the first and last child Element node. - The
childNodes
returns a liveNodeList
of all child nodes of any node type of a specified node. The children return all childElement
nodes of a specified node.
Was this tutorial helpful ?