How to get the first and last elements inside a parent with vanilla JS

Today, we’re going to look at a few different ways that you can get the first and last elements inside a parent.
We’ll be using the following markup for our examples.
<ul> <!– The gray wizard –> <li>Gandalf</li> <li>Radagast</li> <li>Hermione</li> <!– The surprise hero –> <li>Neville</li> </ul> Let’s dig in.
The Node.firstChild and Node.lastChild properties You can use the Node.firstChild and Node.lastChild properties to get the first and last child nodes of a parent element, respectively.


This content originally appeared on Go Make Things and was authored by Go Make Things

Today, we’re going to look at a few different ways that you can get the first and last elements inside a parent.

We’ll be using the following markup for our examples.

<ul>
	<!-- The gray wizard -->
	<li>Gandalf</li>
	<li>Radagast</li>
	<li>Hermione</li>
	<!-- The surprise hero -->
	<li>Neville</li>
</ul>

Let’s dig in.

The Node.firstChild and Node.lastChild properties

You can use the Node.firstChild and Node.lastChild properties to get the first and last child nodes of a parent element, respectively. This includes nodes that aren’t elements (such as comments and text fragments).

For example, looking at our example HTML above, the firstChild property called on the parent unordered list (ul) would return the comment node inside the list, not the list item.

let wizards = document.querySelector('ul');

// returns the comment node <!-- The gray wizard -->
let firstDescendant = wizards.firstChild;

// returns <li>Neville</li>
let lastDescendant = wizards.lastChild;

Here’s a demo.

The Node.firstElementChild and Node.lastElementChild properties

The Node.firstElementChild and Node.lastElementChild properties work a lot like Node.firstChild and Node.lastChild, but they get the first and last child that’s an element inside a parent element.

Looking at our example markup again, the firstElementChild property would get the list item (li) instead of the comment node.

let wizards = document.querySelector('ul');

// returns <li>Gandalf</li>
let firstDescendant = wizards.firstElementChild;

// returns <li>Neville</li>
let lastDescendant = wizards.lastElementChild;

Here’s another demo.

The Element.querySelector() and Element.querySelectorAll() methods

The document.querySelector() and document.querySelectorAll() methods aren’t limited to just running on the document. They can be run on any element to search for elements inside of it.

If you want the first child element that matches a specific selector, the Element.querySelector() method is an excellent choice. Similarly, to get the last child element that matches a selector, you can use the Element.querySelectorAll() method and then get the last item in the list.

let wizards = document.querySelector('.wizards');

// Find the first li element inside `.wizards`
// returns <li>Gandalf</li>
let firstListItem = wizards.querySelector('li');

// Get the last li element inside `.wizards`
// returns <li>Neville</li>
let allWizards = wizards.querySelectorAll('li');
let lastListItem = allWizards[allWizards.length - 1];

One caveat with this approach: it will return all matching elements inside the parent, no matter how deeply they’re nested. You can work around that by using the :scope selector with your real selector, like this.

let wizards = document.querySelector('.wizards');

// Find the first li element inside `.wizards`
// returns <li>Gandalf</li>
let firstListItem = wizards.querySelector(':scope > li');

// Get the last li element inside `.wizards`
// returns <li>Neville</li>
let allWizards = wizards.querySelectorAll(':scope > li');
let lastListItem = allWizards[allWizards.length - 1];

Here’s one last demo.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2021-05-11T14:30:00+00:00) How to get the first and last elements inside a parent with vanilla JS. Retrieved from https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/

MLA
" » How to get the first and last elements inside a parent with vanilla JS." Go Make Things | Sciencx - Tuesday May 11, 2021, https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/
HARVARD
Go Make Things | Sciencx Tuesday May 11, 2021 » How to get the first and last elements inside a parent with vanilla JS., viewed ,<https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/>
VANCOUVER
Go Make Things | Sciencx - » How to get the first and last elements inside a parent with vanilla JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/
CHICAGO
" » How to get the first and last elements inside a parent with vanilla JS." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/
IEEE
" » How to get the first and last elements inside a parent with vanilla JS." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/. [Accessed: ]
rf:citation
» How to get the first and last elements inside a parent with vanilla JS | Go Make Things | Sciencx | https://www.scien.cx/2021/05/11/how-to-get-the-first-and-last-elements-inside-a-parent-with-vanilla-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts