NonDocumentTypeChildNode.nextElementSibling - Интерфейсы веб API

NonDocumentTypeChildNode.nextElementSibling
===========================================

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

Синтаксис
---------
```

var nextNode = elementNodeReference.nextElementSibling;
```

Пример
------

```html
<div id="div-01">Это div-01</div>
<div id="div-02">Это div-02</div>

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

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

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

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

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

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

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

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Чистый интерфейс `ChildNode`.
* Типы объектов, реализующих этот чистый интерфейс: `CharacterData`, `Element`, и `DocumentType` (en-US).


keydown - Интерфейсы веб API

keydown
=======

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

В отличии от события `keypress (en-US)`, событие keydown срабатывает на всех клавишах, независимо от того, есть ли у них значение.

| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `KeyboardEvent` |
| Event handler property | `onkeydown` (en-US) |

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

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

Примеры
-------

### Примеры addEventListener keydown

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

```html
<input placeholder="Кликните здесь, затем нажмите клавишу." size="40" />
<p id="log"></p>
```

```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### Аналог onkeydown

```js
input.onkeydown = logKey;
```

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

| Specification |
| --- |
| UI Events # event-type-keydown |
| HTML Standard # handler-onkeydown |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `input`
* `keypress`
* `keyup`
* Document `keydown` event (en-US)


Element.slot - Интерфейсы веб API

Element.slot
============

Свойство **`slot`** интерфейса `Element` возвращает имя слота теневого DOM, в который вставлен элемент.

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

Синтаксис
---------
```

var aString = element.slot
element.slot = aString
```

### Значение

`DOMString`.

Примеры
-------

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

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

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

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

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-slot① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


NonDocumentTypeChildNode.previousElementSibling - Интерфейсы веб API

NonDocumentTypeChildNode.previousElementSibling
===============================================

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

Синтаксис
---------
```

prevNode = elementNodeReference.previousElementSibling;
```

Примеры
-------

```html
<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>
<li>This is a list item</li>
<li>This is another list item</li>
<div id="div-03">Here is div-03</div>

<script>
 var el = document.getElementById("div-03").previousElementSibling;
 document.write("<p>Siblings of div-03</p><ol>");
 while (el) {
 document.write("<li>" + el.nodeName + "</li>");
 el = el.previousElementSibling;
 }
 document.write("</ol>");
</script>
```

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

Соседи div-03

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

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

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

```js
// Ресурс: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if (!("previousElementSibling" in document.documentElement)) {
  Object.defineProperty(Element.prototype, "previousElementSibling", {
    get: function () {
      var e = this.previousSibling;
      while (e && 1 !== e.nodeType) e = e.previousSibling;
      return e;
    },
  });
}
```

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

```js
// Ресурс: https://github.com/jserz/js\_piece/blob/master/DOM/NonDocumentTypeChildNode/previousElementSibling/previousElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty("previousElementSibling")) {
      return;
    }
    Object.defineProperty(item, "previousElementSibling", {
      configurable: true,
      enumerable: true,
      get: function () {
        var el = this;
        while ((el = el.previousSibling)) {
          if (el.nodeType === 1) {
            return el;
          }
        }
        return null;
      },
      set: undefined,
    });
  });
})([Element.prototype, CharacterData.prototype]);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-previouselementsibling② |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `NonDocumentTypeChildNode` (en-US) чистый интерфейс.
* Типы объектов реализующие чистый интерфейс: `CharacterData`, и `Element`.


Element.remove() - Интерфейсы веб API

Element.remove()
================

Метод **`Element.remove()`** удаляет элемент из DOM-дерева, в котором он находится.

Синтаксис
---------

```js
remove();
```

Примеры
-------

### Использование `remove()`

```html
<div id="div-01">Это div-01</div>
<div id="div-02">Это div-02</div>
<div id="div-03">Это div-03</div>
```

```js
var el = document.getElementById("div-02");
el.remove(); // Удалит элемент div с идентификатором 'div-02'
```

### Область видимости `Element.remove()` нерасширяема

 Метод `remove()` не работает с оператором `with`.
 Подробнее читайте в справке по `Symbol.unscopables`.

```js
with (node) {
  remove();
}
// ReferenceError: remove is not defined
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-remove① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Polyfill


Element.id - Интерфейсы веб API

Element.id
==========

Свойство **`id`** представляет идентификатор элемента, отражая глобальный атрибут **id**.
Если значение **`id`** не пустое, то оно должно быть уникально в документе.

**`id`** часто используется с `getElementById`, чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.

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

Синтаксис
---------
```

var idStr = element.id; // Получаем id.
```

```
element.id = idStr; // Применяем id.
```

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-id① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Глобальный атрибут **id**


Element.insertAdjacentHTML() - Интерфейсы веб API

Element.insertAdjacentHTML()
============================

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

Синтаксис
---------
```

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

### Параметры

`position`

`DOMString` - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):

* `'beforebegin'`: до самого `element` (до открывающего тега).
* `'afterbegin'`: сразу после открывающего тега `element` (перед первым потомком).
* `'beforeend'`: сразу перед закрывающим тегом `element` (после последнего потомка).
* `'afterend'`: после `element` (после закрывающего тега).

`text`

Строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.

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

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
```

**Примечание:** позиции `beforebegin` и `afterend` работают только если узел имеет родительский элемент.

Пример
------

```js
// <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()`, когда требуется ввести простой текст. Используйте для этого свойство `Node.textContent` или метод `Element.insertAdjacentText()`. Они не будут интерпретировать текст как HTML, а вставят необработанный текст.

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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


focusin - Интерфейсы веб API

focusin
=======

Событие focusin срабатывает, когда элемент получает фокус. Главное отличие от `focus` в том, что последний не всплывает.

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

Specification

DOM L3

Interface
`FocusEvent` (en-US)
Bubbles

Yes

Cancelable

No

Target

Element

Default Action

None.

Свойства
--------

| Property | Type | Description |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Event target losing focus. |
| `type` Только для чтения  | `DOMString` | The type of event. |
| `bubbles` Только для чтения  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Только для чтения  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` Только для чтения  | `EventTarget` (DOM element) | Event target receiving focus. |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Related Events
--------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


Element.hasAttributes() - Интерфейсы веб API

Element.hasAttributes()
=======================

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

Синтаксис
---------
```

var result = element.hasAttributes();
```

`result`

содержит возвращаемое значение `true` или `false`.

Пример
------

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

Polyfill
--------

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-hasattributes① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `Element.attributes`
* `Element.hasAttribute()`


Element.matches() - Интерфейсы веб API

Element.matches()
=================

Описание
--------

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

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

Синтаксис
---------
```

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

* `Результат выполнения - true или false.`
* **`selectorString`** - строка, содержащая любой css-селектор, к примеру: **"div"**, **"\*"**, **"#id"** и прочие.
Пример
------

```html
<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.

```js
(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);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-matches① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.insertAdjacentText() - Интерфейсы веб API

Element.insertAdjacentText()
============================

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

Синтаксис
---------
```

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

### Параметры

`position`

`DOMString` позиция для вставки текста относительно элемента `element`; должна быть указана в следующем виде:

* `'beforebegin'`: Перед самим `element`.
* `'afterbegin'`: Внутри самого `element`, перед первым child.
* `'beforeend'`: Внутри самого `element`, после последнего child.
* `'afterend'`: После самого `element`.

`element`

`DOMString` текст, который будет помещён в заданную позицию.

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

Void.

### Исключения

| Exception | Explanation |
| --- | --- |
| `SyntaxError` | Указанная `position` не может быть распознана. |

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

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
```

**Примечание:** значения `beforebegin` и `afterend` работают только если targetElement находится в DOM-дереве и имеет родительский элемент.

Пример
------

```js
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 (возможно и в более ранних версиях) и последующих версиях, с помощью данного кода:

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

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

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacenttext |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`


Element.getElementsByTagName() - Интерфейсы веб API

Element.getElementsByTagName()
==============================

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

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

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

Синтаксис
---------
```

elements = element.getElementsByTagName(tagName)
```

* `elements` это живая коллекция `HTMLCollection` найденных элементов в том порядке, в котором они были найдены в дереве. Если не найдено ни одного элемента, удовлетворяющего условиям поиска, то коллекция будет пустой.
* `element` это элемент в котором будет осуществляться поиск. Обратите внимание, что поиск будет осуществляться только в потомках этого элемента. Сам элемент не будет включён в результат поиска.
* `tagName` определяет имя тега для поиска. Если значением tagName будет `"*", то в результате будут получены все потомки элемента по которому осуществляется поиск`. Для совместимости с XHTML следует использовать нижний регистр в имени тега.
Пример
------

```js
// 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
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagname |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


GlobalEventHandlers.onanimationcancel - Интерфейсы веб API

GlobalEventHandlers.onanimationcancel
=====================================

Обработчик события `animationcancel` . Это событие вызывается когда CSS Анимация (CSS Animation) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения `animationend (en-US)` ), например, когда изменяется `animation-name`, анимация удаляется или когда элемент с анимацией оказывается скрыт (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS.

Синтаксис
---------
```

var animCancelHandler = target.onanimationcancel;

target.onanimationcancel = `Function`
```

### Значения

Функция `Function` вызывается когда `animationcancel` происходит событие, указывающее, что CSS-анимация запустилась на объекте *target*, где объект *target* object это HTML-элемент (`HTMLElement`), документ (`Document`), или окно (`Window`). Эта функция принимает один параметр `AnimationEvent` - объект, описывающий событие, которое произошло.

Пример
------

### HTML content

```html
<div class="main">
  <div id="box" onanimationcancel="handleCancelEvent(event);">
    <div id="text">Box</div>
  </div>
</div>

<div class="button" id="toggleBox">Hide the Box</div>

<pre id="log"></pre>
```

### CSS content
```

:root {
  --boxwidth: 50px;
}

.main {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}

#text {
  width: 46px;
  padding: 10px;
  position: relative;
  text-align: center;
  align-self: center;
  color: white;
  font:
    bold 1.4em "Lucida Grande",
    "Open Sans",
    sans-serif;
}
```

Опустим некоторые фрагменты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определённую анимацию `animation`. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события.

```css
#box {
  width: var(--boxwidth);
  height: var(--boxwidth);
  left: 0;
  top: 0;
  border: 1px solid #7788ff;
  margin: 0;
  position: relative;
  background-color: #2233ff;
  display: flex;
  justify-content: center;
  animation: 5s ease-in-out 0s infinite alternate both slideBox;
}
```

Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.

```css
@keyframes slideBox {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: calc(100% - var(--boxwidth));
    top: calc(100% - var(--boxwidth));
  }
}
```

Поскольку анимация описывается как бесконечное число раз, поочерёдное попеременное направление, поле будет скользить назад и вперёд между двумя углами до тех пор, пока не остановится или страница не будет закрыта.

### JavaScript content

Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование `AnimationEvent.animationName` (en-US) и `AnimationEvent.elapsedTime` (en-US), чтобы получить информацию о произошедшем событии.

```js
function log(msg, event) {
  let logBox = document.getElementById("log");

  logBox.innerHTML += msg;

  if (event) {
    logBox.innerHTML +=
      " <code>" +
      event.animationName +
      "</code> at time " +
      event.elapsedTime.toFixed(2) +
      " seconds.";
  }

  logBox.innerHTML += "\n";
}
```

Затем мы устанавливаем обработчик событий `handleCancelEvent() - функцию`, которая вызывается в ответ на событие `animationcancel`. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.

```js
function handleCancelEvent(event) {
  log("Animation canceled", event);
}
```

Теперь добавим переключение `display` между `"flex"` и `"none"` и установим обработчик события щелчка `click (en-US)` на кнопке "Hide/Show":

```js
document.getElementById("toggleBox").addEventListener("click", function () {
  if (box.style.display == "none") {
    box.style.display = "flex";
    document.getElementById("toggleBox").innerHTML = "Hide the box";
  } else {
    box.style.display = "none";
    document.getElementById("toggleBox").innerHTML = "Show the box";
  }
});
```

Таким образом переключение стилей элемента `display: none` приводит к прерыванию анимации. In browsers that support `animationcancel`, the event is fired and this handler is called.

**Примечание:** At this time, no major browser supports `animationcancel`.

### Result

Assembled together, you get this:

If your browser supports `animationcancel`, hiding the box using the button will cause a message to be displayed about the event.

Specification
-------------

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationcancel |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `animationcancel` event this event handler is triggered by.
* `AnimationEvent`


Node.localName - Интерфейсы веб API

Node.localName
==============

Свойство **`Node.localName`** только для чтения, возвращает локальную часть полного имени этого узла.

Синтаксис
---------
```

name = element.localName
```

* `name` это локальное имя в виде строки (для уточнения деталей смотрите Notes ниже)
Пример
------

(Должен быть обработан с XML типом содержимого, таким как `text/xml` или `application/xhtml+xml`.)

```xml
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <script type="application/javascript"><![CDATA[
 function test() {
 var text = document.getElementById('text');
 var circle = document.getElementById('circle');

 text.value = "<svg:circle> has:\n" +
 "localName = '" + circle.localName + "'\n" +
 "namespaceURI = '" + circle.namespaceURI + "'";
 }
 ]]></script>
</head>
<body onload="test()">
  <svg:svg version="1.1"
 width="100px" height="100px"
 viewBox="0 0 100 100">
    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
  </svg:svg>
  <textarea id="text" rows="4" cols="55"/>
</body>
</html>
```

Примечания
----------

Локальное имя узла, является полным именем узла, которое идёт после двоеточия. Полное имя, как правило, используется как часть пространства имён для конкретных XML документов. Например, полное имя `ecomm:partners`, `partners` это локальное имя и `ecomm` это префикс:

```xml
<ecomm:business id="soda\_shop" type="brick\_n\_mortar" xmlns:ecomm="http://example.com/ecomm">
  <ecomm:partners>
    <ecomm:partner id="1001">Tony's Syrup Warehouse
    </ecomm:partner>
  </ecomm:partner>
</ecomm:business>
```

**Примечание:** В Gecko 1.9.2 и ранее, свойство возвращает версию локального имени в верхнем регистре для HTML-элементов в HTML DOMs (в отличии от XHTML элементов в XML DOMs). В более поздних версиях, в соответствии с HTML5, свойство возвращает, в случае внутреннего хранилища DOM, в нижнем регистре для HTML-элементов в HTML DOMs и XHTML элементов в XML DOMs. `tagName` свойство продолжает возвращать в верхнем регистре для HTML-элементов в HTML DOMs.

Для узла другого типа (en-US) отличного от `ELEMENT_NODE` и `ATTRIBUTE_NODE` `localName` всегда `null`.

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

* DOM Level 2 Core: Node.localName
* DOM Level 3 Core: Node.localName
Смотрите также
--------------

* `Node.namespaceURI`


Element.requestPointerLock() - Интерфейсы веб API

Element.requestPointerLock()
============================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

Чтобы отследить успех или ошибку запроса, необходимо обрабатывать события `pointerlockchange (en-US)` и `pointerlockerror (en-US)` на уровне `Document`.

Синтаксис
---------
```

instanceOfElement.requestPointerLock();
```

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-element-requestpointerlock |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Document.pointerLockElement` (en-US)
* `Document.exitPointerLock()` (en-US)
* Pointer Lock


Element.append() - Интерфейсы веб API

Element.append()
================

Метод **`Element.append()`** вставляет `узлы` или `строки с текстом` в конец `Element`. `Строки с текстом` вставляются как `текстовое содержимое`.

Отличия от метода `Node.appendChild()`:

* Метод `Element.append()` позволяет вставлять `строки с текстом`, в то время как `Node.appendChild()` работает только с `узлами`.
* При вызове метод `Element.append()` ничего не возвращает, в то время как `Node.appendChild()` возвращает вставленный `узел`.
* С помощью `Element.append()` можно вставить сразу несколько узлов или строк текста, в то время как `Node.appendChild()` умеет вставлять по одной сущности за раз.
Синтаксис
---------

```js
append(...nodesOrDOMStrings);
```

### Аргументы

`nodesOrDOMStrings`

Один или несколько `узлов` или `строк с текстом`, которые необходимо вставить.

### Исключения

`HierarchyRequestError` `DOMException` (en-US)

Случается, когда узел не может быть вставлен в существующую иерархию элементов.

Примеры
-------

### Вставка элемента

```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]
```

### Вставка текста

```js
let div = document.createElement("div");
div.append("Какой-то текст");

console.log(div.textContent); // "Какой-то текст"
```

### Вставка и текста, и элемента сразу

```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Какой-то текст", p);

console.log(div.childNodes); // NodeList [ #text "Какой-то текст", <p> ]
```

### Область видимости метода нерасширяема

Метод `append()` не работает с оператором `with`. Подробнее читайте в справке по `Symbol.unscopables`.

```js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-append① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `Element.prepend()` (en-US)
* `Node.appendChild()`
* `Element.after()` (en-US)
* `Element.insertAdjacentElement()`
* `NodeList`


Element.attachShadow() - Интерфейсы веб API

Element.attachShadow()
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

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

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

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

* Любой пользовательский элемент с валидным именем
* `<article>`
* `<aside>`
* `<blockquote>`
* `<body>`
* `<div>`
* `<footer>`
* `<h1>` (en-US)
* `<h2>` (en-US)
* `<h3>` (en-US)
* `<h4>` (en-US)
* `<h5>` (en-US)
* `<h6>` (en-US)
* `<header>`
* `<main>`
* `<nav>`
* `<p>`
* `<section>`
* `<span>`
Синтаксис
---------
```

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 `ShadowRoot` (en-US) или null.

### Исключения

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

Примеры
-------

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

```js
//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" });
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-attachshadow① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLElement: pointerover event - Интерфейсы веб API

HTMLElement: pointerover event
==============================

Событие `pointerover` когда указатель входит в границы элемента обрабатываемого события.

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `PointerEvent` (en-US) |
| Event handler property | `onpointerover (en-US)` |

Примеры
-------

С использованием `addEventListener()`:

```js
const para = document.querySelector("p");

para.addEventListener("pointerover", (event) => {
  console.log("Pointer moved in");
});
```

С использованием свойство элемента `onpointerover` :

```js
const para = document.querySelector("p");

para.onpointerover = (event) => {
  console.log("Pointer moved in");
};
```

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

| Specification |
| --- |
| Pointer Events # the-pointerover-event |
| Pointer Events # dom-globaleventhandlers-onpointerover |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `gotpointercapture` (en-US)
* `lostpointercapture` (en-US)
* `pointerenter` (en-US)
* `pointerdown` (en-US)
* `pointermove` (en-US)
* `pointerup` (en-US)
* `pointercancel` (en-US)
* `pointerout` (en-US)
* `pointerleave` (en-US)
* `onpointerover` (en-US) свойство-обработчик события
* Событие на элементах `Document`: событие `pointerover` (en-US)


Element: метод animate() - Интерфейсы веб API

Element: метод animate()
========================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Метод **`animate()`** интерфейса `Element` это быстрый способ создания `Animation`, которая применяется к элементу и сразу запускается. Метод возвращает созданный экземпляр `Animation`.

**Примечание:** Элементы могут иметь несколько анимаций. Чтобы получить список анимаций, которые влияют на элемент, можно использовать метод `Element.getAnimations()` (en-US).

Синтаксис
---------

```js
animate(keyframes, options)
```

### Параметры

`keyframes`

Массив объектов кадров **или** объект кадра, свойства которого являются массивами значений для итерации. Смотрите форматы кадров (en-US) для получения подробной информации.

`options`

**Целое число, представляющее продолжительность анимации** (в миллисекундах) **или** объект, содержащий одно или более свойств, описанных в параметре `options` конструктора `KeyframeEffect()`

`id` Необязательный

Уникальное для `animate()` свойство: строка указывающая на анимацию.

`rangeEnd` Необязательный

Указывает окончание диапазона анимации, JavaScript-эквивалент CSS-свойства `animation-range-end` (en-US). `rangeEnd` может принимать разные типы:

* Строка `normal` (означает отсутствие изменений в диапазоне анимации), CSS-представление смещение анимации `<length-percentage>` (en-US), `<timeline-range-name>` или `<timeline-range-name>` с последующим `<length-percentage>`. Например:
```

"normal"
"entry"
"cover 100%"
```

Смотрите `animation-range` (en-US) для подробного описания доступных значений. Также полезно будет ознакомится с материалом View Timeline Ranges Visualizer, где визуально показывается поведение разных значений.
* Объект, содержащий свойства `rangeName` (строка) и `offset` (свойства `CSSNumericValue` (en-US)), представляющие `<timeline-range-name>` и `<length-percentage>`, описанные в предыдущем пункте. Например:

```js
{
  rangeName: 'entry',
  offset: CSS.percent('100'),
}
```

* `CSSNumericValue` (en-US), описывающее смещение, например:

```js
CSS.percent("100");
```

`rangeStart` Необязательный

Указывает начало диапазона анимации, JavaScript-эквивалент CSS-свойства `animation-range-start` (en-US). `rangeStart` может принимать такие же значения, как `rangeEnd`.

`timeline` Необязательный

Уникальное для `animate()` свойство: `AnimationTimeline` (en-US) для связи с анимацией, JavaScript-эквивалент CSS-свойства `animation-timeline` (en-US). По умолчанию равно `Document.timeline` (en-US).

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

Возвращает `Animation`.

Примеры
-------

### Вращение и масштабирование

В этом примере мы используем метод `animate()` для вращения и масштабирования элемента.

#### HTML

```html
<div class="newspaper">Вращение газеты<br />вызывает головокружение</div>
```

#### CSS

```css
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
```

#### JavaScript

```js
const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});
```

#### Result

### «Спускаясь в кроличью нору»

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

```js
document.getElementById("tunnel").animate(
  [
    // кадры
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // настройки продолжительности
    duration: 1000,
    iterations: Infinity,
  },
);
```

### Явное указание кадров начала и окончания

В современных версиях браузеров можно указывать состояние только начала или окончания анимации (то есть один кадр), а браузер сам определит недостающую информацию. Например, рассмотрим эту простую анимацию — объект кадра выглядит следующим образом:

```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```

Мы указали только состояние окончания анимации, а начальное состояние будет определено автоматически.

### timeline, rangeStart и rangeEnd

Распространённое использование свойств `timeline`, `rangeStart` и `rangeEnd` выглядит следующим образом:

```js
const img = document.querySelector("img");

const timeline = new ViewTimeline({
  subject: img,
  axis: "block",
});

img.animate(
  {
    opacity: [0, 1],
    transform: ["scaleX(0)", "scaleX(1)"],
  },
  {
    fill: "both",
    duration: 1,
    timeline,
    rangeStart: "cover 0%",
    rangeEnd: "cover 100%",
  },
);
```

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

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `Animation`
* `Element.getAnimations()` (en-US)
* `animation-range-end` (en-US), `animation-range-start` (en-US), `animation-timeline` (en-US)
* CSS scroll-driven animations (en-US)
* Web Animations API


Element.scrollIntoView() - Интерфейсы веб API

Element.scrollIntoView()
========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Метод **`Element.scrollIntoView()`** интерфейса `Element` прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван `scrollIntoView()`, стал виден пользователю.

Синтаксис
---------
```

element.scrollIntoView();
element.scrollIntoView(alignToTop); // аргумент типа Boolean
element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object
```

### Параметры

`alignToTop` Необязательный

Параметр типа `Boolean`:

* `true`, верхняя граница элемента будет выровнена по верху видимой области прокрутки. Соответствует `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. Значение по умолчанию.
* `false`, нижняя граница элемента будет выровнена по низу видимой области прокрутки. Соответствует `scrollIntoViewOptions: {block: "end", inline: "nearest"}`

`scrollIntoViewOptions` Необязательный
Экспериментальная возможность

Объект со следующими свойствами:

`behavior` Необязательный

Анимация прокрутки. Принимает значения `"auto"` или `"smooth"`. По умолчанию `"auto"`.

`block` Необязательный

 Вертикальное выравнивание.
 Одно из значений: `"start"`, `"center"`, `"end"` или `"nearest"`. По умолчанию `"start"`.

`inline` Необязательный

 Горизонтальное выравнивание.
 Одно из значений: `"start"`, `"center"`, `"end"` или `"nearest"`. По умолчанию `"nearest"`.

Пример
------

### HTML

```html
<button type="button" class="btn">Нажми на меня</button>

<div class="big"></div>

<div id="box" class="box">Скрытый элемент</div>
```

### CSS

```css
.big {
  background: #ccc;
  height: 300px;
}

.btn {
  font-size: 14px;
}

.box {
  background: lightgreen;
  height: 40px;
}
```

### JavaScript

```js
var hiddenElement = document.getElementById("box");
var btn = document.querySelector(".btn");

function handleButtonClick() {
  hiddenElement.scrollIntoView({ block: "center", behavior: "smooth" });
}

btn.addEventListener("click", handleButtonClick);
```

### Результат

Примечание
----------

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

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollintoview |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `Element.scrollIntoViewIfNeeded()` (en-US)
Non-standard


GlobalEventHandlers.oninput - Интерфейсы веб API

GlobalEventHandlers.oninput
===========================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Обработчик события `input` (en-US) в окне. Событие ввода возникает при изменении значения элемента `<input>`.

Это событие пузырится. Если он поддерживается в окне, он поддерживается и в `<input>`.

Example
-------

```html
<script>
 window.addEventListener(
 "input",
 function (e) {
 console.log("input event detected! coming from this element:", e.target);
 },
 false,
 );
</script>

<input placeholder="type here and see console." />
```

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

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* An HTML5 Browser maze, oninput support
* Fixing oninput in IE Using html5Widgets includes polyfill for IE6-8
* Mathias Bynens suggests binding to both input and keydown
* oninput event | dottoro has notes about bugginess in IE9
* Bug 312094 - Add support for <select oninput>


transitionend - Интерфейсы веб API

transitionend
=============

Событие `transitionend` срабатывает, когда CSS transition (en-US) закончил своё выполнение. В случае, когда анимация удаляется до её завершения(например, если transition-property [en-US] (en-US) удаляется), то событие не срабатывает.

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

Интерфейс
`TransitionEvent` (en-US)
Всплывает

Да

Отменяемое

Да

Элемент
`document`, `element`
Действие по умолчанию

Нет

Свойства
--------

| Property | Type | Description |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Только для чтения  | `DOMString` | The type of event. |
| `bubbles` Только для чтения  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Только для чтения  | `Boolean` | Whether the event is cancellable or not. |
| `propertyName` Только для чтения  | `DOMString` | The name of the CSS property associated with the transition. |
| `elapsedTime` Только для чтения  | Float | The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of `transition-delay`. |
| `pseudoElement` Только для чтения  | `DOMString` | The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |

Пример
------

```js
/\*
 \* Обрабатывать событие transitionend на определённом элементе, т.е. #slidingMenu
 \* Затем, вызвать определённую функцию, т.е. showMessage()
 \*/
function showMessage() {
  alert("Transition закончил своё выполнение");
}

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", showMessage, false);
```

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

| Specification |
| --- |
| CSS Transitions # transitionend |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Также
-----

* The `TransitionEvent` (en-US) interface and the `transitionend` (en-US) event.


blur (event) - Интерфейсы веб API

blur (event)
============

Событие `blur` вызывается когда элемент теряет фокус. Главное отличие между этим событием и `focusout` (en-US) только в том что у последнего есть фаза всплытия.

Основная информация
-------------------

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

DOM L3

Интерфейс
`FocusEvent` (en-US)
Всплытие

Нет

Отменяемый

Нет

Цель

Элемент

Действие по умолчанию

Нет

Значение `Document.activeElement` меняется в зависимости от браузера во время выполнения этого события (Firefox bug 452307): IE10 устанавливает его к элементу на который будет перемещён фокус, в то время как Firefox и Chrome обычно устанавливают его к `body` документа

Свойства
--------

| Property | Type | Description |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Event target (DOM element) |
| `type` Только для чтения  | `DOMString` | The type of event. |
| `bubbles` Только для чтения  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Только для чтения  | `Boolean` | Whether the event is cancellable or not. |
| `relatedTarget` Только для чтения  | `EventTarget` (DOM element) | null |

Делегирование события
---------------------

Есть два способа реализовать делегирование этого события: использовать событие `focusout` в браузерах которые поддерживают его (все браузеры, Firefox с 52+), или установить параметр "useCapture" метода `addEventListener` (en-US) на `true`:

### HTML Content

```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### JavaScript Content

```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```

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

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Похожие события
---------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


Element.tagName - Интерфейсы веб API

Element.tagName
===============

Описание
--------

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

Синтаксис
---------
```

var elementName = element.tagName;
```

* **`elementName`** это строка, содержащая название HTML-тега элемента **`element`**.

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

**Примечание:** Существует более древнее и обыденное свойство nodeName!

Пример
------

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

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

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

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

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

* DOM Level 2 Core: tagName
* HTML 5: APIs in HTML documents


Node.prefix - Интерфейсы веб API

Node.prefix
===========

Свойство **`Node.prefix`** только для чтения, возвращающее префикс пространства имён указанного узла или `null,` если не указан префикс. Это свойство только для чтения.

Синтаксис
---------
```

string = element.prefix
```

Пример
------

Следующее выражение выведет "x".

```xml
<x:div onclick="alert(this.prefix)"/>
```

Примечание
----------

Это будет работать только когда используется соответствующий парсер пространства имен. т.е. когда документ обработан как XML mime-type. Это не будет работать для документов HTML.

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

* Node.prefix (введено в употребление в DOM2)
Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.className - Интерфейсы веб API

Element.className
=================

Описание
--------

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

**Примечание:** Кстати, у **className** есть большой брат. Его зовут `element.classList` - более мощный и функциональный метод для работы с классами элемента.

Синтаксис
---------
```

var cName = elem.className;
elem.className = cName;
```

* ***cName*** - строка. Если нужно указать несколько классов, они указываются через пробел.
Пример
------
```

<div class="booble example"> </div>
```

```js
var elm = document.querySelector("div");

alert(elm.className); //"booble example"

elm.className = "class1 class2 class3";
alert(elm.className); //"class1 class2 class3"
```

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* DOM Level 2 HTML: className
Смотрите также
--------------

* `element.classList`


Element.getElementsByClassName() - Интерфейсы веб API

Element.getElementsByClassName()
================================

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

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

Syntax
```

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

* **elements** — `HTMLCollection` содержащий найденные элементы
* **names** — строка, содержащая в себе имена классов; имена разделяются пробелами
* *element* — любой `Element` в документе (в котором осуществляется выборка)
Examples
--------

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

```js
element.getElementsByClassName("test");
```

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

```js
element.getElementsByClassName("red test");
```

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

```js
document.getElementById("main").getElementsByClassName("test");
```

Мы так же можем использовать все методы из `Array.prototype` на любом `HTMLCollection` путём передачи `HTMLCollection` в метод как значение *this*. Так мы найдём все `<div>` элементы, которые имеют класс test:

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getelementsbyclassname |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Элемент.scrollTop - Интерфейсы веб API

Элемент.scrollTop
=================

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

Синтаксис
---------
```

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

\_После выполнения этого кода, \_`intElemScrollTop` - целое число пикселей, на которое контент `element` был прокручен от верха.
```

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

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

* Если элемент не может быть прокручен (т.е. у него нет переполнения или если элемент **не прокручиваем**), `scrollTop` устанавливается в `0`.
* Если значение меньше `0`, `scrollTop` устанавливается в `0`.
* Если установлено значение больше, чем максимум прокручиваемого контента, `scrollTop` устанавливается в максимум.
Пример
------

padding-top

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

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

padding-bottom

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

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

| Specification |
| --- |
| CSSOM View Module # dom-element-scrolltop |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ссылки
------

* W3C Draft CSSOM View Module
* MSDN's scrollTop definition
* MSDN's Measuring Element Dimension and Location


Element.clientWidth - Интерфейсы веб API

Element.clientWidth
===================

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

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

Синтаксис
---------
```

var intElemClientWidth = element.clientWidth;
```

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

Пример
------

![Пример элемента с большими отступами, границей и полем. clientWidth — это внутренняя ширина элемента, включая его отступы и исключая поля, границы и вертикальную полосу прокрутки.](/ru/docs/Web/API/Element/clientWidth/dimensions-client.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-element-clientwidth |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `HTMLElement.offsetWidth`
* `Element.scrollWidth` (en-US)
* Determining the dimensions of elements (en-US)


Element.clientLeft - Интерфейсы веб API

Element.clientLeft
==================

Ширина от левого края элемента в пикселях. При наличии overflow заключает в себя ширину от вертикального scrollbar для письма справа налево.
`clientLeft` не включает в себя ни левый padding ни margin с той же стороны. `clientLeft` только для чтения.

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

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

**Примечание:** Это свойство округлит значение к целому числу. Если нужно дробное значение используйте `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*

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

| Specification |
| --- |
| CSSOM View Module # dom-element-clientleft |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element.clientHeight - Интерфейсы веб API

Element.clientHeight
====================

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

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

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

Синтаксис
---------
```

var h = element.clientHeight;
```

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

Пример
------

![Как свойство clientHeight определяет внутреннюю высоту элемента с учетом высоты и заполнения](/ru/docs/Web/API/Element/clientHeight/dimensions-client.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* Determining the dimensions of elements (en-US)


mouseleave - Интерфейсы веб API

mouseleave
==========

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

`mouseleave` и `mouseout (en-US)` схожи, но отличаются тем, что `mouseleave` не всплывает, а `mouseout` всплывает.
 Это значит, что `mouseleave` срабатывает, когда курсор выходит за границы элемента *и* всех его дочерних элементов, в то время как `mouseout` срабатывает, когда курсор покидает границы элемента *или* одного из его дочерних элементов (даже если курсор все ещё находится в пределах элемента).

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

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

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

DOM L3

Интерфейс
`MouseEvent`
Bubbles

Нет

Отменяемое

Нет

Цель
`Element()` (en-US)
Действие по умолчанию

Нет

Свойства
--------

| Свойство | Тип | Описание |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Целевой элемент события (вышележащий элемент в DOM дереве). |
| `type` Только для чтения  | `DOMString` | Тип события. |
| `bubbles` Только для чтения  | Boolean | Поднимается ли событие вверх как принято или нет |
| `cancelable` Только для чтения  | `Boolean` | Является ли событие отменяемым или нет? |
| `view` Только для чтения  | `WindowProxy` | `document.defaultView` (`window` объекта document) |
| `detail` Только для чтения  | `long` (`float`) | 0. |
| `currentTarget` Только для чтения  | `EventTarget` | Целевой узел (элемент), который используется обработчиком события. |
| `relatedTarget` Только для чтения  | `EventTarget` | Для `mouseover`, `mouseout`, `mouseenter` и `mouseleave` событий: цель дополнительного события (`mouseleave` цель в случае наступления `mouseenter` события). `null` иначе. |
| `screenX` Только для чтения  | long | X координата указателя мыши в глобальных (относительно экрана) координатах. |
| `screenY` Только для чтения  | long | Y координата указателя мыши в глобальных (относительно экрана) координатах. |
| `clientX` Только для чтения  | long | X координата указателя мыши в локальных (относительно DOM содержимого) координатах. |
| `clientY` Только для чтения  | long | Y координата указателя мыши в локальных (относительно DOM содержимого) координатах. |
| `button` Только для чтения  | unsigned short | Всегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does). |
| `buttons` Только для чтения  | unsigned short | The 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` Только для чтения  | float | The 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` Только для чтения  | boolean | `true` if the control key was down when the event was fired. `false` otherwise. |
| `shiftKey` Только для чтения  | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. |
| `altKey` Только для чтения  | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. |
| `metaKey` Только для чтения  | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. |

Примеры
-------

The `mouseout` (en-US) 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.

```html
<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>
```

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

| Specification |
| --- |
| UI Events # event-type-mouseleave |
| HTML Standard # handler-onmouseleave |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `mousedown (en-US)`
* `mouseup (en-US)`
* `mousemove (en-US)`
* `click (en-US)`
* `dblclick (en-US)`
* `mouseover (en-US)`
* `mouseout (en-US)`
* `mouseenter (en-US)`
* `mouseleave (en-US)`
* `contextmenu (en-US)`


GlobalEventHandlers.oncontextmenu - Интерфейсы веб API

GlobalEventHandlers.oncontextmenu
=================================

Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window.

Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu).

Обратите внимание что это событие будет происходить вместе с другими событиями right-click и не зависит от "contextmenu" атрибута элемента.

Синтаксис
---------
```

window.oncontextmenu = funcRef;
//funcRef - ссылка на функцию, которая будет вызвана в ответ на событие "oncontextmenu", происходящее при клике правой кнопкой мыши внутри объекта window.
```

Пример
------

Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.

```js
document.oncontextmenu = function () {
  // Используйте объект "document" вместо "window" для совместимости с IE8.
  return false;
};

window.addEventListener(
  "contextmenu",
  function (e) {
    // Не совместимо с IE младше 9 версии
    e.preventDefault();
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # event-type-contextmenu |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


keyup - Интерфейсы веб API

keyup
=====

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

| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `KeyboardEvent` |
| Event handler property | `onkeyup` (en-US) |

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

Примеры
-------

### Примеры addEventListener keyup

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

```html
<input
 placeholder="Кликните здесь, затем нажмите и отпустите клавишу."
 size="40" />
<p id="log"></p>
```

```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### Аналог onkeyup

```js
input.onkeyup = logKey;
```

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

| Specification |
| --- |
| UI Events # event-type-keyup |
| HTML Standard # handler-onkeyup |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `input`
* `keydown`
* `keypress`
* Document `keyup` event (en-US)


Element.innerHTML - Интерфейсы веб API

Element.innerHTML
=================

Свойство интерфейса `Element` **`innerHTML`** устанавливает или получает HTML или XML разметку дочерних элементов.

**Примечание:** Если узлы `<div>`, `<span>`, или `<noembed>` (en-US) имеют дочерние текстовые узлы, содержащие символы `(&), (<),` или `(>)`, `innerHTML` вернёт эти символы как &amp, &lt и &gt соответственно. Используйте `Node.textContent` для получения правильной копии содержимого этих текстовых узлов.

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

Синтаксис
---------

```js
const content = element.innerHTML;

element.innerHTML = htmlString;
```

### Значение

Строка `DOMString`, которая содержит части HTML разметки. Установка значения `innerHTML` удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке *htmlString.*

### Исключения

`SyntaxError`

Возникает при попытке установить значение `innerHTML` строкой, в которой содержится неправильно сформированный HTML.

`NoModificationAllowedError`

Возникает при попытке вставить HTML в узел, у которого родителем является `Document`.

Примечания
----------

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

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

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

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

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

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

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

```js
const name = "John";
// предполагая, что 'el' является HTML DOM-элементом.
el.innerHTML = name; // безвредный в этом случае

// ...

name = "<script>alert('Я Джон в раздражающем alert!')</script>";
el.innerHTML = name; // безвредный в этом случае
```

Хотя это может выглядеть как XSS-атака, результат безопасный. HTML5 указывает на тег `<script>` вставленный через InnerHTM должен не выполнится.

Однако, есть способы запустить JavaScript без использования элементов `<script>`, так что есть риск безопасности всякий раз, когда вы используете innerHTML для набора строк, над которыми у вас нет контроля. Например:

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

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

Пример
------

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

### JavaScript

```js
function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Регистрация событий мыши внутри этого контейнера...");
```

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

Мы добавляем второй метод, который логирует информацию о событиях на основе `MouseEvent` (например, `mousedown (en-US)`, `click (en-US)`, и `mouseenter (en-US)`):

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

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

```js
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 довольно простой для нашего примера.

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

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

### CSS

Для нашего примера используем следующие 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;
}
```

### Результат

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

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

| Specification |
| --- |
| DOM Parsing and Serialization # dom-innerhtml-innerhtml |

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

* `innerDOM` - Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.
* `Element.insertAdjacentHTML` - Альтернатива для innerHTML, позволяющая добавлять новый HTML.
* jssaxparser - Более надёжным (хотя и более тяжёлым) решением, чем innerDOM (поддерживает парсинг с пространствами имён, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку значительно проще).
* Эффективность соображений: quirksmode.


Element.getAttribute() - Интерфейсы веб API

Element.getAttribute()
======================

Описание
--------

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

Синтаксис
---------
```

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

где

* `attribute` - переменная, которой будет присвоено значение `attributeName`.
* `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()`, если может быть такое, что выбранный элемент не будет содержать искомого атрибута.

Методы DOM имеют дело с атрибутами элементов:

| Не знают пространства имён, наиболее часто используемые методы | Вариант, знающий пространство имён (Уровень DOM 2) | Уровень DOM 1 методы для работы с `Attr` узлами напрямую (используется редко) | Уровень DOM 2 знает о методах пространства имён для работы с `Attr` узлами напрямую (используется редко) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` (en-US) | `setAttributeNode` (en-US) | `setAttributeNodeNS` (en-US) |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` (en-US) | `getAttributeNodeNS` (en-US) |
| `hasAttribute` (DOM 2) | `hasAttributeNS` (en-US) | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` (en-US) | `removeAttributeNode` (en-US) | - |

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

* DOM Level 2 Core: getAttribute (представлено в DOM Level 1 Core)
* HTML 5: APIs in HTML documents


Element.attributes - Интерфейсы веб API

Element.attributes
==================

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

Синтаксис
---------
```

var attr = element.attributes;
```

Пример
------

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

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

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

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

```html
<!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
--------------

| Specification |
| --- |
| DOM Standard # dom-element-attributes |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `NamedNodeMap`, the interface of the returned object
* Cross-browser compatibility considerations: on quirksmode


Element.closest() - Интерфейсы веб API

Element.closest()
=================

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

Синтаксис
---------
```

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

* **`selectors`** - строка, а точнее `DOMString`, содержащая CSS-селектор, к примеру: "#id", ".class", "div" ...
* Результат - элемент DOM (`Element`), либо null.
Исключения
----------

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

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

```js
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() (или префиксный эквивалент) есть полифил:

```js
(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 и может жутко тормозить.

```js
(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);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-closest① |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Интерфейс `Element`.
* Синтаксис селекторов
* Другие методы, принимающие селекторы: `element.querySelector()` и `element.matches()`.


GlobalEventHandlers.onscroll - Интерфейсы веб API

GlobalEventHandlers.onscroll
============================

Обработчик для события скролла.

Syntax
------
```

element.onscroll = functionReference
```

### Parameters

`functionReference` is a reference to a function to be executed when `element` is scrolled.

Example
-------

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
 #container {
 position: absolute;
 height: auto;
 top: 0;
 bottom: 0;
 width: auto;
 left: 0;
 right: 0;
 overflow: auto;
 }

 #foo {
 height: 1000px;
 width: 1000px;
 background-color: #777;
 display: block;
 }
 </style>
  </head>
  <body>
    <div id="container">
      <div id="foo"></div>
    </div>

    <script type="text/javascript">
 document.getElementById("container").onscroll = function () {
 console.log("scrolling");
 };
 </script>
  </body>
</html>
```

Notes
-----

The `scroll` event is raised when the user scrolls the contents of an element. `Element.onscroll` is equivalent to `element.addEventListener("scroll" ... )`.

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

| Specification |
| --- |
| CSSOM View Module # eventdef-document-scroll |
| HTML Standard # handler-onscroll |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Element: событие mouseup - Интерфейсы веб API

Element: событие mouseup
========================

Событие **`mouseup`** возникает, когда отпускается кнопка на устройстве ввода (таком как мышь или трекпад) и указатель находится внутри `элемента`.

События `mouseup` являются противоположностью событиям `mousedown`.

Синтаксис
---------

Используйте имя события в методе `addEventListener()` или при установке обработчика события.

```js
addEventListener("mouseup", (event) => {});

onmouseup = (event) => {};
```

Тип события
-----------

`MouseEvent`, наследуется от `Event`.

Event

UIEvent

(en-US)

MouseEventСвойства события
----------------

*Этот интерфейс также наследует свойства родителей, `UIEvent` (en-US) и `Event`.*

`MouseEvent.altKey` (en-US) Только для чтения

Возвращает `true` если во время события была нажата клавиша `alt`.

`MouseEvent.button` Только для чтения

Номер кнопки, которая была нажата (если есть такая информация).

`MouseEvent.buttons` Только для чтения

Кнопки, которые были нажаты (если есть такая информация).

`MouseEvent.clientX` Только для чтения

Координата X указателя мыши в системе координат области просмотра (en-US).

`MouseEvent.clientY` Только для чтения

Координата Y указателя мыши в системе координат области просмотра (en-US).

`MouseEvent.ctrlKey` Только для чтения

Возвращает `true` если во время события была нажата клавиша `control`.

`MouseEvent.layerX` (en-US)
Non-standard
 Только для чтения

Возвращает координату события по горизонтали относительно текущего слоя.

`MouseEvent.layerY` (en-US)
Non-standard
 Только для чтения

Возвращает координату события по вертикали относительно текущего слоя.

`MouseEvent.metaKey` (en-US) Только для чтения

Возвращает `true` если во время события была нажата клавиша `meta`.

`MouseEvent.movementX` (en-US) Только для чтения

Координата X указателя относительно позиции последнего события `mousemove` (en-US).

`MouseEvent.movementY` (en-US) Только для чтения

Координата Y указателя относительно позиции последнего события `mousemove` (en-US).

`MouseEvent.offsetX` Только для чтения

Координата X указателя относительно границ целевого узла.

`MouseEvent.offsetY` (en-US) Только для чтения

Координата Y указателя относительно границ целевого узла.

`MouseEvent.pageX` Только для чтения

Координата X указателя относительно документа.

`MouseEvent.pageY` (en-US) Только для чтения

Координата Y указателя относительно документа.

`MouseEvent.relatedTarget` (en-US) Только для чтения

Вторичная цель события, если она есть.

`MouseEvent.screenX` Только для чтения

Координата X указателя в экранных координатах (en-US).

`MouseEvent.screenY` (en-US) Только для чтения

Координата Y указателя в экранных координатах (en-US).

`MouseEvent.shiftKey` Только для чтения

Возвращает `true` если во время события была нажата клавиша `shift`.

`MouseEvent.mozInputSource` (en-US)
Non-standard
 Только для чтения

 Тип устройства, вызвавшего событие (одна из констант `MOZ_SOURCE_*`).
 Помогает определить, было ли событие вызвано мышью или событием касания (что может повлиять на степень точности, с которой следует интерпретировать координаты).

`MouseEvent.webkitForce` (en-US)
Non-standard
 Только для чтения

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

`MouseEvent.x` (en-US) Только для чтения

Синоним для `MouseEvent.clientX`.

`MouseEvent.y` (en-US) Только для чтения

Синоним для `MouseEvent.clientY`.

Примеры
-------

Смотрите примеры кода в описании события `mousemove` (en-US).

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

| Specification |
| --- |
| UI Events # event-type-mouseup |
| HTML Standard # handler-onmouseup |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Введение в события
* `mousedown`
* `mouseup`
* `mousemove` (en-US)
* `click`
* `dblclick` (en-US)
* `mouseover` (en-US)
* `mouseout` (en-US)
* `mouseenter`
* `mouseleave`
* `contextmenu`


keypress - Интерфейсы веб API

keypress
========

Событие `keypress` происходит когда нажимается символьная клавиша, то есть клавиша которая создаёт символ. Пример таких клавиш это буквы, цифры, знаки пунктуации и т.д. Примеры клавиш которые не создают символы, это клавиши модификаторы, такие как: `Alt`, `Shift`, `Ctrl`, or `Meta`.

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

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

DOM L3
Устарело

Интерфейс

KeyboardEvent (en-US)

Bubbles

Yes

Cancelable

Yes

Цель

Document, Element

Действие по умолчанию

Varies: `keypress` event; launch text composition system; `blur` and `focus` events; `DOMActivate` event; other event

Свойства
--------

| Свойства | Тип | Описание |
| --- | --- | --- |
| `target` Только для чтения  | EventTarget | Цель события (самая верхняя цель в дереве DOM). |
| `type` Только для чтения  | DOMString | Тип события. |
| `bubbles` Только для чтения  | Boolean | Whether the event normally bubbles or not |
| `cancelable` Только для чтения  | Boolean | Отменяется ли событие или нет |
| `view` Только для чтения  | WindowProxy | `document.defaultView`
 (`window` of the document)
  |
| `detail` Только для чтения  | `long` (`float`) | 0. |
| `target` Только для чтения  | EventTarget (DOM element) |
 Сосредоточенный элемент, обрабатывающий ключевое событие, корневой
 элемент, если не выделен подходящий элемент ввода.
  |
| `char` Только для чтения  | DOMString (string) |
 The character value of the key. If the key corresponds to a printable
 character, this value is a non-empty Unicode string containing that
 character. If the key doesn't have a printable representation, this is
 an empty string. See
 key names and char values
 for the detail.

**Примечание:** Если ключ используется в качестве
 макроса, который вставляет несколько символов, значением этого
 атрибута является вся строка, а не только первый символ.
  |
| `key` Только для чтения  | DOMString (string) |
 The key value of the key represented by the event. If the value has a
 printed representation, this attribute's value is the same as the
 `char` property. Otherwise, it's one of the key value
 strings specified in
 Key values. If the key can't be identified, its value is the string
 "Unidentified". See
 key names and char values
 for more details. Read Only.
  |
| `code` Только для чтения  | DOMString (string) |
 Holds a string that identifies the physical key being pressed. The value
 is not affected by the current keyboard layout or modifier state, so a
 particular key will always return the same value.
  |
| `charCode` Только для чтения  | Unsigned long (int) |
 The Unicode reference number of the key; this attribute is used only by
 the
 `keypress` (en-US)
 event. For keys whose `char` attribute contains multiple
 characters, this is the Unicode value of the first character in that
 attribute.

**Warning:** This attribute is deprecated; you should use
 `char` instead, if available.
  |
| `keyCode` Только для чтения  | Unsigned long (int) |
 A system and implementation dependent numerical code identifying the
 unmodified value of the pressed key. This is usually the decimal ASCII
 (RFC 20) or Windows 1252 code corresponding to the key; see
 Virtual key codes for a list of common
 values. If the key can't be identified, this value is 0.

**Warning:** This attribute is deprecated; you should use
 `key` instead, if available.
  |
| `which` Только для чтения  | Unsigned long (int) |
 A system and implementation dependent numeric code identifying the
 unmodified value of the pressed key; this is usually the same as
 `keyCode`.

**Warning:** This attribute is deprecated; you should use
 `key` instead, if available.
  |
| `location` Только для чтения  | long (float) | The location of the key on the device. |
| `repeat` Только для чтения  | boolean | `true` if a key has been depressed long enough to trigger key
 repetition, otherwise `false`.
  |
| `locale` Только для чтения  | string |
 The language code for the key event, if available; otherwise, the empty
 string.
  |
| `ctrlKey` Только для чтения  | boolean | `true` if the control key was down when the event was fired.
 `false` otherwise.
  |
| `shiftKey` Только для чтения  | boolean | `true` if the shift key was down when the event was fired.
 `false` otherwise.
  |
| `altKey` Только для чтения  | boolean | `true` if the alt key was down when the event was fired.
 `false` otherwise.
  |
| `metaKey` Только для чтения  | boolean | `true` if the meta key was down when the event was fired.
 `false` otherwise.
  |

Примечания
----------

Chrome не запускает событие `keypress` для известных сочетаний клавиш (reference). Какие сочетания клавиш известны, зависит от системы пользователя. Используйте событие `keydown` для реализации сочетаний клавиш.

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

* `keydown (en-US)`
* `keyup (en-US)`
* `keypress (en-US)`
* `input (en-US)`
Пример
------

```html
<!doctype html>
<html>
  <head>
    <script>
 "use strict";

 document.addEventListener("keypress", (event) => {
 const keyName = event.key;

 alert("keypress event\n\n" + "key: " + keyName);
 });
 </script>
  </head>
  <body></body>
</html>
```