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

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

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

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

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

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

vartop = element.clientTop;
```

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

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

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

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

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

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

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

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

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

* MSDN: Measuring Element Dimension and Location
Element.hasAttribute()
======================

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

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

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


* `Переменная result` хранит возвращённое значение `true` или `false`.
* `attName` это String представляющая имя атрибута.
Пример
------


```js
// проверка, существует ли атрибут, перед тем как задать значение
var d = document.getElementById("div1");

if (d.hasAttribute("align")) {
  d.setAttribute("align", "center");
}
```

Замечания
---------

Методы 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) | - |

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.createShadowRoot()
==========================

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.createShadowRoot` чтобы создать экземпляр shadow DOM (en-US). После создания shadow DOM, он всегда будет привязан к существующему элементу. После создания shadowDOM, элемент к которому он привязан будет называться Теневой корень (shadowRoot) .

**Примечание:** This method has been deprecated in favor of attachShadow.

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

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

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

Отсутствуют

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

Возвращает `ShadowRoot` (en-US).

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.removeAttribute()
=========================

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

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

element.removeAttribute(attrName);
```


* `attrName` строка, имя атрибута который должен быть удалён с *element*.
Пример
------
```

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

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

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

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

Методы 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: removeAttribute (introduced in DOM Level 1 Core)
Element.insertAdjacentElement()
===============================

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

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

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

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

position

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

* `'beforebegin'`: перед самим элементом `targetElement`.
* `'afterbegin'`: внутри элемента `targetElement`, перед его первым потомком.
* `'beforeend'`: внутри элемента `targetElement`, после его последнего потомка.
* `'afterend'`: после самого элемента `targetElement`.

element

Элемент, добавляемый в DOM-дерево.

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

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

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

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

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

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


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

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


```js
beforeBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

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


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

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

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

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

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

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

* `Element.insertAdjacentHTML()`
* `Element.insertAdjacentText()`
* `Node.insertBefore()`
* `Node.appendChild()` (такой же эффект со значением position `beforeend`)
Элемент.scrollLeft
==================

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

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

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

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


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

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


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

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


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

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

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

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

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

Свойство **onclick** возвращает обработчик события `click` на текущем элементе.

**Примечание:** При использовании обработчика события `click` для вызова любого действия, убедитесь, что событие `keydown` имеет такое же действие. Это нужно для того, чтобы пользователи, которые не используют мышь или тачскрин могли использовать то же действие.

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

element.onclick = functionRef;
```


где *functionRef* это функция - зачастую это имя функции, которая объявлена где-то в другом месте или же *функциональное выражение*. См. "JavaScript Guide:Functions".

Единственный аргумент, переданный в определённую функцию обработчик события это `MouseEvent` объект. `this` внутри обработчика будет указывать на элемент, на котором было вызвано событие.

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


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>onclick event example</title>
    <script>
 function initElement() {
 var p = document.getElementById("foo");
 // NOTE: showAlert(); или showAlert(param); так НЕ сработает.
 // Нужно использовать ссылку на функцию, но не вызов функции.
 p.onclick = showAlert;
 }

 function showAlert(event) {
 alert("onclick Event detected!");
 }
 </script>
    <style>
 #foo {
 border: solid blue 2px;
 }
 </style>
  </head>
  <body onload="initElement();">
    <span id="foo">My Event Element</span>
    <p>click on the above element.</p>
  </body>
</html>
```


Или же вы можете использовать анонимную функцию, как здесь:


```js
p.onclick = function (event) {
  alert("moot!");
};
```

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

Событие `click` возникает, когда пользователь кликает на элемент. Событие `click` возникнет после событий `mousedown` и `mouseup`.

С данным свойством только один обработчик события `click` может быть назначен объекту. Возможно, вместо данного метода, вам стоит обратить внимание на метод `EventTarget.addEventListener()`, т.к. он более гибкий и является частью спецификации DOM Events.

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

| Specification |
| --- |
| UI Events # event-type-click |
| HTML Standard # handler-onclick |

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

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

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

* `click (en-US)` event
* Related event handlers
    + `GlobalEventHandlers.onauxclick` (en-US)
    + `GlobalEventHandlers.ondblclick` (en-US)
Element.setAttribute()
======================

Добавляет новый атрибут или изменяет значение существующего атрибута у выбранного элемента.Синтаксис
---------
```

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


* `name` - имя атрибута (строка).
* `value` - значение атрибута.
Пример
------

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


```html
<button>Hello World</button>
```



```js
var b = document.querySelector("button");

b.setAttribute("disabled", "disabled");
```

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

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

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

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

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

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

Методы 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) | - |

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.getBoundingClientRect()
===============================

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

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

domRect = element.getBoundingClientRect();
```

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

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

![Explanation of DOMRect values](/ru/docs/Web/API/Element/getBoundingClientRect/rect.png)

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

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

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

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

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


```js
// Для scrollX
(((t = document.documentElement) || (t = document.body.parentNode)) &&
typeof t.scrollLeft == "number"
  ? t
  : document.body
).scrollLeft(
  // Для scrollY
  ((t = document.documentElement) || (t = document.body.parentNode)) &&
    typeof t.scrollTop == "number"
    ? t
    : document.body,
).scrollTop;
```

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


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

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

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

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

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

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

* `getClientRects()` (en-US)
* MSDN: `getBoundingClientRect`
* MSDN: `ClientRect`, более ранняя версия `DOMRect`
* 
* `Element.getClientRects()` (en-US)
Node.namespaceURI
=================

Свойство **`Node.namespaceURI`** только для чтения, возвращает пространство имён URI узла или `null,` если узел не находится в пространстве имён (только для чтения). Хотя узел документа, возвращает пространство имён XML для текущего документа.

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

namespace = node.namespaceURI
```

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

В этом сниппете, узел рассматривается для его localName (en-US) и его `namespaceURI`. Если `namespaceURI` возвращает XUL пространство имён и `localName` возвращая "browser", затем узел XUL согласует `<browser/>`.


```js
if (
  node.localName == "browser" &&
  node.namespaceURI ==
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // this is a XUL browser
}
```

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

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

В Firefox 3.5 и выше, пространство имён URI для HTML-элементов в HTML документах это `null`. В более поздних версиях, в соответствии с HTML5, это `http://www.w3.org/1999/xhtml` как в XHTML.

Для узлов любого nodeType (en-US) кроме `ELEMENT_NODE` и `ATTRIBUTE_NODE` значение `namespaceURI` всегда `null`.

Вы можете создать элемент с конкретным `namespaceURI` используйте метод DOM Level 2 document.createElementNS.

Через пространство имён в XML спецификации, атрибуты не наследуют пространство имён для элемента к которому он прикреплён. Если у атрибута не задано явно пространство имён, он не имеет пространства имён.

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

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

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

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

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

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

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

var elCount = Node.childElementCount;
```


* **`elCount`** - целое число, количество дочерних элементов узла **Node.**
* **`Node`** - объект, представляющий собой `Document`, `DocumentFragment` или `Element`.

**Предупреждение:** А наш добрый друг **Internet Explorer** в **6, 7** и **8** версиях ошибочно считает элементами комментарии в HTML-коде (`Comment`).

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


```js
var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
  // здесь нужный код..
}
```

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

| Specification |
| --- |
| DOM Standard # dom-parentnode-childelementcount |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.querySelectorAll()
==========================

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

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

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

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


где

* `elementList —` результирующий список объектов типа element (результаты).
* `baseElement —` элемент, над которым выполняется функция.
* `selectors —` текст селектора (en-US) для выбора нужных элементов.
Примеры
-------

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


```js
var matches = document.body.querySelectorAll("p");
```


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


```js
var el = document.querySelector("#test");
var matches = el.querySelectorAll("div.highlighted > p");
```


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


```js
var matches = el.querySelectorAll("iframe[data-src]");
```

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

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

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

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

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

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

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

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

* Selectors API
Смотрите также
--------------

* `document.querySelectorAll` (en-US)
* `document.querySelector` (en-US)
* Сниппеты для `querySelector`