From 05b2650717b84d199f6ebd5df8a8f9d1e3b23f3f Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Tue, 23 Feb 2021 15:56:25 +0100 Subject: sync: move --- .../web/api/element/nextelementsibling/index.html | 174 +++++++++++++++++++ .../api/element/previouselementsibling/index.html | 185 +++++++++++++++++++++ 2 files changed, 359 insertions(+) create mode 100644 files/ru/web/api/element/nextelementsibling/index.html create mode 100644 files/ru/web/api/element/previouselementsibling/index.html (limited to 'files/ru/web/api/element') diff --git a/files/ru/web/api/element/nextelementsibling/index.html b/files/ru/web/api/element/nextelementsibling/index.html new file mode 100644 index 0000000000..1e8d05c4c2 --- /dev/null +++ b/files/ru/web/api/element/nextelementsibling/index.html @@ -0,0 +1,174 @@ +--- +title: NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/nextElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +original_slug: Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling +--- +
{{APIRef("DOM")}}
+ +

NonDocumentTypeChildNode.nextElementSibling свойство только для чтения, возвращающее последующий элемент перед текущим, или null, если элемент является последним в своём родительском узле.

+ +

Синтаксис

+ +
var nextNode = elementNodeReference.nextElementSibling;
+ +

Пример

+ +
<div id="div-01">Это div-01</div>
+<div id="div-02">Это div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Сосед div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+
+ +

Этот пример выведет в консоль следующее:

+ +
Сосед div-01:
+DIV
+SCRIPT
+ +

Полифилл для IE8

+ +

Данное свойство не пожддерживается до IE9. Используйте следующий полифилл, чтобы обойти этот недостаток:

+ +
// Источник: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if (!('nextElementSibling' in document.documentElement)) {
+    Object.defineProperty(Element.prototype, 'nextElementSibling', {
+        get: function() {
+            var e = this.nextSibling;
+            while (e && 1 !== e.nodeType) {
+                e = e.nextSibling;
+            }
+            return e;
+        }
+    });
+}
+ +

Полифилл для IE9+ и Safari

+ +
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function(arr) {
+    arr.forEach(function(item) {
+        if (item.hasOwnProperty('nextElementSibling')) {
+            return;
+        }
+        Object.defineProperty(item, 'nextElementSibling', {
+            configurable: true,
+            enumerable: true,
+            get: function() {
+                var el = this;
+                while (el = el.nextSibling) {
+                    if (el.nodeType === 1) {
+                        return el;
+                    }
+                }
+                return null;
+            },
+            set: undefined
+        });
+    });
+})([Element.prototype, CharacterData.prototype]);
+ +

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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.
+ The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.
{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Поддержка {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка ( {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Поддержка {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 также добавил это свойство в {{domxref("DocumentType")}}, но оно было удалено в Firefox 28, из-за проблем совместимости.

+ +

См. также

+ + diff --git a/files/ru/web/api/element/previouselementsibling/index.html b/files/ru/web/api/element/previouselementsibling/index.html new file mode 100644 index 0000000000..2cc659ef51 --- /dev/null +++ b/files/ru/web/api/element/previouselementsibling/index.html @@ -0,0 +1,185 @@ +--- +title: NonDocumentTypeChildNode.previousElementSibling +slug: Web/API/NonDocumentTypeChildNode/previousElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

Свойство NonDocumentTypeChildNode.previousElementSibling только для чтения возвращает  {{domxref("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]);
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, and {{domxref("NonDocumentTypeChildNode")}}. This method is now defined on the former.
+ The {{domxref("Element")}} and {{domxref("CharacterData")}} interfaces implemented the new interface.
{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

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

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Support on {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ФункционалAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Support on {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

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

+ +

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

+ + -- cgit v1.2.3-54-g00ecf