Web/API/NonDocumentTypeChildNode/previousElementSibling

The NonDocumentTypeChildNode.previousElementSibling read-only property returns the Element immediately prior to the specified one in its parent's children list, or null if the specified element is the first one in the list.

Syntax

prevNode = elementNodeReference.previousElementSibling;

Example

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script>
  let el = document.getElementById('div-03').previousElementSibling;
  document.write('<p>Siblings of div-03</p><ol>');
  while (el) {
    document.write('<li>' + el.nodeName + '</li>');
    el = el.previousElementSibling;
  }
  document.write('</ol>');
</script>

This example outputs the following into the page when it loads:

Siblings of div-03

   1. LI
   2. LI
   3. DIV
   4. DIV

Polyfills

Polyfill for Internet Explorer 8

This property is unsupported prior to IE9, so the following snippet can be used to add support to IE8:

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("previousElementSibling" in document.documentElement)){
  Object.defineProperty(Element.prototype, "previousElementSibling", {
    get: function(){
      var e = this.previousSibling;
      while(e && 1 !== e.nodeType)
        e = e.previousSibling;
      return e;
    }
  });
}

Polyfill for Internet Explorer 9+ and Safari

// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('previousElementSibling')) {
      return;
    }
    Object.defineProperty(item, 'previousElementSibling', {
      configurable: true,
      enumerable: true,
      get: function () {
        let el = this;
        while (el = el.previousSibling) {
          if (el.nodeType === 1) {
            return el;
          }
        }
        return null;
      },
      set: undefined
    });
  });
})([Element.prototype, CharacterData.prototype]);

Specifications

Specification	Status	Comment
DOMThe definition of 'NonDocumentTypeChildNode.previousElementSibling' in that specification.	Living Standard	Splitted the `ElementTraversal` interface in `ChildNode`, `ParentNode`, and `NonDocumentTypeChildNode`. This method is now defined on the former. The `Element` and `CharacterData` interfaces implemented the new interface.
Element Traversal SpecificationThe definition of 'ElementTraversal.previousElementSibling' in that specification.	Obsolete	Added its initial definition to the `ElementTraversal` pure interface and use it on `Element`.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`previousElementSibling`	Chrome Full support 4	Edge Full support 12 Notes' Full support 12 Notes' Notes' Before Edge 79, this property was only implemented for `Element`, not for `CharacterData`.	Firefox Full support 3.5	IE Partial support 9 Notes' Partial support 9 Notes' Notes' Only implemented for `Element`, not for `CharacterData`. See polyfill.	Opera Full support 10	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
Partial support: Partial support
See implementation notes.': See implementation notes.