JavaScript Tutorial Series: Traversing elements
Published: 2023-03-03 19:46:00

Accessing and modifying elements located within the Document Object Model (DOM) tree is referred to as traversing elements in JavaScript. Each element of the document is represented as a node in the tree.
In this post we're going to learn how to get the parent, children and siblings of an element using specific attributes.

## parent node
Using the `parentNode` property, allows you to determine the parent node of a specific node in the DOM tree. 
a `node.parentNode` returns either null (if it doesn't exist) or the parent node of the specified node which is read-only.

```HTML
<div id="container">
  <h1 class="title">Hello World</h1>
</div>
```

```JavaScript
const title = document.querySelector('h1');

const parent = title.parentNode;

console.log(parent);
console.log(parent.id);
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prs5zlr0ydpbpxajd4f9.png)

## children elements
### first child
Using the `firstChild` property, will allow you to retrieve the first child element of a given element.
The `firstChild` returns `null` if the parentElement has no children. A child node of any type, like an element node, a text node, or a comment node, is returned by the `firstChild` property.

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li>milk</li>
  <li>bread</li>
</ol>
```

```JavaScript
let content = document.getElementById('ordered-list');
console.log(content.firstChild.nodeName);
```

![first child property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuqxvns8g0gjqj5v6lz1.png)

In order to maintain the whitespace between the opening <ul> and <li> tags, a text node was inserted, which is why the Console shows #text. 

You can eliminate the whitespaces as follows in order to remove the #text node:

```HTML
<ol id="ordered-list"><li>eggs</li><li>milk</li><li>bread</li></ol>
```

```JavaScript
let content = document.getElementById('ordered-list');

console.log(content.firstChild.nodeName);
```

![firstchild no whitespace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvxwzt343p892sayewdj.png)

The `firstElementChild` property allows you to get the first child using the Element node alone:

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li>milk</li>
  <li>bread</li>
 </ol>
```

```JavaSCript
let content = document.getElementById('ordered-list');
console.log(content.firstElementChild);
```

![firstElementChild property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2jta6tyxely9j9098sc.png)

### get all the children
You can use the `children` property to get a NodeList of a specified element's child elements:

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li>milk</li>
  <li>bread</li>
</ol>
```

```JavaScript
let content = document.getElementById('ordered-list');
console.log(content.children);
```

![children property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/996h5qhp2lf4n3audm3a.png)

### last child
the `lastChild`property returns the node's last child. The child is typically an element node, a text node, or a comment node if its parent is an element. If there isn't any child nodes, it returns null.

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li>milk</li>
  <li>bread</li>
</ol>
```

```JavaScript
let content = document.getElementById('ordered-list');
console.log(content.lastElementChild);
```

![lastchild property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/444p0vzmt05sh47ztcb9.png)

## siblings
### Next sibling
You can use the `nextElementSibling` attribute to find an element's next sibling.
If the referenced element is the first in the list, the `nextElementSibling` property returns null.

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li id="current">milk</li>
  <li>Lettuce</li>
  <li>bread</li>
</ol>
```

```JavaScript
let current = document.getElementById('current');
console.log(current.nextElementSibling);
```

![next sibling property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9m49hid8c1v15gdudt2.png)

### previous sibling
The `previousElementSibling` attribute is used to retrieve an element's previous siblings.
If the current element is the first in the list, the `previousElementSibling` property returns null.

```HTML
<ol id="ordered-list">
  <li>eggs</li>
  <li id="current">milk</li>
  <li>Lettuce</li>
  <li>bread</li>
</ol>
```

```JavaScript
let current = document.getElementById('current');
console.log(current.previousElementSibling);
```


![previous sibling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgd0i1hom434ndahdhv7.png)