From 841aae260382e2bf5ebb44d765d8c7301d27caab Mon Sep 17 00:00:00 2001
From: Alexey Istomin Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов: Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешённых элементов: Пример взят из демо компонента word-count-web-component, так-же доступно live demo. Вы можете найти метод attachShadow() примерно в середине кода. Метод создает корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента. Пример взят из демо компонента word-count-web-component, так-же доступно live demo. Вы можете найти метод attachShadow() примерно в середине кода. Метод создаёт корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента. {{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещен фокус, в то время как Firefox и Chrome обычно устанавливают его к {{NoteStart}}Значение {{domxref("Document.activeElement")}} меняется в зависимости от браузера во время выполнения этого события ({{bug(452307)}}): IE10 устанавливает его к элементу на который будет перемещён фокус, в то время как Firefox и Chrome обычно устанавливают его к Расположение вертикального scrollbar для письма справа налево примененного для элемента будет назначаются следующим свойством Расположение вертикального scrollbar для письма справа налево применённого для элемента будет назначаются следующим свойством Когда установлены стили элемента Когда установлены стили элемента Думаю, стоит рассмотреть несколько примеров: Возвращаемый Для кроссбраузерности надежно использовать только Для кроссбраузерности надёжно использовать только Свойства у Свойства у Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы. Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернёт элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы. Syntax Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом {{ domxref("HTMLCollection") }} путем передачи Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом {{ domxref("HTMLCollection") }} путём передачи [1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответствовать спецификации. [1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменён, чтобы соответствовать спецификации. [2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответствовать спецификации. [2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменён, чтобы соответствовать спецификации. Примечание: В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен Примечание: В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имён. В более поздних версиях, HTML элементы находятся в пространстве имён Свойство интерфейса {{domxref("Element")}} Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}. Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого. Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введён текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого. Событие Элементы которые можно добавить в теневой DOM
-
NotSupportedError
- Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещенному элементу. (см. выше)
+ Вы пытаетесь прикрепить shadow DOM к HTML элементу с некорректным именем, или к запрещённому элементу. (см. выше)
Примеры
-//Create a class for the element
class WordCount extends HTMLParagraphElement {
diff --git a/files/ru/web/api/element/blur_event/index.html b/files/ru/web/api/element/blur_event/index.html
index acebebdabb..f5357eb7ae 100644
--- a/files/ru/web/api/element/blur_event/index.html
+++ b/files/ru/web/api/element/blur_event/index.html
@@ -26,7 +26,7 @@ original_slug: Web/Events/blur
body документа{{NoteEnd}}body документа{{NoteEnd}}Свойства
diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html
index c96fc8427a..1e83b5f78b 100644
--- a/files/ru/web/api/element/classlist/index.html
+++ b/files/ru/web/api/element/classlist/index.html
@@ -41,7 +41,7 @@ translation_of: Web/API/Element/classList
Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.
- Проверяет, есть ли данный класс у элемента (вернет true или false)Notes
-clientLeft был впервые введен MS IE DHTML object model.clientLeft был впервые введён MS IE DHTML object model.layout.scrollbar.side preferencelayout.scrollbar.side preferencedisplay: inline, то clientLeft вернет 0 несмотря на границы элемента.display: inline, то clientLeft вернёт 0 несмотря на границы элемента.Примечание
-clientTop был впервые введен в MS IE DHTML object model.clientTop был впервые введён в MS IE DHTML object model.Спецификации
diff --git a/files/ru/web/api/element/closest/index.html b/files/ru/web/api/element/closest/index.html
index 84d47ca794..0d8837d8a0 100644
--- a/files/ru/web/api/element/closest/index.html
+++ b/files/ru/web/api/element/closest/index.html
@@ -43,7 +43,7 @@ translation_of: Web/API/Element/closest
var div = document.querySelector("#too"); //Это элемент от которого мы начнем поиск
+var div = document.querySelector("#too"); //Это элемент от которого мы начнём поиск
div.closest("#block"); //Результат - самый первый блок древа выше
div.closest("div"); //Сам блок #too и будет результатом, так как он подходит под селектор "div"
diff --git a/files/ru/web/api/element/error_event/index.html b/files/ru/web/api/element/error_event/index.html
index 716ebfef1d..44804d730b 100644
--- a/files/ru/web/api/element/error_event/index.html
+++ b/files/ru/web/api/element/error_event/index.html
@@ -23,7 +23,7 @@ original_slug: Web/Events/error
DOMRect объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали DOMRectReadOnly. У IE и Edge, не имея возможности добавить пропущенные свойства к возвращаемым ими ClientRect, объект не позволял добавить x и y.left, top, right, и bottom.left, top, right, и bottom.DOMRect не являются собственными. in оператор и for...in найдут возвращенные значение, но другие APIs, Object.keys(), — нет. А еще Object.assign() и spread оператор не копируют их.DOMRect не являются собственными. in оператор и for...in найдут возвращённые значение, но другие APIs, Object.keys(), — нет. А ещё Object.assign() и spread оператор не копируют их.rect = elt.getBoundingClientRect()
// emptyObj всегда {}
diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html
index 08cacea20e..2b4e7674d9 100644
--- a/files/ru/web/api/element/getelementsbyclassname/index.html
+++ b/files/ru/web/api/element/getelementsbyclassname/index.html
@@ -12,7 +12,7 @@ translation_of: Web/API/Element/getElementsByClassName
Element.getElementsByClassName() метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.document.getElementById('main').getElementsByClassName('test');
-HTMLCollection в метод как значение this. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:HTMLCollection в метод как значение this. Так мы найдём все {{HTMLElement("div")}} элементы, которые имеют класс test:var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html
index 6dd764a608..5085a050d1 100644
--- a/files/ru/web/api/element/getelementsbytagname/index.html
+++ b/files/ru/web/api/element/getelementsbytagname/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/Element/getElementsByTagName
@@ -129,6 +129,6 @@ for (var i = 0; i < cells.length; i++) {
elements это живая коллекция {{domxref("HTMLCollection")}} найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного элемента, удовлетворяющего условиям поиска, то коллекция будет пустой.element это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включен в результат поиска. element это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включён в результат поиска. tagName определяет имя тега для поиска. Если значением tagName будет "*", то в результате будут получены все потомки элемента по которому осуществляется поиск. Для совместимости с XHTML следует использовать нижний регистр в имени тега.
-
diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html
index 966cf39fe2..690ad551ff 100644
--- a/files/ru/web/api/element/index.html
+++ b/files/ru/web/api/element/index.html
@@ -54,7 +54,7 @@ translation_of: Web/API/Element
Переменная result хранит возвращенное значение true или false.Переменная result хранит возвращённое значение true или false.attName это {{Glossary("String")}} представляющая имя атрибута.http://www.w3.org/1999/xhtml как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}http://www.w3.org/1999/xhtml как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}
{{experimental_inline}} {{experimental_inline}}
innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.(&), (<), или (>), innerHTML вернет эти символы как &, < и > соответственно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. (&), (<), или (>), innerHTML вернёт эти символы как &, < и > соответственно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. Соображения безопасности
@@ -160,8 +160,8 @@ boxElem.addEventListener("mouseleave", logEvent);
Смотрите также
-
diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html
index 81a8079b0c..2b269e1291 100644
--- a/files/ru/web/api/element/insertadjacenttext/index.html
+++ b/files/ru/web/api/element/insertadjacenttext/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/Element/insertAdjacentText
innerDOM - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определенное как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.innerDOM - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.elementВозвращаемое значение
diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html
index 682e4930cd..48bd4bae46 100644
--- a/files/ru/web/api/element/mouseenter_event/index.html
+++ b/files/ru/web/api/element/mouseenter_event/index.html
@@ -34,7 +34,7 @@ translation_of: Web/API/Element/mouseenter_event

mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырем элементам иерархии, когда указатель достигает текста.
+Одно событие mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста.

mouseover отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня.mouseleave срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.mouseleave и {{event('mouseout')}} схожи, но отличаются тем, что mouseleave не всплывает, а mouseout всплывает.
- Это значит, что mouseleave срабатывает, когда курсор выходит за границы элемента и всех его дочерних элементов, в то время как mouseout срабатывает, когда курсор покидает границы элемента или одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).mouseleave срабатывает, когда курсор выходит за границы элемента и всех его дочерних элементов, в то время как mouseout срабатывает, когда курсор покидает границы элемента или одного из его дочерних элементов (даже если курсор все ещё находится в пределах элемента).
В версиях Firefox до 21-й: когда контент элемента не создает вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).
В версиях Firefox до 21-й: когда контент элемента не создаёт вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).
scrollTop может быть любым целым числом, с определенными оговорками:
scrollTop может быть любым целым числом, с определёнными оговорками:
scrollTop устанавливается в 0.При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.
+При вызове на элементе внутри HTML документа, setAttribute переведёт имя атрибута в нижний регистр.
Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.
-Несмотря на то, что метод getAttribute() возвращает null у удаленных атрибутов, вы должны использовать removeAttribute() вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой "null", которая, вероятно, не то, что вы хотите.
Несмотря на то, что метод getAttribute() возвращает null у удалённых атрибутов, вы должны использовать removeAttribute() вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой "null", которая, вероятно, не то, что вы хотите.
Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).
+Использование setAttribute() для изменения определённых атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).
Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: elt.setAttribute('autoplay', '')
В нашем примере простого шаблона (смотри в прямом эфире), мы создаем тривиальный пример пользовательского элемента с именем <my-paragraph>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем my-text.
В нашем примере простого шаблона (смотри в прямом эфире), мы создаём тривиальный пример пользовательского элемента с именем <my-paragraph>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем my-text.
Когда в документе используется <my-paragraph>, слот заполняется слот-элементом, включая его в элемент с атрибутом slot со значением my-text. Вот один из таких примеров: