When working with the DOM, it’s 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 (go to parent, child, or sibling nodes).
JavaScript offers several methods that allow selecting 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 returns null.
This method allows selecting the closest ancestor of an element that matches a CSS selector. It’s useful for traversing up the DOM tree until finding the appropriate element.
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, i.e., all elements directly contained within it.
const children = myElement.children;
Returns an HTMLCollection of the element’s child nodes, excluding text or comment nodes. It only returns elements.
Selects the first child element of a node.
const firstChild = myElement.firstElementChild;
Selects the last child element 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 element sibling.
const nextSibling = myElement.nextElementSibling;
If there is no next sibling, it returns 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 returns null.
Verification and Selection Methods
These methods allow you to verify if an element meets certain conditions or find 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 verifies if an element matches the specified CSS selector. It’s useful for quickly applying conditions.
const matches = myElement.matches('.my-class');
Returns true if the element matches the CSS selector, and false otherwise.
If it doesn’t find an element matching the selector, it returns null.
This method is not a direct way of selection, but it allows verifying if a node is contained within another. It’s 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.
