HTML Node previousSibling Property: Get the Previous Node

Table of Contents

HTML Node `previousSibling` Property: Navigating the DOM

The previousSibling property is a read-only property of the Node interface in the HTML DOM (Document Object Model). It returns the node immediately preceding the specified node in its parent’s child list, or null if the node is the first child in that list. This property is essential for traversing the DOM tree to access and manipulate adjacent nodes.

Understanding the `previousSibling` Property

The previousSibling property allows you to navigate the DOM tree horizontally, moving from one sibling node to the node that comes before it. It’s particularly useful when you need to interact with elements that are positioned next to each other in the HTML structure.

Syntax

The syntax for accessing the previousSibling property is straightforward:

let prevNode = node.previousSibling;

Here, node is any Node object in the DOM, and prevNode will be the node that precedes it. If node is the first child of its parent, prevNode will be null.

Return Value

Returns a Node representing the previous sibling of the specified node.
Returns null if the node has no previous sibling (i.e., it’s the first child of its parent).

Practical Examples

Let’s explore some practical examples that demonstrate how to use the previousSibling property in JavaScript.

Example 1: Basic Usage

In this example, we’ll get the previous sibling of a specific list item in an unordered list.

<ul id="myList">
  <li>Item 1</li>
  <li id="item2">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list_previousSibling = document.getElementById("myList");
  const item2_previousSibling = document.getElementById("item2");
  const prevSibling_previousSibling = item2_previousSibling.previousSibling;

  if (prevSibling_previousSibling) {
    console.log(
      "Previous sibling:",
      prevSibling_previousSibling.textContent
    );
  } else {
    console.log("No previous sibling found.");
  }
</script>

Output:

Previous sibling: Item 1

Example 2: Handling `null`

This example demonstrates how to handle the case where a node does not have a previous sibling (i.e., it’s the first child).

<ul id="myList2">
  <li id="firstItem">First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

<script>
  const list_previousSibling2 = document.getElementById("myList2");
  const firstItem_previousSibling2 = document.getElementById("firstItem");
  const prevSibling_previousSibling2 =
    firstItem_previousSibling2.previousSibling;

  if (prevSibling_previousSibling2) {
    console.log(
      "Previous sibling:",
      prevSibling_previousSibling2.textContent
    );
  } else {
    console.log("No previous sibling found.");
  }
</script>

Output:

No previous sibling found.

Example 3: Using `previousSibling` in a Loop

This example shows how to use previousSibling in a loop to traverse backwards through a list of nodes.

<div id="myDiv">
  <span>Span 1</span>
  <p>Paragraph 1</p>
  <span>Span 2</span>
  <p id="targetParagraph">Paragraph 2</p>
</div>

<script>
  const div_previousSibling3 = document.getElementById("myDiv");
  const target_previousSibling3 = document.getElementById("targetParagraph");
  let current_previousSibling3 = target_previousSibling3;

  while (current_previousSibling3) {
    console.log("Sibling:", current_previousSibling3.tagName);
    current_previousSibling3 = current_previousSibling3.previousSibling;
  }
</script>

Output:

Sibling: P
Sibling: SPAN
Sibling: P
Sibling: SPAN

Example 4: Ignoring Text Nodes

In HTML, whitespace between elements can be represented as text nodes in the DOM. These text nodes can sometimes interfere with DOM traversal. This example demonstrates how to skip these text nodes to get only element nodes.

<div id="myDiv4">
  <button>Button 1</button>
  <button id="targetButton">Button 2</button>
  <button>Button 3</button>
</div>

<script>
  const div_previousSibling4 = document.getElementById("myDiv4");
  const targetButton_previousSibling4 =
    document.getElementById("targetButton");
  let prevElement_previousSibling4 = targetButton_previousSibling4
    .previousSibling;

  while (prevElement_previousSibling4 &&
    prevElement_previousSibling4.nodeType !== 1) {
    prevElement_previousSibling4 = prevElement_previousSibling4
      .previousSibling;
  }

  if (prevElement_previousSibling4) {
    console.log(
      "Previous element sibling:",
      prevElement_previousSibling4.tagName
    );
  } else {
    console.log("No previous element sibling found.");
  }
</script>

Output:

Previous element sibling: BUTTON

Explanation:

nodeType === 1 checks if the node is an element node, skipping any text nodes (which have a nodeType of 3).

Example 5: Styling the Previous Sibling

This example demonstrates how to style the previous sibling of an element.

<div id="myDiv5">
  <span>Span 1</span>
  <span id="targetSpan">Span 2</span>
  <span>Span 3</span>
</div>

<script>
  const div_previousSibling5 = document.getElementById("myDiv5");
  const targetSpan_previousSibling5 = document.getElementById("targetSpan");
  let prevSibling_previousSibling5 = targetSpan_previousSibling5
    .previousSibling;

  while (prevSibling_previousSibling5 &&
    prevSibling_previousSibling5.nodeType !== 1) {
    prevSibling_previousSibling5 = prevSibling_previousSibling5
      .previousSibling;
  }

  if (prevSibling_previousSibling5) {
    prevSibling_previousSibling5.style.color = "red";
  }
</script>

In this example, the text color of “Span 1” will be changed to red.

Tips and Notes

Whitespace: Be aware that whitespace between elements in HTML can create text nodes in the DOM. These text nodes can be returned by previousSibling. Use nodeType to filter out non-element nodes if needed.
Read-Only: The previousSibling property is read-only. You cannot set it to change the DOM structure directly.
Cross-Browser Compatibility: The previousSibling property is widely supported across modern browsers, but always test in older browsers to ensure compatibility.
Alternatives: For more complex DOM traversal, consider using methods like querySelector or libraries like jQuery.

Conclusion

The previousSibling property is a fundamental tool for navigating the DOM in JavaScript. By understanding how to use this property, you can effectively traverse the DOM tree and manipulate elements based on their position relative to other elements. Whether you’re building dynamic web applications or simply need to modify existing HTML structures, previousSibling is an essential part of your JavaScript toolkit.