From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/element/closest/index.html | 124 ++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/ru/web/api/element/closest/index.html (limited to 'files/ru/web/api/element/closest/index.html') diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html new file mode 100644 index 0000000000..5ca79dbcc0 --- /dev/null +++ b/files/ru/web/api/element/closest/index.html @@ -0,0 +1,124 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +
{{APIRef("DOM")}}
+ +

Метод Element.closest() возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.

+ +

Синтаксис

+ +
var elt = element.closest(selectors);
+
+ + + +

Исключения

+ +
+
SYNTAX_ERR
+
Указаный css-селектор не является допустимым ("/=21=1", "&@*#", "%'54523" и т.п. приведут к ошибке).
+
+ +

Пример

+ +
<div id="block" title="Я - блок">
+    <a href="#">Я ссылка в никуда</a>
+    <a href="http://site.ru">Я ссылка на сайт</a>
+    <div>
+       <div id="too"></div>
+    </div>
+</div>
+
+ +

Думаю, стоит рассмотреть несколько примеров:

+ +
var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск
+
+div.closest("#block"); //Результат - самый первый блок древа выше
+div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div"
+div.closest("a"); //null - В предках #too нет ни одного тега "a"!
+div.closest("div[title]") //#block - так как ближе нет блоков с атрибутом title.
+
+
+ +

Полифилл #1 (рекурсивный метод)

+ +

Для браузеров не поддерживающих Element.closest(), но позволяющих использовать element.matches() (или префиксный эквивалент) есть полифилл:

+ +
(function(ELEMENT) {
+    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
+    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
+        if (!this) return null;
+        if (this.matches(selector)) return this;
+        if (!this.parentElement) {return null}
+        else return this.parentElement.closest(selector)
+      };
+}(Element.prototype));
+ +

Полифилл #2 (через цикл)

+ +

Тем не менее, если вам требуется поддержка IE 8, вы можете использовать следующий полифилл. Имейте ввиду - этот способ позволяет использовать CSS селекторы только уровня 2.1 и может жутко тормозить.

+ +
(function(e){
+ e.closest = e.closest || function(css){
+   var node = this;
+ 
+   while (node) {
+      if (node.matches(css)) return node;
+      else node = node.parentElement;
+   }
+   return null;
+ }
+})(Element.prototype);
+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

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

+ +
{{Compat("api.Element.closest")}}
+ +
+

Заметки совместимости

+ + + +

См. также

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