We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

NonDocumentTypeChildNode.previousElementSibling

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Свойство NonDocumentTypeChildNode.previousElementSibling только для чтения возвращает  Element элемент стоящий перед применяемым, из списка дочерних элементов родителя или возвращает null, если таковых не имеется.

Синтаксис

prevNode = elementNodeReference.previousElementSibling; 

Примеры

<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>
  var 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>

Этот пример выводит следующие элементы на страницу при загрузке:

Соседи div-03

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

Полифилл для Internet Explorer 8

Это свойство поддерживается начиная с версии IE9, поэтому следующий фрагмент поддерживается, и может использоваться для IE8:

// Ресурс: 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;
        }
    });
}

Полифилл для  Internet Explorer 9+ и Safari

// Ресурс: 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 () {
        var el = this;
        while (el = el.previousSibling) {
          if (el.nodeType === 1) {
            return el;
          }
        }
        return null;
      },
      set: undefined
    });
  });
})([Element.prototype, CharacterData.prototype]);

Спецификация

Спецификация Статус Комментарии
DOM
Определение 'NonDocumentTypeChildNode.previousElementSibling' в этой спецификации.
Живой стандарт 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 Specification
Определение 'ElementTraversal.previousElementSibling' в этой спецификации.
Устаревшая Added its initial definition to the ElementTraversal pure interface and use it on Element.

Поддержка браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Функционал Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (on Element) 4 3.5 (1.9.1) 9 9.8 4
Support on CharacterData 29.0 25 (25) [1] Нет 16.0 Нет
Функционал Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (on Element) (Да) 1.0 (1.9.1) (Да) 9.8 (Да)
Support on CharacterData (Да) 25.0 (25) Нет 16.0 Нет

[1] Firefox 25 так же добавлено это свойство DocumentType, но было удалено в Firefox 28 из-за проблем с совместимостью.

Смотрите так же

Метки документа и участники

Внесли вклад в эту страницу: Sparks
Обновлялась последний раз: Sparks,