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/accesskey/index.html | 73 +++++ files/ru/web/api/element/animate/index.html | 117 ++++++++ files/ru/web/api/element/attachshadow/index.html | 151 ++++++++++ files/ru/web/api/element/attributes/index.html | 157 ++++++++++ files/ru/web/api/element/classlist/index.html | 237 +++++++++++++++ files/ru/web/api/element/classname/index.html | 108 +++++++ files/ru/web/api/element/clientheight/index.html | 114 ++++++++ files/ru/web/api/element/clientleft/index.html | 68 +++++ files/ru/web/api/element/clienttop/index.html | 70 +++++ files/ru/web/api/element/clientwidth/index.html | 59 ++++ files/ru/web/api/element/closest/index.html | 124 ++++++++ .../ru/web/api/element/createshadowroot/index.html | 91 ++++++ files/ru/web/api/element/currentstyle/index.html | 52 ++++ files/ru/web/api/element/getattribute/index.html | 49 ++++ .../api/element/getboundingclientrect/index.html | 102 +++++++ .../api/element/getelementsbyclassname/index.html | 117 ++++++++ .../api/element/getelementsbytagname/index.html | 134 +++++++++ files/ru/web/api/element/hasattribute/index.html | 114 ++++++++ files/ru/web/api/element/hasattributes/index.html | 122 ++++++++ files/ru/web/api/element/id/index.html | 121 ++++++++ files/ru/web/api/element/index.html | 297 +++++++++++++++++++ files/ru/web/api/element/innerhtml/index.html | 167 +++++++++++ .../api/element/insertadjacentelement/index.html | 129 +++++++++ .../web/api/element/insertadjacenthtml/index.html | 88 ++++++ .../web/api/element/insertadjacenttext/index.html | 118 ++++++++ files/ru/web/api/element/keydown_event/index.html | 91 ++++++ files/ru/web/api/element/keyup_event/index.html | 87 ++++++ files/ru/web/api/element/matches/index.html | 157 ++++++++++ .../ru/web/api/element/mousedown_event/index.html | 147 ++++++++++ .../ru/web/api/element/mouseenter_event/index.html | 148 ++++++++++ .../ru/web/api/element/mouseleave_event/index.html | 319 +++++++++++++++++++++ files/ru/web/api/element/mouseup_event/index.html | 72 +++++ files/ru/web/api/element/outerhtml/index.html | 148 ++++++++++ files/ru/web/api/element/queryselector/index.html | 136 +++++++++ .../ru/web/api/element/queryselectorall/index.html | 69 +++++ .../ru/web/api/element/removeattribute/index.html | 36 +++ .../web/api/element/requestpointerlock/index.html | 90 ++++++ files/ru/web/api/element/scrollheight/index.html | 178 ++++++++++++ files/ru/web/api/element/scrollintoview/index.html | 112 ++++++++ files/ru/web/api/element/scrollleft/index.html | 79 +++++ files/ru/web/api/element/scrollto/index.html | 72 +++++ files/ru/web/api/element/scrolltop/index.html | 73 +++++ files/ru/web/api/element/setattribute/index.html | 54 ++++ files/ru/web/api/element/slot/index.html | 67 +++++ files/ru/web/api/element/tagname/index.html | 47 +++ 45 files changed, 5161 insertions(+) create mode 100644 files/ru/web/api/element/accesskey/index.html create mode 100644 files/ru/web/api/element/animate/index.html create mode 100644 files/ru/web/api/element/attachshadow/index.html create mode 100644 files/ru/web/api/element/attributes/index.html create mode 100644 files/ru/web/api/element/classlist/index.html create mode 100644 files/ru/web/api/element/classname/index.html create mode 100644 files/ru/web/api/element/clientheight/index.html create mode 100644 files/ru/web/api/element/clientleft/index.html create mode 100644 files/ru/web/api/element/clienttop/index.html create mode 100644 files/ru/web/api/element/clientwidth/index.html create mode 100644 files/ru/web/api/element/closest/index.html create mode 100644 files/ru/web/api/element/createshadowroot/index.html create mode 100644 files/ru/web/api/element/currentstyle/index.html create mode 100644 files/ru/web/api/element/getattribute/index.html create mode 100644 files/ru/web/api/element/getboundingclientrect/index.html create mode 100644 files/ru/web/api/element/getelementsbyclassname/index.html create mode 100644 files/ru/web/api/element/getelementsbytagname/index.html create mode 100644 files/ru/web/api/element/hasattribute/index.html create mode 100644 files/ru/web/api/element/hasattributes/index.html create mode 100644 files/ru/web/api/element/id/index.html create mode 100644 files/ru/web/api/element/index.html create mode 100644 files/ru/web/api/element/innerhtml/index.html create mode 100644 files/ru/web/api/element/insertadjacentelement/index.html create mode 100644 files/ru/web/api/element/insertadjacenthtml/index.html create mode 100644 files/ru/web/api/element/insertadjacenttext/index.html create mode 100644 files/ru/web/api/element/keydown_event/index.html create mode 100644 files/ru/web/api/element/keyup_event/index.html create mode 100644 files/ru/web/api/element/matches/index.html create mode 100644 files/ru/web/api/element/mousedown_event/index.html create mode 100644 files/ru/web/api/element/mouseenter_event/index.html create mode 100644 files/ru/web/api/element/mouseleave_event/index.html create mode 100644 files/ru/web/api/element/mouseup_event/index.html create mode 100644 files/ru/web/api/element/outerhtml/index.html create mode 100644 files/ru/web/api/element/queryselector/index.html create mode 100644 files/ru/web/api/element/queryselectorall/index.html create mode 100644 files/ru/web/api/element/removeattribute/index.html create mode 100644 files/ru/web/api/element/requestpointerlock/index.html create mode 100644 files/ru/web/api/element/scrollheight/index.html create mode 100644 files/ru/web/api/element/scrollintoview/index.html create mode 100644 files/ru/web/api/element/scrollleft/index.html create mode 100644 files/ru/web/api/element/scrollto/index.html create mode 100644 files/ru/web/api/element/scrolltop/index.html create mode 100644 files/ru/web/api/element/setattribute/index.html create mode 100644 files/ru/web/api/element/slot/index.html create mode 100644 files/ru/web/api/element/tagname/index.html (limited to 'files/ru/web/api/element') diff --git a/files/ru/web/api/element/accesskey/index.html b/files/ru/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..8ba1a39596 --- /dev/null +++ b/files/ru/web/api/element/accesskey/index.html @@ -0,0 +1,73 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

Описание

+ +

Свойство accessKey позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.

+ +
+

По сути, accessKey задает значение для одноименного атрибута...

+
+ +
+

Данное свойство использовать не рекоммендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.

+
+ +

 

+ +

Синтаксис

+ +
var key = elem.accessKey;
+elem.accessKey = key;
+
+ +

 

+ +

Пример

+ +
var elem = document.getElementById("id");
+elem.accessKey = "w";
+
+ +

Немного информации

+ +

Фокусировка на элемент произойдет при нажатии следующих клавиш (,где acesskey - значение свойства acessKey).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

      Браузер

+ 		+

      Сочетание

+
Firefox[Alt] [Shift] + accesskey
Internet Explorer[Alt] + accesskey
Chrome[Alt] + accesskey
Safari[Alt] + accesskey
Opera[Shift] [Esc] + accesskey
diff --git a/files/ru/web/api/element/animate/index.html b/files/ru/web/api/element/animate/index.html new file mode 100644 index 0000000000..04f7a3bad6 --- /dev/null +++ b/files/ru/web/api/element/animate/index.html @@ -0,0 +1,117 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animation + - Element + - Experimental + - Method + - Reference + - web animation +translation_of: Web/API/Element/animate +--- +
{{APIRef('Web Animations')}} {{SeeCompatTable}}
+ +

Метод animate() интерфейса {{domxref("Element")}} это быстрый способ создания {{domxref("Animation")}}, которая сразу применяется к элементу, а затем проигрывает эту анимацию. Метод возвращает созданный экземпляр класса {{domxref("Animation")}}.

+ +
+

Элементы  могут иметь несколько, прикреплённых к ним, анимаций. Вы можете получить список анимаций, которые влияют на элемент, вызвав {{domxref("Element.getAnimations()")}}.

+
+ +

Синтаксис

+ +
var animation = element.animate(keyframes, options); 
+ +

Параметры

+ +
+
keyframes
+
+

Массив объектов ключевых кадров, либо объект ключевого кадра, свойства которого являются массивами значений для итерации. Смотрите Keyframe Formats для получения подробной информации.

+
+
options
+
Целое число, представляющее продолжительность анимации (в миллисекундах), или объект, содержащий одно или более временных свойств.
+
+
+
id {{optional_inline}}
+
Свойство уникальное для animate(): DOMString, с помощью которого можно ссылаться на анимацию.
+
+ {{Page("ru/docs/Web/API/EffectTiming", "Свойства")}}
+
+ +

Будущие возможности

+ +

Следующие возможности в настоящее нигде не поддерживаются, но будут добавлены в ближайшем будущем .

+ +
+
composite {{optional_inline}}
+
Определяет, как значения объединяются между этой анимацией и другими отдельными анимациями, которые не задают свою собственную конкретную составную операцию. По умолчанию replace. +
    +
  • add диктует аддитивный эффект, где каждая последующая итерация строится на последней. Пример с transform, translateX(-200px) не будут переопределять ранний вариант со значением rotate(20deg), поэтому результат будет translateX(-200px) rotate(20deg).
    • +
  • accumulate схоже, но немного умнее: blur(2) и blur(5) станет blur(7), а не blur(2) blur(5).
    • +
  • replace переписывает предыдущие значения на новые.
    • +
+
+
iterationComposite {{optional_inline}}
+
Определяет как значения строятся от итерации к итерации в этой анимации. Может быть установлено как accumulate или replace (смотрите выше). По умолчанию replace.
+
spacing {{optional_inline}}
+
Определяет как ключевые кадры, без временных смещений, должны распределяться по всей длительности анимации. По умолчанию distribute. +
    +
  • distribute позиционирует ключевые кадры так, чтобы разница между последующими смещениями ключевых кадров была равна, то есть без каких-либо смещений, ключевые кадры будут равномерно распеределены по всему времени проигрыша анимации.
    • +
  • paced позиционирует ключевые кадры так, чтобы расстояние между последующими значениями заданного темпового свойства было равным, то есть, чем больше разница в значениях свойств ключевых кадров, тем на большем расстоянии они расположены друг от друга.
    • +
+ +

 

+
+
+ +

Возвращаемое значение

+ +

Возвращает {{domxref("Animation")}}.

+ +

Пример

+ +

В демо Down the Rabbit Hole (with the Web Animation API), мы используем удобный метод animate(), чтобы сразу создать и проиграть анимацию на элементе #tunnel, чтобы заставить его крутиться в падении, бесконечно. Обратите внимание на массив объектов, в котором переданы ключевые кадры, а также блок временных параметров.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+})
+
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Первоначальное определение
+ +

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

+ + + +

{{Compat("api.Element.animate")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/attachshadow/index.html b/files/ru/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..39d19a42ef --- /dev/null +++ b/files/ru/web/api/element/attachshadow/index.html @@ -0,0 +1,151 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}

+ +

Метод Element.attachShadow() добавляет теневое DOM дерево к указанному элементу и возвращает ссылку на его ShadowRoot( корневой элемент созданного дерева).

+ +

Элементы которые можно добавить в тенейвой DOM

+ +

Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например {{htmlelement("a")}}), и некоторые другие. Вот список разрешенных элементов:

+ + + +

Синтаксис

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Параметры

+ +
+
shadowRootInit
+
ShadowRootInit содержит следующие поля: +

mode: Строка указывающая на режим инкапсуляции для shadowDOM:

+ +
    +
  • open.  Указывает на открытие режима инкапсуляции.
    + Это означает что элементы shadowRoot доступны для внешнего мира element.shadowRoot
    + + 
    element.shadowRoot === shadowroot; // returns true
    +
    • +
  • closed. Указывает на закрытие режима инкапсуляции.
    + Этот режим запрещает доступ к узлам node(s) и закрыват теневой корень для внешнего мира
    + + 
    element.shadowRoot === shadowroot; // returns false
+element.shadowRoot === null; // returns true
+
    +
    • +
+
+
+ +

Возвращает

+ +

Вернёт a {{domxref("ShadowRoot")}} или null.

+ +

Исключения

+ + + + + + + + + + + + + + + + +
ИсключениеОписание
InvalidStateErrorЭлемент уже является хостом теневого DOM
NotSupportedErrorВы пытаетесь прикрепить shadow DOM к HTML элементу с некоректным именем, или к запрещенному элементу. (см. выше)
+ +

Примеры

+ +

Пример взят из демо компонента word-count-web-component, так-же доступно live demo. Вы можете найти метод attachShadow()  примерно в середине кода. Метод создает корневой элемент теневого DOM  к которому потом добавляется содержимое шаблона элемента.

+ +
//Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+
+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}} 
+ +

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

+ +

{{Compat("api.Element.attachShadow")}}

+ +
 
diff --git a/files/ru/web/api/element/attributes/index.html b/files/ru/web/api/element/attributes/index.html new file mode 100644 index 0000000000..24564c8e24 --- /dev/null +++ b/files/ru/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

Свойство Element.attributes возвращает группу атрибутов всех узлов, зарегистрированных в указанном узле. Это {{domxref("NamedNodeMap")}}, тоесть полученные данные не являются массивом Array, не содержат {{jsxref("Array")}} методы и {{domxref("Attr")}} индекс узлов может отличаться в различных браузерах. Если сказать более точно, атрибуты (attributes) это строка, пара ключ/значение которая представляет собой информацию относительно этого атрибута.

+ +

Синтаксис

+ +
var attr = element.attributes;
+
+ +

Пример

+ +

Базовые примеры

+ +
// Получить первый элемент <p> содержащийся в документе
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Перечисление атрибутов элементов

+ +

Числовое индексирование полезно для прохождения всех атрибутов элемента.
+ Следующий пример проходит через узлы атрибутов для элемента в документе с идентификатором «p1» и печатает значение каждого атрибута. 

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Во-первых,  давайте убедимся, что в абзаце есть какие-то атрибуты
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Before Firefox 22, this attribute was implemented in the {{domxref("Node")}} interface (inherited by {{domxref("Element")}}). It has been moved to this interface to conform to the specification and the usage of other browsers.

+ +

[2] Internet Explorer 5.5 returns a map containing the values rather than the attribute objects.

+ +

See also

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

Описание

+ +

Свойство classList возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.

+ +
+

У classList есть примитивная альтернатива - свойство className, которое содержит значение атрибута class элемента.

+
+ +

 

+ +

Синтаксис

+ +
var elementClasses = elem.classList;
+
+ + + +

 

+ +

Методы

+ +

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

+ +
+
     add( String [,String] )    
+
   Добавляет элементу указанные классы
+
     remove( String [,String] )
+
    Удаляет у элемента указанные классы
+
item ( Number )
+     Результат аналогичен вызову сlassList[Number]
+
toggle ( String [, Boolean])
+     Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.
+
    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.
+
contains ( String )
+     Проверяет, есть ли данный класс у элемента (вернет true или false)
+
+ +
+

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

+
+ +
+
 
+
+ +

Примеры

+ +
<div id="clock" class="example for you"> </div>
+
+ +
var elem = document.querySelector("#clock")
+
+//Выведем классы
+console.log(elem.classList); //DOMTokenList ["example", "for", "you"]
+
+//Добавим классы
+elem.classList.add("ok", "understand");
+console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]
+
+//Переключим классы
+elem.classList.toggle("you");
+elem.classList.toggle("he");
+console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]
+
+//Проверим класс
+console.log(elem.classList.contains("example")); //true
+console.log(elem.classList.contains("lol")); //false
+
+//И удалим классы
+elem.classList.remove("example", "for", "understand", "he");
+console.log(elem.classList); //DOMTokenList ["ok"]
+ +

 

+ +
+

В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=814014 

+
+ +

Полифилл

+ +
// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // helpers
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i < list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // class list object with basic methods
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += ' '+ name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() support for others
+    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

 

+ +

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

+ +

 

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support8.0{{ CompatGeckoDesktop("1.9.2") }}1011.505.1
+ {{Webkitbug("20709")}}
toggle method's second argument24{{CompatGeckoDesktop("24")}}not supported15yes
+ {{Webkitbug("99375")}} +

 

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0{{CompatGeckoMobile("1.9.2")}}1011.105.0
toggle method's second argument?{{CompatGeckoMobile("24")}}???
+
+ +

 

+ +

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

+ + + +

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

+ + diff --git a/files/ru/web/api/element/classname/index.html b/files/ru/web/api/element/classname/index.html new file mode 100644 index 0000000000..2492c08bb0 --- /dev/null +++ b/files/ru/web/api/element/classname/index.html @@ -0,0 +1,108 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Описание

+ +

Свойство className отвечает за значение атрибута class элемента.

+ +
+

Кстати, у className есть большой брат. Его зовут {{domxref("element.classList")}} - более мощный и функциональный метод для работы с классами элемента.

+
+ +

Синтаксис

+ +
var cName = elem.className;
+elem.className = cName;
+ + + +

Пример

+ +
<div class="booble example"> </div>
+
+ +
var elm = document.querySelector("div");
+
+alert(elm.className); //"booble example"
+
+elm.className = "class1 class2 class3";
+alert(elm.className); //"class1 class2 class3"
+
+ +
+
Заметка:
+ +

  Свойство получило необычное название className из-за того, что во многих языках, работающих с DOM, слово class является зарезервированным.

+
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

 

+ +

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

+ + + +

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

+ + diff --git a/files/ru/web/api/element/clientheight/index.html b/files/ru/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..5e7f55f8ff --- /dev/null +++ b/files/ru/web/api/element/clientheight/index.html @@ -0,0 +1,114 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ APIRef("DOM") }}

+ +

Element.clientHeight - свойство, доступное только для чтения. Для элементов без CSS-стилей, или элементов каркаса строчной разметки - значение равно нулю. Для остальных элементов - значение равно внутренней высоте элемента в пикселах, включая пространство между содержимым элемента и его границей (padding), но исключая высоту полосы горизонтальной прокрутки, и ширину отступа от границы элемента до родительского элемента (margin).

+ +

Значение clientHeight может быть вычислено по формуле CSS height + CSS padding - высота горизонтального скролла (если присутствует).

+ +
+

Внимание: При вычислении значения свойства, результат округляется до ближайшего целого. Если требуется дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Синтакс

+ +
var h = element.clientHeight;
+ +

h - целочисленное значение высоты элемента в пикселях.

+ +

Пример

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}{{Spec2('CSSOM View')}} 
+ +

К сведению

+ +

Свойство clientHeight впервые было представлено в объектной модели Internet Explorer.

+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

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

+ + diff --git a/files/ru/web/api/element/clientleft/index.html b/files/ru/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..28ac7b7def --- /dev/null +++ b/files/ru/web/api/element/clientleft/index.html @@ -0,0 +1,68 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +--- +
{{ APIRef("DOM") }}
+ +
Ширина от левого края элемента в пискелях. При наличии overflow заключает в себя ширину от ветикального scrollbar для письма справа налево.
+ +

clientLeft не включает в себя ни левый padding ни margin с той же стороны. clientLeft только для чтения.

+ +

Gecko-based applications support clientLeft starting with Gecko 1.9 (Firefox 3, implemented in {{ Bug(111207) }}). This property is not supported in Firefox 2 and earlier.

+ +

Когда layout.scrollbar.side значение установлено от 1 до 3 и направление текста справа налево, то вертикальный scrollbar будет спозиционирован слева и как следствие будет вычислен сlientLeft.

+ +
+

Внимание: Это свойство округлит значение к целому числу. Если нужно дробное значение используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var left = element.clientLeft;
+
+ +

Example

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-element-clientleft', 'clientLeft')}}{{Spec2("CSSOM View")}} 
+ +

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

+ + + +

{{Compat("api.Element.clientLeft")}}

+ +

Notes

+ +

clientLeft был впервые введен MS IE DHTML object model.

+ +

Расположени вертикального scrollbar для письма справа налево применненного для элемента будет назначатся вледующим свойством layout.scrollbar.side preference

+ +

Когда установлены стили элемента display: inline, то clientLeft вернет 0 несмотря на границы элемента.

diff --git a/files/ru/web/api/element/clienttop/index.html b/files/ru/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..e3c1521657 --- /dev/null +++ b/files/ru/web/api/element/clienttop/index.html @@ -0,0 +1,70 @@ +--- +title: Element.clientTop +slug: Web/API/Element/clientTop +translation_of: Web/API/Element/clientTop +--- +
{{ APIRef("DOM") }}
+ +

Толщина верхней границы элемента в пикселях. Не включает в себя margin и padding. Свойство только для чтения.

+ +

Всё, что лежит между двумя местами (offsetTop и верх клиентской области) является границей элемента, потому что offsetTop показывает местоположение верха border элемента (не margin), в то время как верх клиентской области начинается сразу под border (клиентская область включает padding). Поэтому значение clientTop всегда будет равно значению .getComputedStyle() для "border-top-width". Например, если значение "border-top-width" равно нулю, то и clientTop тоже равно нулю.

+ +
+

Примечание: Это свойство округляет значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Основанные на Gecko приложения поддерживают clientTop начиная с Gecko 1.9 (Firefox 3, реализованно в  {{ Bug(111207) }}). Это свойство не поддерживается в  Firefox 2 и более ранних.

+ +

Синтаксис

+ +
vartop = element.clientTop;
+
+ +

Пример

+ +

В следующей иллюстрации клиентская область показана белым (части под названиями "Top", "Right" и т. д. не имеют никакого отношения к клиентской области). Значение clientTop - расстояние между окончением области margin (жёлтый) или padding и началом области контента (белый)

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right margin-top margin-bottom border-top border-bottomBottom
+ +

Примечание

+ +

clientTop был впервые введен в MS IE DHTML object model.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-clienttop', 'clientTop')}}{{Spec2("CSSOM View")}}
+ +

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

+ +

{{Compat("api.Element.clientTop")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/clientwidth/index.html b/files/ru/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..927ef1e1cb --- /dev/null +++ b/files/ru/web/api/element/clientwidth/index.html @@ -0,0 +1,59 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +
{{APIRef("DOM")}}
+ +

Свойство Element.clientWidth равно 0 для инлайн элементов и элементов без CSS; для всех остальных равняется ширине элемента в пикселях, включая padding, но исключая ширину рамки (border), внешние отступы (margin), и вертикальную полосу прокрутки (если она есть).

+ +
+

Note: Это свойство округляет реальное значение до целого. Если вам нужно дробное значение, используйте {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Синтаксис

+ +
var intElemClientWidth = element.clientWidth;
+ +

intElemClientWidth - целое число, соответствующее значению clientWidth элемента element в пикселях. Свойство clientWidth только для чтения.

+ +

Пример

+ +

Image:Dimensions-client.png

+ +

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

+ + + + + + + + + + + + + + + + +
СпецфикацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+ +

Примечание

+ +

clientWidth был впервые предствлен в объектной модели MS IE DHTML.

+ +

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

+ + + +

{{Compat("api.Element.clientWidth")}}

+ +

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

+ + 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")}}
+ +
+

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

+ + + +

См. также

+ + +
diff --git a/files/ru/web/api/element/createshadowroot/index.html b/files/ru/web/api/element/createshadowroot/index.html new file mode 100644 index 0000000000..26c80f8497 --- /dev/null +++ b/files/ru/web/api/element/createshadowroot/index.html @@ -0,0 +1,91 @@ +--- +title: Element.createShadowRoot() +slug: Web/API/Element/createShadowRoot +translation_of: Web/API/Element/createShadowRoot +--- +

{{draft}}

+ +

{{deprecated_header()}}

+ +

Используйте Element.createShadowRoot чтобы создать  экземпляр shadow DOM. После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) {{glossary("shadow root")}}.

+ +
+

This method has been deprecated in favor of attachShadow.

+
+ +

Синтаксис

+ +
var shadowroot = element.createShadowRoot();
+
+ +

Параметры

+ +

Отсутствуют

+ +

Значение результата

+ +

Возвращает {{domxref("ShadowRoot")}}.

+ +

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

+ +

Эта функция больше не определяется никакими спецификациями

+ +

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

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(35.0)}}{{CompatNo}}{{CompatNo}}22{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+

В Chrome 45, возможность иметь несколько теневых корней устарела.

+
diff --git a/files/ru/web/api/element/currentstyle/index.html b/files/ru/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..3df9fd524a --- /dev/null +++ b/files/ru/web/api/element/currentstyle/index.html @@ -0,0 +1,52 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - NeedsExample + - Non-standard + - Property +translation_of: Web/API/Element/currentStyle +--- +

{{Non-standard_header}}

+ +

Element.currentStyle является собственностью, похожей на стандартизированную {{DOMxRef("window.getComputedStyle()")}} method. Он доступен в старых версиях Microsoft Internet Explorer. Однако, он возвращает единицы, установленные в CSS в то время как window.getComputedStyle()возвращает значения в пикселях.

+ +

Polyfill

+ +
+

Эта polyfill возвращает значения в пикселях и, скорее всего, будет довольно медленным, так как оно должно называться {{domxref("window.getComputedStyle()")}} каждый раз, когда читается его значение.

+
+ +
/* Любое авторское право посвящено Общественному достоянию.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+if (!("currentStyle" in Element.prototype)) {
+  Object.defineProperty(Element.prototype, "currentStyle", {
+    get: function() {
+      return window.getComputedStyle(this);
+    }
+  });
+}
+
+ +

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

+ +

Не входит ни в какие спецификации.

+ +

Microsoft had a description on MSDN.

+ +

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

+ + + +

{{Compat("api.Element.currentStyle")}}

+ +

См. также

+ + + +
{{APIRef("DOM")}}
diff --git a/files/ru/web/api/element/getattribute/index.html b/files/ru/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..a60d2fcdcd --- /dev/null +++ b/files/ru/web/api/element/getattribute/index.html @@ -0,0 +1,49 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Method + - метод +translation_of: Web/API/Element/getAttribute +--- +

{{ ApiRef("DOM") }}

+ +

Описание

+ +

getAttribute() возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка); подробнее {{ Anch("Notes") }}.

+ +

Синтаксис

+ +
var attribute = element.getAttribute(attributeName);
+
+ +

где

+ + + +

Пример

+ +
var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+alert(align); // отобразит значение атрибута align элемента с id="div1"
+
+ +

Примечания

+ +

Когда метод getAttribute вызывается применительно к HTML-элементу, в DOM HTML-документа, значение аргумента приводится к нижнему регистру.

+ +

В действительности все браузеры (Firefox, Internet Explorer, последние версии Opera, Safari, Konqueror, iCab и т.д.) возвращают null, когда выбранный элемент не содержит атрибута с переданным именем. Спецификация DOM определяет, что корректное возвращаемое значение в данном случае - пустая строка и некоторые реализации DOM придерживаются такого поведения. Реализация getAttribute в XUL (Gecko) в настоящее время следует спецификации и возвращает пустую строку. Следовательно, имеет смысл использовать hasAttribute, чтобы проверять наличие атрибутов перед вызовом getAttribute(), если может быть такое, что выбранный элемент не будет содержать искомого атрибута.

+ +

{{ DOMAttributeMethods() }}

+ +

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

+ + diff --git a/files/ru/web/api/element/getboundingclientrect/index.html b/files/ru/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..2a53575049 --- /dev/null +++ b/files/ru/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,102 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - DOM + - JavaScript + - getBoundingClientRect + - Позиция + - Прямоугольник + - Самый маленький + - Справка + - Элемент + - метод +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Метод Element.getBoundingClientRect() возвращает размер элемента и его позицию относительно viewport (часть страницы, показанная на экране, и которую мы видим).

+ +

Синтаксис

+ +
domRect = element.getBoundingClientRect();
+ +

Возвращаемое значение

+ +

Данный метод возвращает объект {{domxref("DOMRect")}}, который является объединением прямоугольников, возвращаемых методом {{domxref("Element.getClientRects", "getClientRects()")}}  для данного элемента, т. е. CSS border-boxes (css-коробок в рамках), связанных с этим элементом. Результатом является самый маленький прямоугольник, в котором содержится весь элемент с read-only left, top, right, bottom, x, y, width и height свойствами, описывающие это в пикселях. Все свойства, кроме width и height, являются относительными к верхнему левому углу viewport-а.

+ +

Explanation of DOMRect values

+ +

Пустые border-box полностью игнорируются. Если border-box элемента пуст, прямоугольник возвращается с нулевыми width и height, а top и left берутся у следующего CSS элемента (в порядке контента).

+ +

После каждого скролла значения left, top, right и bottom изменяются, так как эти значения относительны к viewport и не абсолютные.

+ +

Если вам нужны значения, описывающие прямоугольник относительно к верхнему левому углу документа, просто добавьте к свойствам top и left текущую позицию прокрутки, используя {{domxref("window.scrollX")}} и {{domxref("window.scrollY")}}), чтобы получить прямоугольник, положение которого не зависит от текущей позиции прокрутки.

+ +

Про кроссбраузерность

+ +

Скрипты, требующих высокую кроссбраузерность, могут использовать {{domxref("window.pageXOffset")}} и {{domxref("window.pageYOffset")}} вместо window.scrollX and window.scrollY. Скрипты без доступа к этим свойствам могут использовать код, наподобие этого:

+ +
// Для scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Для scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+ +

Пример

+ +
// rect - DOMRect объект с 8-ми свойствами: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Примечания

+ +

Возвращаемый DOMRect объект может быть модифицирован в современных браузерах. Это не так со старыми версиями, которые возвращали DOMRectReadOnly. У IE и Edge, не имея возможности добавить пропущенные свойства к возращаемым ими ClientRect, объект не позволял добавить x и y.

+ +

Для кроссбраузерности надежно использовать только left, top, right, и bottom.

+ +

Свойства у DOMRect не являются собственными. in оператор и for...in найдут возвращенные значение, но другие APIs, Object.keys(), — нет. А еще Object.assign() и spread оператор не копируют их.

+ +
rect = elt.getBoundingClientRect()
+// emptyObj всегда {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+ +

DOMRect свойства top, left, right и bottom вычисляются, используя значения других свойств объекта.

+ +

Браузерная совместимость

+ +
+

{{Compat("api.Element.getBoundingClientRect")}}

+
+ +

См. также

+ + diff --git a/files/ru/web/api/element/getelementsbyclassname/index.html b/files/ru/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..08cacea20e --- /dev/null +++ b/files/ru/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,117 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Класс + - Коллекция + - Элемент +translation_of: Web/API/Element/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Element.getElementsByClassName() метод возвращает объект {{domxref("HTMLCollection")}}, содержащий в себе все дочерние элементы, которые имеют заданные имена классов. Если вызван на объекте document, будут возвращены все элементы, содержащиеся в документе.

+ +

Так же, как метод {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} действует на весь документ; это вернет элементы, которые являются потомками корневого элемента, содержащие в себе указанные классы.

+ +

Syntax

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Examples

+ +

Получить все элементы с классом test:

+ +
element.getElementsByClassName('test');
+ +

Получить все элементы с классами test и red:

+ +
element.getElementsByClassName('red test');
+ +

Получить все элементы с классом test, которые находятся в элементе с id main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Мы так же можем использовать все методы из {{jsxref("Array.prototype")}} на любом  {{ domxref("HTMLCollection") }} путем передачи HTMLCollection в метод как значение this. Так мы найдем все {{HTMLElement("div")}} элементы, которые имеют класс test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});
+ +

Specifications

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

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Prior to Firefox 19, this method was returning a {{domxref("NodeList")}}; it was then changed to reflects the change in the spec.

+ +

[2] Safari on iOS 8 and OS X 10.10 returns a {{domxref("NodeList")}}.

diff --git a/files/ru/web/api/element/getelementsbytagname/index.html b/files/ru/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..dc9dc4fbc7 --- /dev/null +++ b/files/ru/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,134 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +translation_of: Web/API/Element/getElementsByTagName +--- +

{{ APIRef("DOM") }}

+ +

Element.getElementsByTagName() метод возвращает живую коллекцию элементов {{domxref("HTMLCollection")}} , учитывая имя тэга. Поиск осуществляется в поддереве указанного элемента, в результат поиска не попадает сам элемент, в поддереве которого осуществлялся поиск. Возвращает живой список, который автоматически обновляется при изменении DOM. Поэтому не нужно вызывать метод Element.getElementsByTagName() несколько раз с одними и теми же аргументами, содержимое списка обновляется автоматически.

+ +

При вызове на HTML-элементе в HTML-документе метод  getElementsByTagName переводит аргумент по которому осуществляется поиск (имя тега) в нижний регистр до того как начать поиск. Это нежелательно, когда необходимо использовать метод для поиска SVG элементов, где в наименовании тега может использоваться верблюжья (camel-cased) нотация. В этом случае правильно использовать метод {{ domxref("Element.getElementsByTagNameNS()") }}.

+ +

Element.getElementsByTagName похож на {{domxref("Document.getElementsByTagName()")}}, за исключением того, что поиск осуществляется среди потомков конкретного элемента, а не во всём HTML-документе. 

+ +

Синтаксис

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Пример

+ +
// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // grab the data
+    }
+}
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Changed the return value from {{domxref("NodeList")}} to {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Initial definition
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 [2]{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} [1]5.5{{ CompatVersionUnknown() }} [2]{{ CompatVersionUnknown() }} [2]
getElementsByTagName("*")1.0{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}6.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] До Firefox 19 этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.

+ +

[2] Первоначально этот метод возвращал {{domxref("NodeList")}}; и был затем изменен, чтобы соответстовать спецификации.

diff --git a/files/ru/web/api/element/hasattribute/index.html b/files/ru/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..12983eff93 --- /dev/null +++ b/files/ru/web/api/element/hasattribute/index.html @@ -0,0 +1,114 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - ОМД + - Элемент + - метод +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Element.hasAttribute() метод возвращает {{Glossary("Boolean")}} значение указывающее, имеет ли указанный элемент указанный атрибут или нет.

+ +

Синтаксис

+ +
var result = element.hasAttribute(attName);
+
+ + + +

Пример

+ +
// проверка, существует ли атрибут, перед тем как задать значение
+var d = document.getElementById("div1");
+
+if (d.hasAttribute("align")) {
+  d.setAttribute("align", "center");
+}
+ +

Замечания

+ +
{{DOMAttributeMethods}}
+ +
 
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}С {{SpecName('DOM3 Core')}}, перемещено с {{domxref("Node")}} к {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Нет изменений с {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-NodeHasAttrs', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Исходное определение.
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/ru/web/api/element/hasattributes/index.html b/files/ru/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..1ab3c40fd8 --- /dev/null +++ b/files/ru/web/api/element/hasattributes/index.html @@ -0,0 +1,122 @@ +--- +title: Element.hasAttributes() +slug: Web/API/Element/hasAttributes +translation_of: Web/API/Element/hasAttributes +--- +
{{ApiRef("DOM")}}
+ +

Метод Element.hasAttributes() возвращает Boolean значение, указывая содержит данный элемент какие-либо атрибуты или нет.

+ +

Синтаксис

+ +
var result = element.hasAttributes();
+ +
+
result
+
содержит возвращаемое значение true или false.
+
+ +

Пример

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // do something with 'foo.attributes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length > 0);
+    }
+})(Element.prototype);
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}}Moved from the {{domxref("Node")}} interface to the more specialized {{domxref("Element")}} interface.
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}}Initial definition, on the {{domxref("Node")}} interface.
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Before Firefox 35, it was implemented on the {{domxref("Node")}} interface.

+ +

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

+ + diff --git a/files/ru/web/api/element/id/index.html b/files/ru/web/api/element/id/index.html new file mode 100644 index 0000000000..62fd77b730 --- /dev/null +++ b/files/ru/web/api/element/id/index.html @@ -0,0 +1,121 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - Property + - Reference +translation_of: Web/API/Element/id +--- +
{{ ApiRef("DOM") }}
+ +
Свойство id представляет идентификатор элемента, отражая глобальный аттрибут id.
+ +
+ +

Если значение id не пустое, то оно должно быть уникально в документе.

+ +

id часто используется с {{domxref("document.getElementById", "getElementById")}}, чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.

+ +
+

Замечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и id'шниках).

+
+ +

Синтаксис

+ +
var idStr = element.id; // Получаем id.
+
+ +
element.id = idStr; // Применяем id
+
+ +

idStr - идентификатор элемента

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Нет изменений от {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Нет отличий от {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Изначальное определение.
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

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

+ + diff --git a/files/ru/web/api/element/index.html b/files/ru/web/api/element/index.html new file mode 100644 index 0000000000..3f95a90be6 --- /dev/null +++ b/files/ru/web/api/element/index.html @@ -0,0 +1,297 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Reference +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

Интерфейс Element представляет собой один из объектов в {{domxref("Document")}}. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от Element, и добавляют дополнительную функциональность.

+ +

Например, интерфейс {{domxref("HTMLElement")}} является базовым интерфейсом для HTML-элементов, в то время как интерфейс {{domxref("SVGElement")}} является основой для всех SVG-элементов.

+ +

Языки, находящиеся вне области веб-платформы, также используют его. Например, XUL — через интерфейс XULElement.

+ +

{{InheritanceDiagram}}

+ +

Свойства

+ +

Наследует свойства от родительского узла {{domxref("Node")}} и от собственного родителя {{domxref("EventTarget")}} и реализует свойства {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.assignedSlot")}} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{domxref("HTMLSlotElement")}} интерфейс, связанный с элементом.
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Возвращает {{ domxref("NamedNodeMap") }}, в котором перечислены все атрибуты связанные с элементом.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Возвращает {{ domxref("DOMTokenList") }} содержащий список атрибутов класса.
+
{{ domxref("ParentNode.childElementCount") }}
+
Это {{jsxref("Number")}} представляющее число дочерних узлов, представленных в элементе.
+
{{ domxref("ParentNode.children") }}
+
Is a live {{ domxref("HTMLCollection") }}, содержащая все дочерние элементы, в виде коллекции.
+
{{ domxref("Element.className") }}
+
Это {{domxref("DOMString")}}, представляющая класс элемента.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее внутреннюю высоту элемента.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, предсталяющее ширину левой границы элемента.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее ширину верхней границы элемента.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее внутреннюю ширину элемента.
+
{{ domxref("ParentNode.firstElementChild") }}
+
Возвращает {{ domxref("Element") }}, первый дочерний элемент элемента или null, если у элемента нет дочерних элементов.
+
{{ domxref("Element.id") }}
+
Возвращает {{domxref("DOMString")}}, представляющий идентификатор (Id) элемента.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
Является {{domxref("DOMString")}}, представляющей разметку контента элемента.
+
{{domxref("Element.namespaceURI")}} {{readonlyInline}}
+
Пространство имён URI элемента или null, если это не пространство имен.
+
+
+

Примечание: В Firefox версии 3.5 и ранее, HTML элементы не находятся в пространстве имен. В более поздних версиях, HTML элементы находятся в пространстве имен  http://www.w3.org/1999/xhtml  как в деревьях HTML, так и XML. {{ gecko_minversion_inline("1.9.2") }}

+
+
+
+ +
+
{{ domxref("ParentNode.lastElementChild") }}
+
Является {{ domxref("Element") }}, последним непосредственным дочерним элементом данного элемента, или null, если у элемента нет дочерних элементов.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
Является {{ domxref("Element") }}, элементом, непосредственно следующим за данным в древе, или null, если соседний элемент отсутствует.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Является {{domxref("DOMString")}}, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
Является {{ domxref("Element") }}, элементом, непосредственно предшествующим в древе данному, или null, если соседний элемент отсутствует.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее высоту прокрутки элемента.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен влево.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Является {{jsxref("Number")}}, представляющим количество пикселей, на которые контент элемента прокручен от верха.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Вовзращает {{jsxref("Number")}}, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Возвращает {{jsxref("Number")}}, представляющее ширину прокрутки элемента.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Возвращает {{domxref("String")}} с именем тега указанного элемента.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Представляет собой {{jsxref("Boolean")}}, указывающим, является элемент undo scope host, или нет.
+
+ +
+

Примечание: В DOM3 namespaceURI, localName и prefix определялись в интерфейсе {{domxref("Node")}}. В DOM4 они были перенесены в Element.

+ +

Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.

+
+ +

Обработчики событий

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
Возвращает обработчик событий для событий типа {{event("gotpointercapture")}}.
+
{{ domxref("Element.onlostpointercapture") }}
+
Возвращает обработчик событий для событий типа {{event("lostpointercapture")}}.
+
+ +

Устаревшие обработчики событий

+ +
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Возвращает код обработчика для события wheel.
+ Сейчас реализован в {{domxref("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Методы

+ +

Наследует методы от своих родителей {{domxref("Node")}}, и своего собственного родителя {{domxref("EventTarget")}}, и реализует методы {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, и {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Регистрирует обработчик событий для опрделенного типа событий в элементе.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Возращает {{domxref("Element")}}, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбраных селекторами, указанными в параметре.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Отправляет событие для этого узла в DOM и возвращает {{jsxref("Boolean")}}, который указывает, что по крайней мере один обработчик не отменил его.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Извлекает значение именованного атрибута из текущего узла и возвращает его в виде{{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Извлекает значение атрибута с указанным именем и пространством имен из текущего узла и возвращает его как {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Извлекает представление узла атрибута с указанным именем и пространством имен из текущего узла и возвращает его в виде {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Возвращает коллекцию {{ domxref ("HTMLCollection")}}, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.
+
{{ domxref("Element.hasAttribute()") }}
+
Вовзращает {{jsxref("Boolean")}}, указывающее, имеет элемент определенный атрибут, или нет.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Возвращает {{jsxref("Boolean")}}, указывающий, имеет элемент определенный атрибут в определенном пространстве имен, или нет.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Возвращает {{jsxref ("Boolean")}}, указывающий, будет ли элемент выбран указанной строкой селектора.
+
{{ domxref("Element.querySelector()") }}
+
Возвращает первый {{DOMxRef ("Node")}}, который соответствует указанной строке селектора элемента.
+
{{ domxref("Element.querySelectorAll") }}
+
Возвращает список {{DOMxRef ("NodeList")}} узлов, которые соответствуют указанной строке селектора элемента.
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
Позволяет понять, имеет ли элемент с указанным ID  захват указателя для указателя
+
{{domxref("ChildNode.remove()")}}
+
Удаляет элемент из списка дочерних элементов родительского элемента.
+
{{ domxref("Element.removeAttribute()") }}
+
Удаляет именованный атрибут из текущего узла.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Удаляет атрибут с указанным именем и пространством имен, из текущего узла.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Удаляет представление узла именованного атрибута из текущего узла.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Удаляет прослушиватель событий из элемента.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Позволяет асинхронно запрашивать блокировку указателя для данного элемента.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Прокручивает страницу до тех пор, пока элемент не попадет в представление.
+
{{ domxref("Element.setAttribute()") }}
+
Устанавливает значение именованного атрибута из текущей узла.
+
{{ domxref("Element.setAttributeNS()") }}
+
Устанавливает значение атрибута с опрделенным именем и пространством имен из текущей узла.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Задает представление узла именованного атрибута из текущего узла.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Установите представление узла атрибута с указанным именем и пространством имен из текущего узла.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.
+
{{domxref("Element.setPointerCapture()")}}
+
Определяет указанный элемент как цель захвата будущих событий указателя.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Добавлен метод getAnimationPlayers().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Добавлены свойства undoScope и undoManager.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Добавлены следующие обработчики событий: ongotpointercapture и onlostpointercapture.
+ Добавлены следующие методы: setPointerCapture() и releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Добавлены следующие методы: matches() (реализовано как mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Добавлены следующиен методы: querySelector() и querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Добавлен метод requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Добавлен метод requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Добавлены следующие свойства: innerHTML, и outerHTML.
+ Добавлен следующий метод: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Добавлены следующие свойства: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, и clientHeight.
+ Добавлены следующие методы: getClientRects(), getBoundingClientRect(), и scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Добавлено наследование интерфейса {{domxref("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Удалены следующие методы: closest(), setIdAttribute(), setIdAttributeNS(), и setIdAttributeNode().
+ Удалено свойство schemaTypeInfo.
+ Измененно возращаемое значение getElementsByTag() и getElementsByTagNS().
+ Moved hasAttributes() form the Node interface to this one.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Мнтод normalize() был перемещён в {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Начальное определение.
+ +

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

+ +
{{Compat("api.Element")}}
+ +
diff --git a/files/ru/web/api/element/innerhtml/index.html b/files/ru/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..60af461354 --- /dev/null +++ b/files/ru/web/api/element/innerhtml/index.html @@ -0,0 +1,167 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Свойство интерфейса {{domxref("Element")}} innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

+ +
Примечание: Если узлы {{HTMLElement("div")}}, {{HTMLElement("span")}}, или {{HTMLElement("noembed")}} имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>), innerHTML вернет эти символы как &amp, &lt и &gt соответсвенно. Используйте {{domxref("Node.textContent")}} для получения правильной копии содержимого этих текстовых узлов. 
+ +

 Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Синтаксис

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Value

+ +

Строка {{domxref("DOMString")}}, которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

+ +

Исключения

+ +
+
SyntaxError
+
Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.
+
NoModificationAllowedError
+
Возникает при попытке вставить HTML в узел, у которого родителем является {{domxref("Document")}}.
+
+ +

Примечания

+ +

Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

+ +
document.body.innerHTML = "";  // Заменяет содержимое тела пустой строкой.
+ +

Свойство innerHTML многих типов элементов, включая {{HTMLElement("body")}} или {{HTMLElement("html")}}, могут быть возвращены или перемещены. Это может так же быть использовано для просмотра кода страницы, которая была изменена динамически:

+ +
// Скопируйте и вставьте в адресную строку в виде одной строки.
+javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"&lt;") + "</pre>";
+
+ +

Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введен текст в поле ввода <input>, IE меняет значение атрибута <input> свойства innerHTML, но браузеры Gecko не делают этого.

+ +

Соображения безопасности

+ +

Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.

+ +
const name = "John";
+// предполагая, что 'el' является HTML DOM элементом.
+el.innerHTML = name; // безвредный в этом случае
+
+// ...
+
+name = "<script>alert('Я Джон в раздражающем alert!')</script>";
+el.innerHTML = name; // безвредный в этом случае
+ +

Хотя это может выглядеть как атака {{interwiki("wikipedia", "cross-site scripting")}}, результат безопасный. HTML5 указывает на тег {{HTMLElement("script")}} вставленный через InnerHTM должен не выполнится.

+ +

Однако, есть способы запустить JavaScript без использования элементов {{HTMLElement("script")}}, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // показывает alert
+ +

По этой причине,  рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте {{domxref("node.textContent")}}. Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст. 

+ +

Примеры

+ +

Этот пример использует innerHTML для создания механизма логгирования сообщений внутри элемента на странице.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Регистрация событий мыши внутри этого контейнера...");
+ +

Функция log() создаёт сообщение получая текущее время из объекта {{jsxref("Date")}}, используя {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, и соединяя стороку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом "log".

+ +

Мы добавляем второй метод, который логгирует информацию о событиях на основе {{domxref("MouseEvent")}} (например, {{event("mousedown")}}, {{event("click")}}, и {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Затем мы используем этот обработчик событий на элементе, который содержит наше логгирование, для каждого события мыши:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

HTML довольно простой для нашего примера.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

{{HTMLElement("div")}} c классом "box" – просто контейнер для, который даст содержимому пространство вокруг себя. <div> с классом "log" является контейнером для логгирования текста внутри себя.

+ +

CSS

+ +

Для нашего примера используем следующие CSS стили.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Результат

+ +

В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Первоначальное определение
+ +

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

+ + diff --git a/files/ru/web/api/element/insertadjacentelement/index.html b/files/ru/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..a6f23f2aa1 --- /dev/null +++ b/files/ru/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,129 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Gecko + - Method + - Reference + - insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

+ +

Синтаксис

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): +
    +
  • 'beforebegin': до самого element (до открывающего тега).
    • +
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
    • +
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
    • +
  • 'afterend': после element (после закрывающего тега).
    • +
+
+
element
+
Элемент, добавляемый в DOM-дерево.
+
+ +

Возвращаемое значение

+ +

Метод возвращает добавляемый элемент, либо null, если добавление элемента завершилось ошибкой.

+ +

Исключения

+ + + + + + + + + + + + + + + + + + +
ИсключениеПояснение
SyntaxErrorПереданное значение position не соответствует ни одному из допустимых.
TypeErrorПередаваемый element не является валидным.
+ +

Наглядное отображение параметра position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Примечаение: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.
+ +

Примеры

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Посмотрите наше демо insertAdjacentElement.html на Github (так же посмотрите исходный код). В этом демо мы имеем последовательность {{htmlelement("div")}} элементов внутри контейнера. При выборе одного из них можно нажать кнопку Insert before или Insert after и добавить новые div до или после выбранного  элемента используя метод insertAdjacentElement().

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

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

+ +

{{Compat("api.Element.insertAdjacentElement")}}

+ +
+ +

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

+ + diff --git a/files/ru/web/api/element/insertadjacenthtml/index.html b/files/ru/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..e2750b8f47 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,88 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{ApiRef("DOM")}}
+ +

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Синтаксис

+ +
targetElement.insertAdjacentHTML(position, text);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру): +
    +
  • 'beforebegin': до самого element (до открывающего тега).
    • +
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
    • +
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
    • +
  • 'afterend': после element (после закрывающего тега).
    • +
+
+
text
+
Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.
+
+ +

Наглядное отображение параметра position

+ +
+
+
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+
+
+ +
Примечание:  позиции beforebegin и afterend работают только если узел имеет родительский элемент.
+ +

Пример

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Примечания

+ +

Соображения безопасности

+ +

Будьте осторожны при использовании вставки HTML на страницу с помощью insertAdjacentHTML(), не используете пользовательский ввод, который не был экранирован.

+ +

Не рекомендуется использовать insertAdjacentHTML(), когда требуется ввести простой текст. Используйте для этого свойство {{domxref("Node.textContent")}} или метод {{domxref("Element.insertAdjacentText()")}}. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

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

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

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

+ +

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.

diff --git a/files/ru/web/api/element/insertadjacenttext/index.html b/files/ru/web/api/element/insertadjacenttext/index.html new file mode 100644 index 0000000000..fa75df2851 --- /dev/null +++ b/files/ru/web/api/element/insertadjacenttext/index.html @@ -0,0 +1,118 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +translation_of: Web/API/Element/insertAdjacentText +--- +

{{APIRef("DOM")}}

+ +

The insertAdjacentText() метод помещает заданный текстовый узел в указанную позицию относительно элемента, который передан в вызове метода.

+ +

Синтаксис

+ +
element.insertAdjacentText(position, element);
+ +

Параметры

+ +
+
position
+
{{domxref("DOMString")}} позиция для вставки текста относительно элемента  element; должна быть указана в следующем виде: +
    +
  • 'beforebegin': Перед самим element.
    • +
  • 'afterbegin': Внутри самого element, перед первым child.
    • +
  • 'beforeend': Внутри самого element, после последнего child.
    • +
  • 'afterend': После самого element.
    • +
+
+
element
+
{{domxref("DOMString")}} текст, который будет помещен в заданную позицию.
+
+ +

Возвращаемое значение

+ +

Void.

+ +

Исключения

+ + + + + + + + + + + + + + +
ExceptionExplanation
SyntaxErrorУказанная position не может быть распознана.
+ +

Наглядное отображение параметра position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Примечание: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.
+ +

Пример

+ +
beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});
+ +

Посмотрите пример insertAdjacentText.html на GitHub (исходный код source code.)  Вы можете ввести любой текст в поле формы, а затем нажать кнопки Insert before (вставить до) и Insert after (вставить после) для размещения этого текста до или после существующего абзаца, используя insertAdjacentText(). Обратите внимание, что существующий текстовой узел не изменился, а произошло добавление новых текстовых узлов.

+ +

Полифилл

+ +

Можно создать polyfill для insertAdjacentText() method который будет работать в Internet Explorer 5.5 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:

+ +
if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convert to string
+        .replace(/&/g, '&amp;') // embed ampersand symbols
+        .replace(/</g, '&lt;') // embed greater than symbols
+    )
+  }
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
+ +

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

+ +

{{Compat("api.Element.insertAdjacentText")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/keydown_event/index.html b/files/ru/web/api/element/keydown_event/index.html new file mode 100644 index 0000000000..99dffec68a --- /dev/null +++ b/files/ru/web/api/element/keydown_event/index.html @@ -0,0 +1,91 @@ +--- +title: keydown +slug: Web/API/Element/keydown_event +translation_of: Web/API/Element/keydown_event +--- +
{{APIRef}}
+ +

Событие keydown срабатывает, когда клавиша была нажата.

+ +

В отличии от события {{Event("keypress")}}, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.

+ + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("KeyboardEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}}
+ +

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

+ +

События клавиатуры генерируются только в <inputs>, <textarea> и любых элементах с аттрибутом contentEditable или tabindex="-1".

+ +

Примеры

+ +

Примеры addEventListener keydown

+ +

Этот пример отображает значение KeyboardEvent.code всякий раз, когда вы нажимаете клавишу внутри <input> элемента.

+ +
<input placeholder="Кликните здесь, затем нажмите клавишу." size="40">
+<p id="log"></p>
+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keydown', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keydown_example")}}

+ +

Аналог onkeydown

+ +
input.onkeydown = logKey;
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName("UI Events", "#event-type-keydown")}}{{Spec2("UI Events")}}
+ +

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

+ +

{{Compat("api.Element.keydown_event")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/keyup_event/index.html b/files/ru/web/api/element/keyup_event/index.html new file mode 100644 index 0000000000..981fcbc7d5 --- /dev/null +++ b/files/ru/web/api/element/keyup_event/index.html @@ -0,0 +1,87 @@ +--- +title: keyup +slug: Web/API/Element/keyup_event +translation_of: Web/API/Element/keyup_event +--- +
{{APIRef}}
+ +

Событие keyup срабатывает, когда клавиша была отпущена.

+ + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("KeyboardEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}
+ +

События keydown и keyup показывают то, что клавиша была нажата, в то время как keypress показывает то, какой символ был введён. Например, прописную "a" keydown и keyup сообщат как 65, а keypress сообщит как 97. Заглавную же "A" все события сообщают как 65.

+ +

Примеры

+ +

Примеры addEventListener keyup

+ +

Этот пример отображает значение {{domxref("KeyboardEvent.code")}} всякий раз, когда вы отпускаете клавишу внутри {{HtmlElement("input")}} элемента.

+ +
<input placeholder="Кликните здесь, затем нажмите и отпустите клавишу." size="40">
+<p id="log"></p>
+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('keyup', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keyup_example")}}

+ +

Аналог onkeyup

+ +
input.onkeyup = logKey;
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName("UI Events", "#event-type-keyup")}}{{Spec2("UI Events")}}
+ +

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

+ +

{{Compat("api.Element.keyup_event")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/matches/index.html b/files/ru/web/api/element/matches/index.html new file mode 100644 index 0000000000..a8fe49cccb --- /dev/null +++ b/files/ru/web/api/element/matches/index.html @@ -0,0 +1,157 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +translation_of: Web/API/Element/matches +--- +

{{ APIRef("DOM") }}

+ +

Описание

+ +

Метод Element.matches() вернёт true или false, в зависимости от того, соответствует ли элемент указанному css-селектору.

+ +
+

В некоторых браузерах данный метод имеет нестандартное название - matchesSelector().

+
+ +

Синтаксис

+ +
var result = element.matches(selectorString)
+
+ + + +

Пример

+ +
<div id="one">Первый подопытный</div>
+<div class="someClass" id="two">Второй подопытный</div>
+
+<script type="text/javascript">
+
+  var coll = document.querySelectorAll("div");
+  for (var i = 0, len = coll.length; i < len; i++) {
+    if (coll[i].matches(".someClass")) {
+      alert(coll[i].id+": Я выжил!");
+    }else{
+      coll[i].remove();
+    }
+  }
+
+</script>
+
+ +

Вызов alert сработает только для второго элемента div, которому присвоен класс "someClass".

+ +

Исключения

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

Полифилл

+ +

Полифил будет работать только в браузерах, поддерживающих метод document.queryselectorAll.

+ +
;(function(e) {
+    var matches = e.matches || e.matchesSelector || e.webkitMatchesSelector || e.mozMatchesSelector || e.msMatchesSelector || e.oMatchesSelector;
+    !matches ? (e.matches = e.matchesSelector = function matches(selector) {
+        var matches = document.querySelectorAll(selector);
+        var th = this;
+        return Array.prototype.some.call(matches, function(e) {
+            return e === th;
+        });
+    }) : (e.matches = e.matchesSelector = matches);
+})(Element.prototype);
+ +

 

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Поддерживается , но имеет иное название +

{{CompatVersionUnknown}} имеет название  webkitMatchesSelector

+ 		{{CompatGeckoDesktop("1.9.2")}} имеет название   mozMatchesSelector [1]9.0 имеет название msMatchesSelector11.5 имеет название  oMatchesSelector,
+ а с 15.0 - webkitMatchesSelector		5.0 известен под названием webkitMatchesSelector
Unprefix version{{CompatChrome("34")}}{{CompatGeckoDesktop("34")}}{{CompatUnknown}}{{CompatUnknown}}7.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Поддерживается , но имеет иное название{{CompatUnknown}}{{CompatGeckoMobile("1.9.2")}} имеет название mozMatchesSelector [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Unprefix version{{CompatUnknown}}{{CompatGeckoMobile("34")}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

 До появления Gecko 2.0 вызов с недопустимым селектором возвращал  false, а не вызывал исключение...

diff --git a/files/ru/web/api/element/mousedown_event/index.html b/files/ru/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..e11f5da566 --- /dev/null +++ b/files/ru/web/api/element/mousedown_event/index.html @@ -0,0 +1,147 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +translation_of: Web/API/Element/mousedown_event +--- +

Событие mousedown срабатывает, когда кнопка указывающего устройства (к примеру, мыши) нажата над элементом.

+ +

Общая информация

+ +
+
Спецификация
+
DOM L3
+
Интерфейс
+
{{domxref("MouseEvent")}}
+
Всплывающее
+
Да
+
Отменяемое
+
Да
+
Цель
+
Элемент
+
Действие по умолчанию
+
Различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Связанные события

+ + diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html new file mode 100644 index 0000000000..075e92ec64 --- /dev/null +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -0,0 +1,148 @@ +--- +title: 'Element: mouseenter event' +slug: Web/API/Element/mouseenter_event +translation_of: Web/API/Element/mouseenter_event +--- +
{{APIRef}}
+ +

Событие mouseenter вызывается в {{domxref("Element")}} когда указательное устройство (обычно мышь) изначально перемещается так, что его горячая точка находится в пределах элемента, в котором было запущено событие.

+ + + + + + + + + + + + + + + + + + + + +
ВсплывающееНет
ОтменяемоеНет
Интерфейс{{domxref("MouseEvent")}}
Свойство обработчика события{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

Заметки по использованию

+ +

Хотя mouseenter похоже на {{domxref("Element/mouseover_event", "mouseover")}}, mouseenter отличается тем, что он не является bubble и не отправляется никаким потомкам, когда указатель перемещается из физического пространства одного из его потомков в его собственное физическое пространство.

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

При наличии глубокой иерархии количество отправляемых событий mouseenter может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше прослушивать события mouseover.

+ +

В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS {{cssxref(':hover')}}.

+ +

Примеры

+ +

В документации по mouseover есть пример илюстрирующий различия между mouseover и mouseenter.

+ +

mouseenter

+ +

В следующем тривиальном примере событие mouseenter используется для изменения границы элемента div, когда мышь входит в выделенное ему пространство. Затем он добавляет элемент в список с номером события mouseenter или mouseleave.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

Стилизация div чтобы сделать его более заметным.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // Создать новый текстовый узел, используя предоставленный текст
+  var newTextNode = document.createTextNode(text);
+
+  // Создать новый элемент li
+  var newListItem = document.createElement("li");
+
+  // Добавить текстовый узел к элементу li
+  newListItem.appendChild(newTextNode);
+
+  // Добавить вновь созданный элемент списка в список
+  unorderedList.appendChild(newListItem);
+}
+ +

Результат

+ +

{{EmbedLiveSample('mouseenter')}}

+ +

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

+ + + + + + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

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

+ +

{{Compat("api.Element.mouseenter_event")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/element/mouseleave_event/index.html b/files/ru/web/api/element/mouseleave_event/index.html new file mode 100644 index 0000000000..3e0db2c600 --- /dev/null +++ b/files/ru/web/api/element/mouseleave_event/index.html @@ -0,0 +1,319 @@ +--- +title: mouseleave +slug: Web/API/Element/mouseleave_event +translation_of: Web/API/Element/mouseleave_event +--- +
{{APIRef}}
+ +

Событие mouseleave срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.

+ +

mouseleave и {{event('mouseout')}} схожи, но отличаются тем, что mouseleave не всплывает, а mouseout всплывает.
+ Это значит, что mouseleave срабатывает, когда курсор выходит за границы элемента и всех его дочерних элементов, в то время как mouseout срабатывает, когда курсор покидает границы элемента или одного из его дочерних элементов (даже если курсор все еще находится в пределах элемента).

+ + + + + + + + + + + + +
mouseenter.pngmouseover.png
Одно mouseleave событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке.Одно единственное mouseout событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня.
+ +

 

+ +

Общая информация

+ +
+
Специф-ция
+
DOM L3
+
Интерфейс
+
{{domxref('MouseEvent')}}
+
Bubbles
+
Нет
+
Отменяемое
+
Нет
+
Цель
+
{{cssxref('Element')}}
+
Действие по умолчанию
+
Нет
+
+ +

Свойства

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СвойствоТипОписание
target {{readonlyInline}}{{domxref("EventTarget")}}Целевой элемент события (вышележащий элемент в DOM дереве).
type {{readonlyInline}}{{domxref("DOMString")}}Тип события.
bubbles {{readonlyInline}}Boolean +

Поднимается ли событие вверх как принято или нет

+
cancelable {{readonlyInline}}BooleanЯвляется ли событие отменяемым или нет?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window объекта document)
detail {{readonlyInline}}long (float)0.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}Целевой узел (елемент), который используется слушателем события.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}Для mouseover, mouseout, mouseenter и mouseleave событий: цель дополнительного события (mouseleave цель в случае наступления mouseenter события). null иначе.
screenX {{readonlyInline}}longX координата указателя мыши в глобальных (относительно экрана) координатах.
screenY {{readonlyInline}}longY координата указателя мыши в глобальных (относительно экрана) координатах.
clientX {{readonlyInline}}longX координата указателя мыши в локальных (относительно DOM содержимого) координатах.
clientY {{readonlyInline}}longY координата указателя мыши в локальных (относительно DOM содержимого) координатах.
button {{readonlyInline}}unsigned shortВсегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does).
buttons {{readonlyInline}}unsigned shortThe buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Примеры

+ +

The mouseout documentation has an example illustrating the difference between mouseout and mouseleave.

+ +

The following example illustrates how to use mouseout, to simulate the principle of event delegation for the mouseleave event.

+ +
<ul id="test">
+  <li>
+    <ul class="leave-sensitive">
+      <li>item 1-1</li>
+      <li>item 1-2</li>
+    </ul>
+  </li>
+  <li>
+    <ul class="leave-sensitive">
+      <li>item 2-1</li>
+      <li>item 2-2</li>
+    </ul>
+  </li>
+</ul>
+
+<script>
+  var delegationSelector = ".leave-sensitive";
+
+  document.getElementById("test").addEventListener("mouseout", function( event ) {
+    var target = event.target,
+        related = event.relatedTarget,
+        match;
+
+    // search for a parent node matching the delegation selector
+    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
+        target = target.parentNode;
+    }
+
+    // exit if no matching node has been found
+    if ( !match ) { return; }
+
+    // loop through the parent of the related target to make sure that it's not a child of the target
+    while ( related && related != target && related != document ) {
+        related = related.parentNode;
+    }
+
+    // exit if this is the case
+    if ( related == target ) { return; }
+
+    // the "delegated mouseleave" handler can now be executed
+    // change the color of the text
+    target.style.color = "orange";
+    // reset the color after a small amount of time
+    setTimeout(function() {
+        target.style.color = "";
+    }, 500);
+
+
+  }, false);
+
+
+  // function used to check if a DOM element matches a given selector
+  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
+  function matches( elem, selector ){
+    // the matchesSelector is prefixed in most (if not all) browsers
+    return elem.matchesSelector( selector );
+  };
+</script>
+ +

Браузерная совместимость

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support30[1]{{CompatVersionUnknown}}10[2]5.5{{CompatVersionUnknown}}
+ {{CompatNo}} 15.0
+ 17.0		7[3]
On disabled form elements{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("44.0")}}[4]{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Реализовано в bug 236215.

+ +

[2] Реализовано в {{bug("432698")}}.

+ +

[3] Safari 7 генерирует данное событие во многих ситуациях где это не разрешено, тем самым делая целое событие бесполезным. Смотрите bug 470258 for the description of the bug (это также присутствовало в старых версиях Chrome). Safari 8 имеет правильное поведение

+ +

[4] Реализовано в {{bug("218093")}}.

+ +

See also

+ + diff --git a/files/ru/web/api/element/mouseup_event/index.html b/files/ru/web/api/element/mouseup_event/index.html new file mode 100644 index 0000000000..e3bd450c13 --- /dev/null +++ b/files/ru/web/api/element/mouseup_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Элемент: mouseup событие' +slug: Web/API/Element/mouseup_event +translation_of: Web/API/Element/mouseup_event +--- +
{{APIRef}}
+ +

Событие mouseup возникает на {{domxref("Element")}}, когда кнопка на апаратном манипуляторе курсора (на мыши или трекпаде) отпущена, в то время как указатель находится на элементе. Событие mouseup является противоположным {{domxref("Element.mousedown_event", "mousedown")}} событию.

+ + + + + + + + + + + + + + + + + + + + +
BubblesДа
Отменяемое Да
Interface{{domxref("MouseEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+ +

Примеры

+ +

{{page("/en-US/docs/Web/API/Element/mousemove_event", "Examples")}}

+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+ +

Браузерная совместимость

+ +

{{Compat("api.Element.mouseup_event")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/outerhtml/index.html b/files/ru/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..525ac3573e --- /dev/null +++ b/files/ru/web/api/element/outerhtml/index.html @@ -0,0 +1,148 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - Парсинг + - Парсинг DOM + - Свойство + - Сериализация + - Ссылка +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

Описание

+ +

Атрибут outerHTML DOM-интерфейса {{ domxref("element") }} получает сериализованный HTML-фрагмент, описывающий элемент, включая его потомков. Можно установить замену элемента узлами, полученными из заданной строки.

+ +

Синтаксис

+ +
var content = element.outerHTML;
+
+ +

На выводе, content содержит сериализованный HTML-фрагмент, описывающий element и его потомки.

+ +
element.outerHTML = content;
+
+ +

Replaces the element with the nodes generated by parsing the string content with the parent of element as the context node for the fragment parsing algorithm.

+ +

Примеры

+ +

Получение свойства outerHTML элемента:

+ +
// HTML:
+// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// строка '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// выведена в окно консоли
+
+ +

Замена ветки с помощью изменения свойства outerHTML:

+ +
// HTML:
+// <div id="container"><div id="d">Это div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // логирует "DIV"
+
+d.outerHTML = "<p>Этот параграф заменил исходный div.</p>";
+console.log(container.firstChild.nodeName); // логирует "P"
+
+// div #d больше не часть дерева документа,
+// новый параграф заменил его.
+
+ +

Примечания

+ +

Если у элемента нет родительской ветки, которая не является корневой веткой документа, установка его свойства outerHTML выбросит исключение DOMException с кодом ошибки NO_MODIFICATION_ALLOWED_ERR. Например:

+ +
document.documentElement.outerHTML = "test";  // бросает DOMException
+
+ +

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // показывает: "P"
+p.outerHTML = "<div>Этот div заменил параграф.</div>";
+console.log(p.nodeName); // всё ещё "P";
+
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

See also

+ + diff --git a/files/ru/web/api/element/queryselector/index.html b/files/ru/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..e06ee20537 --- /dev/null +++ b/files/ru/web/api/element/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Возвращает первый элемент, являющийся потомком элемента, на который применено правило указанной группы селекторов.

+ +

Синтаксис

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

Пример

+ +

Данный пример получает первый элемент style, который не имеет атрибута type или этот атрибут равен text/css, в теле (body) HTML документа:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Примечания

+ +

Возвращает null если совпадения не найдены, иначе первый найденный элемент.

+ +

Генерирует исключение SYNTAX_ERR  если указанная группа селекторов не корректна.

+ +

querySelector() был представлен в WebApps API.

+ +

Строка аргументов передаваемая querySelector() должна удовлетворять синтаксису CSS. Более подробные примеры смотрите в {{domxref("document.querySelector")}}.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}{{Spec2('DOM4')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}}
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() поддерживается в IE8, но только для CSS 2.1 селекторов.

+ +

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

+ + diff --git a/files/ru/web/api/element/queryselectorall/index.html b/files/ru/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..02ffad4f0e --- /dev/null +++ b/files/ru/web/api/element/queryselectorall/index.html @@ -0,0 +1,69 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +translation_of: Web/API/Element/querySelectorAll +--- +

Общая информация

+ +

Возвращает список типа NodeList, состоящий из всех элементов, которые являются потомками для элемента, над которым была выполнена функция и удовлетворяющим условию выборки.

+ +

Синтаксис

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

где

+ + + +

Примеры

+ +

Этот пример возвращает список всех элементов с тегом p, которые находятся в теле документа:

+ +
var matches = document.body.querySelectorAll('p');
+
+ +

Этот пример возвращает список всех элементов с тегом p, которые находятся непосредственно в элементах-контейнерах с тегом div, имеющих класс 'highlighted', которые в свою очередь находятся внутри элемента с идентификатором 'test':

+ +
var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted > p');
+
+ +

Этот пример возвращает список всех элементов iframe, которые имеют атрибут "data-src":

+ +
var matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Заметки

+ +

Функция выбрасывает исключение SYNTAX_ERR, если текст селектора неправильный.

+ +

querySelectorAll() был представлен как часть WebApps API.

+ +

Строка указанная в качестве текста селектора, должна соответствовать синтаксису CSS.

+ +

Помните, что возвращённый в качестве результата список NodeList не рекомендуется для использования в циклах (например, в for(...)) в качестве массива, т.к., это не массив в «традиционном» понятии Javascript, а объект типа NodeList, который, хоть и схож по свойствам с массивом, но не является таковым в полной мере (не поддерживает все методы, доступные массиву), так что будьте осторожны.

+ +

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

+ +
+ +

{{Compat("api.Element.querySelectorAll")}}

+ +

Ссылки на спецификации

+ + + +

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

+ + diff --git a/files/ru/web/api/element/removeattribute/index.html b/files/ru/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..22bdfb22c2 --- /dev/null +++ b/files/ru/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute удаляет аттрибут с элемента.

+ +

Синтаксис

+ +
element.removeAttribute(attrName);
+
+ + + +

Пример

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// now: <div id="div1" width="200px">
+
+ +

Заметки

+ +

Вы должны использовать removeAttribute вместо того, чтобы устанавливать значение атрибута в null, используя setAttribute.

+ +

Попытка удаления аттрибута, которого нет на элементе не вызывает ошибки.

+ +

{{ DOMAttributeMethods() }}

+ +

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

+ +

DOM Level 2 Core: removeAttribute (introduced in DOM Level 1 Core)

diff --git a/files/ru/web/api/element/requestpointerlock/index.html b/files/ru/web/api/element/requestpointerlock/index.html new file mode 100644 index 0000000000..c85e4075b3 --- /dev/null +++ b/files/ru/web/api/element/requestpointerlock/index.html @@ -0,0 +1,90 @@ +--- +title: Element.requestPointerLock() +slug: Web/API/Element/requestPointerLock +translation_of: Web/API/Element/requestPointerLock +--- +

{{ APIRef("DOM") }}{{ seeCompatTable }}

+ +

Метод Element.requestPointerLock() позволяет асинхронно запросить блокировку курсора для заданного элемента.

+ +

Чтобы отследить успех или ошибку запроса, необходимо слушать события {{event("pointerlockchange")}} и {{event("pointerlockerror")}} на уровне {{domxref("Document")}}.

+ +

Синтаксис

+ +
instanceOfElement.requestPointerLock();
+
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('Pointer Lock','#element-interface','Element')}}{{Spec2('Pointer Lock')}}Extend the Element interface
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/ru/web/api/element/scrollheight/index.html b/files/ru/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..cc3e014192 --- /dev/null +++ b/files/ru/web/api/element/scrollheight/index.html @@ -0,0 +1,178 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

Свойство Element.scrollHeight (только чтение) - измерение высоты контента в элементе, включая содержимое, невидимое из-за прокрутки. Значение scrollHeight  равно минимальному clientHeight, которое потребуется элементу для того, чтобы поместить всё содержимое в видимую область (viewport), не используя вертикальную полосу прокрутки. Оно включает в себя padding элемента, но не его margin.

+ +
+

Это свойство округляет значение до целого числа. Если вам нужно дробное значение, используйте {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Синтаксис

+ +
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+
+ +

intElemScrollHeight - переменная, хранящая целое число, соответствующее пиксельному значению scrollHeight элемента. scrollHeight является свойством только для чтения.

+ +

Пример

+ +
+
+

padding-top

+ +

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Проблемы и решения

+ +

Определить, был ли элемент полностью прокручен.

+ +

Следующее выражение возвращает true, если элемент был прокручен до конца, false если это не так.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

Пример работы scrollHeight

+ +

Если объединить это выражение с событием onscroll, оно может быть использовано для того, чтобы определить, прочитал ли пользователь текст, или нет (см. также свойства element.scrollTop и element.clientHeight). Например:

+ +

HTML

+ +
<form name="registration">
+  <p>
+    <textarea id="rules">
+Регистрируясь на сайте любителей котиков я соглашаюсь со следующими условиями:
+- покупать kitekat бездомным;
+- делиться последним куском мяса;
+- любить Firefox;
+- вставлять в каждую вразу: "мурр", "мррр" и т.п.;
+- в качестве документов предъявлять хвост и усы;
+- заниматься разработкой;
+- читать хабрахабр;
+- смотреть "Tom and Jerry" и котопса;
+- продать почку для поддержания здоровья кошек города;
+- уметь ловить мышей;
+- быть фанатом Матроскина;
+- обожать молоко;
+- уметь мурлыкать и рррычать;
+- следовать жизненным принципам Леопольда;
+- вставлять на MDN фразы про кошек для разнообразия и поддержания морального духа;
+- загрузить в качестве аватарки фото с Простоквашино;
+- другими словами, всегда любить и уважать кошек и ненавидеть собак.
+Условия могут быть изменены в любое время, незнание не освобождает от ответственности.
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" name="accept" id="agree" />
+    <label for="agree">Я согласен</label>
+    <input type="submit" id="nextstep" value="Далее" />
+  </p>
+</form>
+ +

CSS

+ +
#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Спасибо вам." : "Пожалуйста, прокрутите и прочитайте следующий текст.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

{{ EmbedLiveSample('scrollHeight_Demo', '640', '400') }}

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Изначальное определение
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
БраузерыНачальная версия
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

В версиях Firefox до 21-й: когда контент элемента не создает вертикальную полосу прокрутки, его свойство scrollHeight равно значению clientHeight. Это может означать либо то, что контента слишком мало, чтобы ему потребовалась полоса прокрутки, либо то, что у элемента значение CSS свойства overflow равно visible (в этом случае прокрутка отсутствует).

+ +

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

+ + diff --git a/files/ru/web/api/element/scrollintoview/index.html b/files/ru/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..58bf29f51a --- /dev/null +++ b/files/ru/web/api/element/scrollintoview/index.html @@ -0,0 +1,112 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}
+ +

Метод Element.scrollIntoView() интерфейса {{domxref("Element")}} прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

+ +

Синтаксис

+ +
element.scrollIntoView(); // эквивалентно element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // аргумент типа Boolean
+element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object
+
+ +

Параметры

+ +
+
alignToTop {{optional_inline}}
+
Параметр типа {{jsxref("Boolean")}}, возможные значения: +
    +
  •  true,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Значение по умолчанию.
    • +
  • false, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации scrollIntoViewOptions: {block: "end", inline: "nearest"}
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Aргумент типа boolean или типа object со следующим набором опций:
+
behavior {{optional_inline}}
+
Определяет анимацию скролла. Принимает значение "auto" или "smooth". По умолчанию "auto".
+
block {{optional_inline}}
+
Вертикальное выравнивание.
+ Одно из значений: "start", "center", "end" или "nearest". По умолчанию "center".
+
inline {{optional_inline}}
+
Горизонтальное выравнивание.
+ Одно из значений: "start", "center", "end" или "nearest". По умолчанию "nearest".
+
+ +

Пример

+ +

HTML

+ +
<button type="button" class="btn">Нажми на меня</button>
+
+<div class="big"></div>
+
+<div id="box" class="box">Скрытый элемент</div>
+ +

CSS

+ +
.big {
+   background: #ccc;
+   height: 300px;
+}
+
+.btn {
+   font-size: 14px;
+}
+
+.box {
+   background: lightgreen;
+   height: 40px;
+}
+ +

JavaScript

+ +
var hiddenElement = document.getElementById("box");
+var btn = document.querySelector('.btn');
+
+function handleButtonClick() {
+   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
+}
+
+btn.addEventListener('click', handleButtonClick);
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример')}}

+ +

Примечание

+ +

Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Initial Definition
+ +

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

+ +

{{Compat("api.Element.scrollIntoView")}}

+ +

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

+ + diff --git a/files/ru/web/api/element/scrollleft/index.html b/files/ru/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..15af642a56 --- /dev/null +++ b/files/ru/web/api/element/scrollleft/index.html @@ -0,0 +1,79 @@ +--- +title: Элемент.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

Свойство scrollLeft получает или устанавливает количество пикселей, на которое контент элемента прокручен влево.

+ +

Заметьте, что если свойство {{cssxref("direction")}}: rtl (right-to-left), то scrollLeft равен 0, когда скроллбар на его самой правой позиции (с начала прокрученного контента), а затем становится отрицательным по мере прокрутки к концу контента.

+ +

Синтаксис

+ +
// Получаем количество прокрученных пикселей
+var sLeft = element.scrollLeft;
+
+ +

sLeft - целое число, представленное количеством пикселей, на которые элемент был прокручен влево.

+ +
// Устанавливаем количество прокрученных пикселей
+element.scrollLeft = 10;
+
+ +

scrollLeft может быть установлен, как любое целое число, однако:

+ + + +

Пример

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Бла-бла-бла</div>
+    </div>
+    <button id="slide" type="button">Пролистать</button>
+</body>
+</html>
+
+ +

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

+ + + + + + + + + + + + + + +
СпецификацииСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
diff --git a/files/ru/web/api/element/scrollto/index.html b/files/ru/web/api/element/scrollto/index.html new file mode 100644 index 0000000000..c6f78187e4 --- /dev/null +++ b/files/ru/web/api/element/scrollto/index.html @@ -0,0 +1,72 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +translation_of: Web/API/Element/scrollTo +--- +
{{ APIRef }}
+ +

scrollTo() метод интерфейса  {{domxref("Element")}}, осуществляет прокрутку по заданному набору координат внутри данного элемента. 

+ +

Синтаксис

+ +
element.scrollTo(x-coord, y-coord)
+element.scrollTo(options)
+
+ +

Параметры

+ + + +

- or -

+ + + +

Примеры

+ +
element.scrollTo(0, 1000);
+
+ +

С помощью options:

+ +
element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Initial definition.
+ +

Браузерная совместимость

+ + + +

{{Compat("api.Element.scrollTo")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/element/scrolltop/index.html b/files/ru/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..fa6cbf77de --- /dev/null +++ b/files/ru/web/api/element/scrolltop/index.html @@ -0,0 +1,73 @@ +--- +title: Элемент.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{ APIRef("DOM") }}

+ +

Свойство scrollTop считывает или устанавливает количество пикселей, прокрученных от верха элемента. scrollTop измеряет дистанцию от верха элемента до верхней точки видимого контента. Когда контент элемента не создаёт вертикальную прокрутку, его scrollTop равно 0.

+ +

Синтаксис

+ +
//Получаем количество прокрученных пикселей
+var  intElemScrollTop = someElement.scrollTop;
+
+ +

После выполнения этого кода, intElemScrollTop - целое число пикселей, на которое контент {{domxref("element")}} был прокручен от верха.

+ +
// Устанавлием количество прокрученных пикселей
+element.scrollTop = intValue;
+
+ +

scrollTop может быть любым целым числом, с определенными оговорками:

+ + + +

Пример

+ +
+
+

padding-top

+ +

Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

Кот Василий ел картошку.Бла-бла-бла, бла-бла-бла.Бла-бла-бла, бла-бла-бла.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

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

+ +

{{Compat("api.Element.scrollTop")}}

+ +

Ссылки

+ + diff --git a/files/ru/web/api/element/setattribute/index.html b/files/ru/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..0d61d3834e --- /dev/null +++ b/files/ru/web/api/element/setattribute/index.html @@ -0,0 +1,54 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +
{{APIRef("DOM")}}
+ +
Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.
+ +
+ +

Синтаксис

+ +
element.setAttribute(name, value);
+
+ + + +

Пример

+ +

В следующем примере, setAttribute() используется, чтобы установить атрибут {{htmlattrxref("disabled")}}  кнопки {{htmlelement("button")}}, делая её отключенной.

+ +
<button>Hello World</button>
+ +
var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+
+ +

{{ EmbedLiveSample('Пример', '300', '50', '', 'Web/API/Element/setAttribute') }}

+ +

Примечания

+ +

При вызове на элементе внутри HTML документа, setAttribute переведет имя атрибута в нижний регистр.

+ +

Если указанный атрибут уже существует, его значение изменится на новое. Если атрибута ранее не существовало, он будет создан.

+ +

Несмотря на то, что метод  getAttribute() возвращает null у удаленных атрибутов, вы должны использовать removeAttribute() вместо elt.setAttribute(attr, null), чтобы удалить атрибут. Последний заставит значение null быть строкой "null", которая, вероятно, не то, что вы хотите.

+ +

Использование setAttribute() для изменения определенных атрибутов особенно значимо в XUL, так как работает непоследовательно, а атрибут определяет значение по умолчанию. Для того, чтобы получить или изменить текущие значения, вы должны использовать свойства. Например, elt.value вместо elt.setAttribure('value', val).

+ +

Чтобы установить атрибут, которому значение не нужно, такой как, например, атрибут autoplay элемента {{HTMLElement("audio")}}, используйте null или пустое значение. Например: elt.setAttribute('autoplay', '')

+ +
{{DOMAttributeMethods}}
+ +

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

+ + diff --git a/files/ru/web/api/element/slot/index.html b/files/ru/web/api/element/slot/index.html new file mode 100644 index 0000000000..0317b63cc2 --- /dev/null +++ b/files/ru/web/api/element/slot/index.html @@ -0,0 +1,67 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +tags: + - API + - DOM + - Element + - Property + - Reference + - shadow dom +translation_of: Web/API/Element/slot +--- +

{{APIRef("Shadow DOM")}}

+ +

Свойство slot интерфейса {{domxref("Element")}} возращает имя слота теневого DOM, в который вставлен элемент.

+ +

Слот slot это заполнитель внутри веб компонента, который пользователи могут заполнить собственной разметкой (смотри Использование шаблонов и слотов для получения дополнительной информации).

+ +

Синтаксис

+ +
var aString = element.slot
+element.slot = aString
+
+ +

Значение

+ +

{{domxref("DOMString")}}.

+ +

Примеры

+ +

В нашем примере простого шаблона (смотри в прямом эфире), мы создаем тривиальный пример пользовательского элемента с именем <my-paragraph>, в котором прикрепляется теневой корень, а затем заполняется с использованием содержимого шаблона, содержащего слот с именем my-text.

+ +

Когда в документе используется <my-paragraph>, слот заполняется слот-элементом, включая его в элемент с атрибутом slot со значением my-text. Вот один из таких примеров:

+ +
<my-paragraph>
+  <span slot="my-text">Let's have some different text!</span>
+</my-paragraph>
+ +

В нашем JavaScript файле мы получаем ссылку {{htmlelement("span")}}, показанную выше, а затем регестрием ссылку на имя соответствующего элемента <slot>.

+ +
let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // logs 'my-text'
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}{{Spec2('DOM WHATWG')}}
+ +

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

+ +
+ + +

{{Compat("api.Element.slot")}}

+
diff --git a/files/ru/web/api/element/tagname/index.html b/files/ru/web/api/element/tagname/index.html new file mode 100644 index 0000000000..dcc8395756 --- /dev/null +++ b/files/ru/web/api/element/tagname/index.html @@ -0,0 +1,47 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef("DOM") }}

+ +

Описание

+ +

Возвращает HTML-тег элемента ("div", "p", "a" и т.д).

+ +

Синтаксис

+ +
var elementName = element.tagName;
+
+ + + +
+

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

+
+ +
+

Существует более древнее и обыденное свойство nodeName!

+
+ +

Пример

+ +

Предположим, есть на странице элемент с id "born":

+ +
<span id="born">Я родился...</span>
+
+ +

Давайте узнаем его HTML-тег:

+ +
var span = document.getElementById("born");
+alert(span.tagName); //"SPAN"
+
+ +

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

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