recursal/MDN huggingface dataset:
Element.outerHTML
=================

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

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

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

var content = element.outerHTML;
```


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

element.outerHTML = content;
```


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

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

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


```js
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
console.log(d.outerHTML);

// строка '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// выведена в окно консоли
```


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


```js
// HTML:
// <div id="container"><div id="d">Это div.</div></div>

container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // логирует "DIV"

d.outerHTML = "<p>Этот параграф заменил исходный div.</p>";
console.log(container.firstChild.nodeName); // логирует "P"

// div #d больше не часть дерева документа,
// новый параграф заменил его.
```

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

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


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


Обратите внимание, когда произойдёт изменение элемента в документе, переменная, у которой было установлено свойство `outerHTML`, будет по-прежнему хранить ссылку на оригинальный элемент:


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

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

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

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

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

See also
--------

* MSDN: outerHTML Property
Element.scrollTo()
==================

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

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

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

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

* `x-coord` координаты пикселя по горизонтальной оси элемента, который необходимо отобразить вверху слева.
* `y-coord` координаты пикселя по вертикальной оси элемента, который необходимо отобразить вверху слева.

- or -

* `options` как объект `ScrollToOptions` (en-US), с тремя свойствами.
Примеры
-------


```js
element.scrollTo(0, 1000);
```


С помощью `options`:


```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

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

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

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

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

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

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`
Element.querySelector()
=======================

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

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

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


* `element` и `baseElement` это `element` объекты.
* `selectors` - это группа селекторов (en-US) для поиска совпадения.
Пример
------

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


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

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

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

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

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

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

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

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

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

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

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

* `element.querySelectorAll()`
* `document.querySelector()`
* `document.querySelectorAll()`
* Фрагменты кода для querySelector
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
=======

Событие **`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
============

Свойство **`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
===============================================

Свойство **`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()
================

Метод **`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
==========

Свойство **`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()
============================

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

Событие 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()
=======================

Метод **`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()
=================

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

Метод **`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.