recursal/MDN huggingface dataset:
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, "&amp;") // embed ampersand symbols
        .replace(/</g, "&lt;"), // 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()
==============================

**`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.
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()
============================

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

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

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

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

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

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

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

Возвращает 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
===========

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

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

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