When working with the DOM, it is common to need to select elements based on another element.
That is, instead of selecting elements directly by their properties, we want to navigate through the DOM hierarchy (going to parent, child, or sibling nodes).
JavaScript offers several methods that allow you to select elements related to another element. These methods can be classified into the following categories:
- DOM relationship methods
- Selection verification methods
DOM Relationship Methods
The following methods are very useful when you want to navigate the DOM tree, selecting elements related to another:
Getting Parents
| Command | Return Value | Description |
|---|---|---|
parentElement | HTMLElement or null | Selects the parent of a node. |
closest() | HTMLElement or null | Selects the closest ancestor that matches the CSS selector. |
Selects the parent element of a node.
const parent = myElement.parentElement;This method returns the parent node of the selected element. If the node has no parent, it will return null.
This method allows you to select the closest ancestor of an element that matches a CSS selector. It is useful for traversing up the DOM tree until the right element is found.
const closestAncestor = myElement.closest('.my-class');Getting Children
| Command | Return Value | Description |
|---|---|---|
children | HTMLCollection | Returns a collection of the children of a node. |
firstElementChild | HTMLElement or null | Selects the first child element of the node. |
lastElementChild | HTMLElement or null | Selects the last child element of the node. |
Returns a collection of the children of a node, that is, all elements that are directly contained within it.
const children = myElement.children;Returns an HTMLCollection of the child nodes of the element, excluding text or comment nodes. It only returns elements.
Selects the first element child of a node.
const firstChild = myElement.firstElementChild;Selects the last element child of a node.
const lastChild = myElement.lastElementChild;Getting Siblings
| Command | Return Value | Description |
|---|---|---|
nextElementSibling | HTMLElement or null | Selects the next sibling of the node. |
previousElementSibling | HTMLElement or null | Selects the previous sibling of the node. |
Returns the next sibling of the node, which is the next sibling element.
const nextSibling = myElement.nextElementSibling;If there is no next sibling, it will return null.
- Similar to the previous one, but selects the previous sibling of the node.
const previousSibling = myElement.previousElementSibling;If there is no previous sibling, it will return null.
Verification and Selection Methods
These methods allow you to verify if an element meets certain conditions or to search for a specific ancestor:
| Command | Return Value | Description |
|---|---|---|
matches() | true or false | Verifies if the element matches the specified CSS selector. |
contains() | true or false | Verifies if a node is contained within another. |
This method checks if an element matches the specified CSS selector. It is useful for quickly applying conditions.
const matches = myElement.matches('.my-class');Returns true if the element meets the CSS selector, and false otherwise.
If no matching element is found for the selector, it returns null.
This method is not a direct selection method, but it allows you to check if a node is contained within another. It is useful when you need to know if a node is a descendant of another.
const contains = container.contains(myElement);Returns true if the node is a descendant of the container, and false otherwise.