JavaScript Tutorial Series: Traversing elements

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.

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

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

const parent = title.parentNode;

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

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.

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

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

In order to maintain the whitespace between the opening

and
• 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:
  

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

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

  

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

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

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

  

  get all the children

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

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

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

  

  last child

  the lastChildproperty 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.
  

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

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

  

  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.
  

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

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

  

  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.
  

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

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