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:
html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Child Elementstitle>
head>
<body>
<ul id="menu">
<li class="first">Homeli>
<li>Productsli>
<li class="current">Customer Supportli>
<li>Careersli>
<li>Investorsli>
<li>Newsli>
<li class="last">About Usli>
ul>
body>
html>
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:
let firstChild = parentElement.firstChild;
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:
let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);
Code language: JavaScript (javascript)
Output:
#text
Code language: CSS (css)
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:
<article id="content"><h2>Headingh2><p>First paragraphp>article>
Code language: HTML, XML (xml)
Or to get the first child with the Element node only, you can use the firstElementChild
property:
let firstElementChild = parentElement.firstElementChild;
Code language: JavaScript (javascript)
The following code returns the first list item which is the first child element of the menu:
let content = document.getElementById('menu');
console.log(content.firstElementChild);
Code language: JavaScript (javascript)
Output:
<li class="first">Homeli>
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:
let lastChild = parentElement.lastChild;
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:
let lastChild = parentElement.lastElementChild;
Code language: JavaScript (javascript)
The following code returns the list item which is the last child element of the menu:
let menu = document.getElementById('menu');
console.log(main.lastElementChild);
Code language: JavaScript (javascript)
Output:
<li class="last">About Usli>
Code language: HTML, XML (xml)
To get a live NodeList
of child elements of a specified element, you use the childNodes
property:
let children = parentElement.childNodes;
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:
let children = parentElement.children;
Code language: JavaScript (javascript)
The following example selects all child elements of the element with the Id
main
:
let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);
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.
Was this tutorial helpful ?
Introduction to CSS Child Selector. CSS child Selector is defined as the CSS selector that selects only elements that are direct children which is clearer than the contextual selector.
A parent element is usually the containing element, with the elements inside being its child or children. In Yulias example above, the 'div' would be the parent and the 'img' being the child.