recursal/MDN huggingface dataset:
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
=================

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

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

Ширина от левого края элемента в пикселях. При наличии 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
====================

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

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

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

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

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

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.
MediaTrackConstraints.echoCancellation
======================================

Свойство **`echoCancellation`** объекта `MediaTrackConstraints` (en-US) это `ConstrainBoolean` (en-US) описывающее запрашиваемые или обязательные ограничения накладываемые на ограничивающее свойство `echoCancellation` (en-US).

При необходимости вы можете определить, поддерживается ли это ограничение, проверив значение `MediaTrackSupportedConstraints.echoCancellation` (en-US) как результат вызова `MediaDevices.getSupportedConstraints()` (en-US). Однако, обычно в этом нет необходимости, поскольку браузеры просто игнорируют любые незнакомые им ограничения.

Поскольку RTP (en-US) не содержит эту информацию, медиа-треки связанные с WebRTC `RTCPeerConnection` некогда не будут включать это свойство.

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

const constraintsObject = {
  echoCancellation: constraint,
};

constraintsObject.echoCancellation = constraint;
```

### Значение

Если это значение является простым `true` или `false`, пользовательский агент попытается получить медиа с включённым или отключённым эхоподавлением, если это возможно, но не вернёт ошибку, если это невозможно сделать. Иначе если значение передано как объект с полем `exact` , то логическое значение этого поля указывает обязательную настройку для эхоподавления; если это не может быть выполнены - запрос вернёт ошибку.

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

Смотрите Example: Constraint exerciser (en-US) для примера.

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

| Specification |
| --- |
| Media Capture and Streams # dom-mediatrackconstraintset-echocancellation |

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

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

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

* Media Capture and Streams API (en-US)
* Capabilities, constraints, and settings (en-US)
* `MediaTrackConstraints` (en-US)
* `MediaDevices.getSupportedConstraints()` (en-US)
* `MediaTrackSupportedConstraints` (en-US)
* `MediaStreamTrack`
URLSearchParams.delete()
========================

Метод **`delete()`** интерфейса `URLSearchParams` удаляет все указанные параметры и все связанные с ним значения из списка найденных параметров.

**Примечание:** Эта возможность доступна в Web Workers

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

URLSearchParams.delete(name)
```

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

name

Название удаляемого параметра.

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

Void

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


```js
let url = new URL("https://example.com?foo=1&bar=2&foo=3");
let params = new URLSearchParams(url.search.slice(1));

// Удалить параметр foo.
params.delete("foo"); //Строка запроса теперь: 'bar=2'
```

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

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-delete |

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

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