Document - Интерфейсы веб API

Document
========

Каждая веб-страница, которая загружается в браузер, имеет свой собственный объект **document**. Интерфейс документа служит точкой входа для получения содержимого веб-страницы (всего DOM (en-US) - дерева, включая такие элементы как `<body>` и `<table>` (en-US)), а также обеспечивает функциональность, которая является глобальной для документа, например, для получения URL-адреса страницы или создания новых элементов в документе).

Объект **document** может быть получен из разных API:

* Чаще всего используется прямой доступ к объекту **document** из сценариев scripts (en-US) которые подгружаются документом. (Этот же объект доступен как `window.document`.)
* Через свойство `contentDocument` (en-US) объекта iframe.
* Как ответ `responseXML` объекта `XMLHttpRequest.`
* Доступ к документу может быть получен из элемента или узла через свойство `ownerDocument`.

В зависимости от вида документа (т.е. HTML или XML (en-US)) у объекта **document** могут быть доступны разные API.

* Все объекты документов реализуют интерфейс `Document` (и следовательно `Node` и `EventTarget` интерфейсы). Таким образом основные свойства и методы, описанные на этой странице, доступны для всех видов документов.
* В современных браузерах некоторые документы (т.е. те, которые содержат контент `text/html`) также реализуют `HTMLDocument` интерфейс.
* В современных браузерах SVG документы реализуют `SVGDocument` интерфейс.

В будущем все эти интерфейсы будут сведены в один интерфейс - `Document`.

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

**Примечание:** Интерфейс `Document` наследует также интерфейсы `Node` и `EventTarget`.

`Document.all`
Устарело

Non-standard

Обеспечивает доступ ко всем элементам с идентификаторами (id). Это нестандартный интерфейс, вместо него рекомендуется использовать метод `Document.getElementById()`.

`Document.async`
Устарело

Используется с `document.load` чтобы обозначить асинхронный запрос.

`Document.characterSet`
Экспериментальная возможность

Возвращает кодировку документа.

`Document.compatMode`
Экспериментальная возможность

Указывает в каком режиме (Quirks или Strict) рендерился документ.

`Document.contentType`
Экспериментальная возможность

Возвращает Content-Type из MIME заголовка текущего документа.

`Document.doctype`

Возвращает Document Type Definition (DTD) текущего документа .

`Document.documentElement`

Возвращает Element, который является первым дочерним элементом документа. Для HTML документов это HTML-элемент.

`Document.documentURI`

Возвращает URL документа.

`Document.domConfig`
Устарело

Должен вернуть `DOMConfiguration` объект.

`Document.implementation` (en-US)

Возвращает DOM implementation связанную с текущим документом.

`Document.inputEncoding` (en-US)
Устарело

Возвращает кодировку, которая использовалась во время парсинга документа.

`Document.lastStyleSheetSet` (en-US)

Возвращает имя последнего включённого набора таблиц стилей. Имеет значение `null` , пока таблица стилей не будет изменена путём установки значения `selectedStyleSheetSet` (en-US).

`Document.mozSyntheticDocument` (en-US)
Non-standard

`true` если этот документ является синтетическим, например, отдельные изображения, видео, аудио файлы, или тому подобные.

`Document.mozFullScreen` (en-US)
Non-standard

`true` когда документ находится в `full-screen mode`.

`Document.mozFullScreenElement` (en-US)
Non-standard

Элемент, который в данный момент находится в полноэкранном режиме для этого документа.

`Document.mozFullScreenEnabled` (en-US)
Non-standard

`true` if calling `element.mozRequestFullscreen()` (en-US) would succeed in the curent document.

`Document.pointerLockElement` (en-US)
Экспериментальная возможность

Returns the element set as the target for mouse events while the pointer is locked. `null` if lock is pending, pointer is unlocked, or if the target is in another document.

`Document.preferredStyleSheetSet` (en-US)

Returns the preferred style sheet set as specified by the page author.

`Document.selectedStyleSheetSet` (en-US)

Returns which style sheet set is currently in use.

`Document.styleSheets` (en-US)

Returns a list of the style sheet objects on the current document.

`Document.styleSheetSets` (en-US)

Returns a list of the style sheet sets available on the document.

`Document.xmlEncoding` (en-US)
Устарело

Returns the encoding as determined by the XML declaration.

`Document.xmlStandalone`
Устарело

Returns `true` if the XML declaration specifies the document to be standalone (*e.g.,* An external part of the DTD affects the document's content), else `false`.

`Document.xmlVersion` (en-US)
Устарело

Returns the version number as specified in the XML declaration or `"1.0"` if the declaration is absent.

The `Document` interface is extended with the `ParentNode` interface:

### Extension for HTML documents

The `Document` interface for HTML documents inherit from the `HTMLDocument` interface or, since HTML5, is extended for such documents:

`Document.activeElement`

Returns the currently focused element.

`Document.alinkColor`
Устарело

Returns or sets the color of active links in the document body.

`Document.anchors`

Returns a list of all of the anchors in the document.

`Document.applets`
Устарело

Returns an ordered list of the applets within a document.

`Document.bgColor`
Устарело

Gets/sets the background color of the current document.

`Document.body`

Returns the `<body>` element of the current document.

`Document.cookie`

Returns a semicolon-separated list of the cookies for that document or sets a single cookie.

`Document.defaultView`

Returns a reference to the window object.

`Document.designMode`

Gets/sets the ability to edit the whole document.

`Document.dir`

Gets/sets directionality (rtl/ltr) of the document.

`Document.domain`

Returns the domain of the current document.

`Document.embeds`

Returns a list of the embedded `<embed>` elements within the current document.

`Document.fgColor` (en-US)
Устарело

Gets/sets the foreground color, or text color, of the current document.

`Document.forms`

Returns a list of the `<form>` elements within the current document.

`Document.head`

Returns the `<head>` element of the current document.

`Document.height` (en-US)
Non-standard

Gets/sets the height of the current document.

`Document.images`

Returns a list of the images in the current document.

`Document.lastModified` (en-US)

Returns the date on which the document was last modified.

`Document.linkColor` (en-US)
Устарело

Gets/sets the color of hyperlinks in the document.

`Document.links`

Returns a list of all the hyperlinks in the document.

`Document.location`

Returns the URI of the current document.

`Document.plugins` (en-US)

Returns a list of the available plugins.

`Document.readyState`

Returns loading status of the document.

`Document.referrer`

Returns the URI of the page that linked to this page.

`Document.scripts`

Returns all the `<script>` elements on the document.

`Document.title` (en-US)

Returns the title of the current document.

`Document.URL`

Returns a string containing the URL of the current document.

`Document.vlinkColor` (en-US)
Устарело

Gets/sets the color of visited hyperlinks.

`Document.width` (en-US)
Non-standard

Returns the width of the current document.

### Event handlers

`Document.onpointerlockchange`
Экспериментальная возможность

Returns the event handling code for the `pointerlockchange (en-US)` event.

`Document.onpointerlockerror`
Экспериментальная возможность

Returns the event handling code for the `pointerlockerror (en-US)` event.

`Document.onreadystatechange`

Returns the event handling code for the `readystatechange` event.

Methods
-------

**Примечание:** The `Document` interface also inherits from the `Node` and `EventTarget` interfaces.

`Document.adoptNode(Node node)` (en-US)

Adopt node from an external document.

`Document.captureEvents(String eventName)`
Устарело

See `window.captureEvents` (en-US).

`Document.caretPositionFromPoint(Number x, Number y)` (en-US)

Gets a `CaretPosition` (en-US) based on two coordinates.

`Document.createAttribute(String name)`

Creates a new `Attr` object and returns it.

`Document.createAttributeNS(String namespace, String name)` (en-US)

Creates a new attribute node in a given namespace and returns it.

`Document.createCDATASection(String data)` (en-US)

Creates a new CDATA node and returns it.

`Document.createComment(String comment)`

Creates a new comment node and returns it.

`Document.createDocumentFragment()`

Creates a new document fragment.

`Document.createElement(String name)`

Creates a new element with the given tag name.

`Document.createElementNS(String namespace, String name)` (en-US)

Creates a new element with the given tag name and namespace URI.

`Document.createEntityReference(String name)` (en-US)

Creates a new entity reference object and returns it.

`Document.createEvent(String interface)` (en-US)

Creates an event object.

`Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])` (en-US)

Creates a `NodeIterator` (en-US) object.

`Document.createProcessingInstruction(String target, String data)` (en-US)

Creates a new `ProcessingInstruction` (en-US) object.

`Document.createRange()`

Creates a `Range` object.

`Document.createTextNode(String text)`

Creates a text node.

`Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])`

Creates a `TreeWalker` (en-US) object.

`Document.elementFromPoint(Number x, Number y)` (en-US)

Returns the element visible at the specified coordinates.

`Document.enableStyleSheetsForSet(String name)` (en-US)

Enables the style sheets for the specified style sheet set.

`Document.exitPointerLock()` (en-US)
Экспериментальная возможность

Release the pointer lock.

`Document.getElementsByClassName(String className)`

Returns a list of elements with the given class name.

`Document.getElementsByTagName(String tagName)`

Returns a list of elements with the given tag name.

`Document.getElementsByTagNameNS(String namespace, String tagName)` (en-US)

Returns a list of elements with the given tag name and namespace.

`Document.importNode(Node node, Boolean deep)`

Returns a clone of a node from an external document.

`document.mozSetImageElement` (en-US)
Non-standard

Allows you to change the element being used as the background image for a specified element ID.

`Document.normalizeDocument()`

Replaces entities, normalizes text nodes, etc.

`Document.releaseCapture()` (en-US)
Non-standard

Releases the current mouse capture if it's on an element in this document.

`Document.releaseEvents`
Non-standard

Устарело

See `window.releaseEvents` (en-US).

`document.routeEvent`
Non-standard

See `window.routeEvent`.

The `Document` interface is extended with the `ParentNode` interface:

`Document.getElementById(String id)`

Returns an object reference to the identified element.

`Document.querySelector(String selector)`

Returns the first Element node within the document, in document order, that matches the specified selectors.

`Document.querySelectorAll(String selector)`

Returns a list of all the Element nodes within the document that match the specified selectors.

The `Document` interface is extended with the `XPathEvaluator` (en-US) interface:

`Document.createExpression(String expression, XPathNSResolver resolver)` (en-US)

Compiles an `XPathExpression` (en-US) which can then be used for (repeated) evaluations.

`Document.createNSResolver(Node resolver)` (en-US)

Creates an `XPathNSResolver` (en-US) object.

`Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)`

Evaluates an XPath expression.

### Extension for HTML documents

The `Document` interface for HTML documents inherit from the `HTMLDocument` interface or, since HTML5, is extended for such documents:

`Document.clear()` (en-US)
Non-standard

Устарело

In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.

`Document.close()`

Closes a document stream for writing.

`Document.execCommand(String command[, Boolean showUI[, String value]])`

On an editable document, executes a formating command.

`Document.getElementsByName(String name)`

Returns a list of elements with the given name.

`Document.getSelection()`

Returns a `Selection` (en-US) object related to text selected in the document.

`Document.hasFocus()`

Returns `true` if the focus is currently located anywhere inside the specified document.

`Document.open()` (en-US)

Opens a document stream for writing.

`Document.queryCommandEnabled(String command)` (en-US)

Returns true if the formating command can be executed on the current range.

`Document.queryCommandIndeterm(String command)`

Returns true if the formating command is in an indeterminate state on the current range.

`Document.queryCommandState(String command)` (en-US)

Returns true if the formating command has been executed on the current range.

`Document.queryCommandSupported(String command)` (en-US)

Returns true if the formating command is supported on the current range.

`Document.queryCommandValue(String command)`

Returns the current value of the current range for a formatting command.

`Document.registerElement(String tagname[, Object options])`

Registers a new custom element in the browser and returns a constructor for the new element.

`Document.write(String text)`

Writes text in a document.

`Document.writeln(String text)`

Writes a line of text in a document.

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

| Specification |
| --- |
| DOM Standard # interface-document |
| HTML Standard # the-document-object |
| CSSOM View Module # extensions-to-the-document-interface |
| Pointer Lock 2.0 # extensions-to-the-document-interface |
| Selection API # extensions-to-document-interface |

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

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


Document.async - Интерфейсы веб API

Document.async
==============

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

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

`document.async` может быть установлен, для того, чтобы определить, что вызов `document.load` должен быть выполнен синхронно или не синхронно. `true` - стандартное значение, определяющее, асинхронно ли должны быть загружены документы.

(Загружать документы синхронно стало возможно с версии 1.4 alpha.)

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

```js
function loadXMLData(e) {
  alert(new XMLSerializer().serializeToString(e.target)); // Gives querydata.xml contents as string
}

var xmlDoc = document.implementation.createDocument("", "test", null);

xmlDoc.async = false;
xmlDoc.onload = loadXMLData;
xmlDoc.load("querydata.xml");
```

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

* DOM Level 3 Load & Save module
Смотрите также
--------------

* XML in Mozilla
* `document.load`


Attr - Интерфейсы веб API

Attr
====

Этот тип представляет атрибут элемента DOM в виде объекта. В большинстве методов DOM вы, вероятно, непосредственно извлекаете атрибут в виде строки (например, `Element.getAttribute ()`, но некоторые функции (например, `Element.getAttributeNode ()`) или средства итерации, отдают тип `Attr`.

EventTarget

Node

Attr

**Предупреждение:** Начиная с Gecko 7.0, устаревшие свойства и методы при обращении выведут предупреждающие сообщения на консоль. Поэтому вы должны проверить свой код. Смотрите полный список устаревших свойств и методов.

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

`name` (en-US) Только для чтения

Имя атрибута.

`namespaceURI` (en-US) Только для чтения

`DOMString` представление URI пространства имён атрибута, или NULL если нет никакого пространства имён.

`localName` (en-US) Только для чтения

`DOMString` представление локальной части полного имени атрибута.

`prefix` (en-US) Только для чтения

`DOMString` представление префикс пространства имён атрибута, или NULL, если префикс не указан.

`ownerElement` (en-US) Только для чтения

Элемент, содержащий атрибут.

**Примечание:** DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку вы получаете объект Attr от `Element`, вы заранее должны знать связанный элемент. Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым `Document.evaluate`, DOM уровень жизни вновь ввёл это свойство.

Gecko выводит предупреждение об использовании, начиная с Gecko 7.0. Это предупреждение было удалено в Gecko 49.0.

`specified` (en-US) Только для чтения

Это свойство всегда возвращает true. Первоначально, оно возвращало true, если атрибут был явно определён в исходном коде или сценарием и false, если её значение прибыло из значения по умолчанию определённом в DTD документе.

`value` (en-US)

Значение атрибута

**Примечание:** уровень DOM 3 определил `namespaceURI`, `localName` и `prefix` в `Node` интерфейсе. В DOM4 они были перемещены в `Attr`.

Это изменение реализовано в Chrome с версии 46.0 и Firefox с версии 48.

Устаревшие свойства и методы
----------------------------

Эти свойства устарели. Там где это допустимо представлена соответствующая замена.

`attributes`

Это свойство всегда возвращает значение `NULL`.

`childNodes`

Это свойство всегда возвращает пустой `NodeList`.

`firstChild`

Это свойство всегда возвращает значение `NULL`.

`isId` Только для чтения

Указывает, является ли атрибут "ID attribute". "ID attribute" - это атрибут, значение которого должно быть уникальным в документе DOM. В HTML DOM "id" является единственным атрибутом ID, но XML-документы могут определять иные. Уникальность атрибута часто определяется DTD (en-US) или другим описанием схемы.

`lastChild`

Это свойство всегда возвращает значение `NULL`.

`nextSibling`

Это свойство всегда возвращает значение `NULL`.

`nodeName`

Используйте `Attr.name` (en-US) взамен.

`nodeType`

Это свойство теперь всегда возвращает 2 (`ATTRIBUTE_NODE`).

`nodeValue`

Используйте `Attr.value` (en-US) взамен.

`ownerDocument`

Вы не должны были использовать это свойство в первую очередь, поэтому вам, вероятно, всё равно, что это свойство больше не используется.

`parentNode`

Это свойство всегда возвращает значение `NULL`.

`previousSibling`

Это свойство всегда возвращает значение `NULL`.

`schemaTypeInfo` Только для чтения

Сведения о типе, связанные с этим атрибутом. В то время как информация о типе, содержащаяся в этом атрибуте, гарантированно будет правильной после загрузки документа или вызова `Document.normalizeDocument`, это свойство может быть ненадёжным, если узел был перемещён.

`specified`

Это свойство всегда возвращает значение `true`.

`textContent`

Используйте `Attr.value` (en-US) взамен.

The following methods have been deprecated:

`appendChild()`

Измените значение `Attr.value` (en-US) взамен.

`cloneNode()`

Вы не должны были использовать это в первую очередь, поэтому вам, вероятно, всё равно, что это больше не используется.

`createAttribute()`

Используйте `Element.setAttribute()` взамен.

`createAttributeNS()`

Используйте `Element.setAttributeNS()` (en-US) взамен.

`getAttributeNode()`

Используйте `Element.getAttribute()` взамен.

`getAttributeNodeNS()`

Используйте `Element.getAttributeNS()` (en-US) взамен.

`hasAttributes()`

Этот метод всегда возвращает значение false.

`hasChildNodes()`

Этот метод всегда возвращает значение false.

`insertBefore()`

Измените значение `Attr.value` (en-US) взамен.

`isEqualNode()`

Вы не должны были использовать это в первую очередь, поэтому вам, вероятно, всё равно, что это больше не используется.

`normalize()`

Вы не должны были использовать это в первую очередь, поэтому вам, вероятно, всё равно, что это больше не используется.

`removeAttributeNode()`

Используйте `Element.removeAttribute()` взамен.

`removeChild()`

Измените значение `Attr.value` (en-US) взамен..

`replaceChild()`

Modify the value of `Attr.value` (en-US) взамен.

`setAttributeNode()`

Используйте `Element.setAttribute()` взамен.

`setAttributeNodeNS()`

Используйте `Element.setAttributeNS()` (en-US) взамен.

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

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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


Sensor APIs - Интерфейсы веб API

Sensor APIs
===========

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

Концепции и использование Sensor APIs
-------------------------------------

Несмотря на то, что спецификация Generic Sensor API определяет интерфейс `Sensor`, вам, как веб-разработчику, не придётся его использовать. Вместо него, для получения данных с конкретных датчиков, вы будете использовать один из его подклассов. Например, интерфейс `Accelerometer` (en-US) возвращает ускорение перемещения устройства по всем трём осям на момент его считывания.

Данные с датчиков могут точно соответствовать данным с физических датчиков устройства, либо не соответствовать им. Например, интерфейс датчика `Gyroscope` точно соответствует интерфейсу физического датчика. В качестве альтернативы, интерфейс `AbsoluteOrientationSensor` (en-US) предоставляет информацию, которая алгоритмически объединяет данные с двух и более датчиков устройста. Два эти типа датчиков называются *низкоуровневыми* и *высокоуровневыми* соответственно. Второй тип так же называют объединяющим датчиком (либо, виртуальным или, синтетическим).

### Возможность использования

Интерфейсы датчиков - это только прокси для датчиков устройства. Как следствие, задача определения возможности использования датчиков гораздо сложнее, чем для других API. Наличие API датчика не значит, что этот API подключен к реальному аппаратному датчику, работает ли он, подключен или, даже, предоставил ли пользователь к нему доступ. Обеспечение постоянного доступа ко всей этой информации приводит к снижению производительности и разряду батареи.

Таким образом, определение возможности использования API датчиков должно включать определение наличия самого этого API и стратегии оборонительного программирования (см. ниже).

Пример ниже показывает три метода определения API датчика. Кроме того, вы можете обернуть создание экземпляра объекта в блок `try...catch`. Обратите внимание, что определение через интерфейс `Navigator` не единственный возможный путь.

```js
if (typeof Gyroscope === "function") {
  // бег по кругу...
}

if ("ProximitySensor" in window) {
  // берегись!
}

if (window.AmbientLightSensor) {
  // погрузись во тьму...
}
```

### Оборонительное программирование

Как указано в разделе Возможность использования, проверить наличие конкретного API датчика недостаточно. Наличие фактического датчика также должно быть подтверждено. Как раз здесь и необходимо оборонительное программирование. Оно включает три стратегии.

* Проверка на наличие ошибок при создании экземпляра объекта датчика.
* Прослушивание ошибок, возникающих во время его использования.
* Корректная обработка ошибок для улучшения, а не ухудшения пользовательского опыта.

Приведенный ниже пример кода иллюстрирует эти принципы. Блок `try...catch` ловит ошибки, возникающие при создании объекта датчика. Этот объект слушает события `error`, чтобы поймать ошибки, возникающие во время использования датчика. Единственный раз, когда что-либо показывается пользователю, это когда необходимо запросить разрешения (en-US) и когда датчик не поддерживается устройством.

>
> **Note:** Если функциональная политика блокирует использование функции, то это происходит потому, что ваш код не соответствует политикам, установленным на вашем сервере. Это не то, что когда-либо будет показано пользователю. Статья о HTTP заголовке `Feature-Policy` (en-US) содержит инструкцию по реализации.
>
>
>

```js
let accelerometer = null;
try {
  accelerometer = new Accelerometer({ referenceFrame: "device" });
  accelerometer.addEventListener("error", (event) => {
    // Обработчик ошибок времени исполнения.
    if (event.error.name === "NotAllowedError") {
      // Переход к коду для запроса разрешения.
    } else if (event.error.name === "NotReadableError") {
      console.log("Не могу подключиться к датчику.");
    }
  });
  accelerometer.addEventListener("reading", () => reloadOnShake(accelerometer));
  accelerometer.start();
} catch (error) {
  // Обработчик ошибок создания объекта.
  if (error.name === "SecurityError") {
    // Смотри заметку о функциональных политиках.
    console.log(
      "Создание экземпляра объекта датчика было задлокировано по функциональным политикам.",
    );
  } else if (error.name === "ReferenceError") {
    console.log("Датчик не поддерживается в User agent.");
  } else {
    throw error;
  }
}
```

### Разрешения и Функциональные Политики

Показания датчиков могут сниматься только в том случае, если пользователь дает разрешение на определенный тип датчика. Сделать это можно используя Permissions API (en-US). Короткий пример, показанный ниже, запрашивает у пользователя разрешение перед попыткой использовать датчик.

```js
navigator.permissions.query({ name: "accelerometer" }).then((result) => {
  if (result.state === "denied") {
    console.log("Использование датчика не разрешено.");
    return;
  }
  // Используйте датчик.
});
```

Альтернативный подход заключается в попытке использовать датчик и прослушивании `SecurityError`.

```js
const sensor = new AbsoluteOrientationSensor();
sensor.start();
sensor.addEventListener("error", (error) => {
  if (event.error.name === "SecurityError")
    console.log("Нет разрешения использовать AbsoluteOrientationSensor.");
});
```

В следующей таблице для каждого типа датчика описано имя, требуемое для Permissions API, атрибут `allow` элемента `<iframe>` (en-US) и директива `Feature-Policy` (en-US).

| Датчик | Разрешение/Имя Feature Policy |
| --- | --- |
| `AbsoluteOrientationSensor` | `'accelerometer'`, `'gyroscope'`, и `'magnetometer'` |
| `Accelerometer` | `'accelerometer'` |
| `AmbientLightSensor` | `'ambient-light-sensor'` |
| `GravitySensor` | `'accelerometer'` |
| `Gyroscope` | `'gyroscope'` |
| `LinearAccelerationSensor` | `'accelerometer'` |
| `Magnetometer` | `'magnetometer'` |
| `RelativeOrientationSensor` | `'accelerometer'`, и `'gyroscope'` |

### Показания

Показания датчиков принимаются через событие `reading`, которое унаследовано для всех типов датчиков. Частота получения данных зависит от вас и указывается как параметр объекта, переданного в конструктор класса. Этот параметр определяет количество опросов датчика в секунду. Можно использовать целое или десятичное число, последнее для частот менее секунды. Фактическая частота считывания зависит от аппаратного обеспечения устройства и, следовательно, может быть меньше запрошенной.

Пример ниже иллюстрирует это используя `Magnetometer` (en-US).

```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log("Магнитное поле вдоль оси X " + magSensor.x);
  console.log("Магнитное поле вдоль оси Y " + magSensor.y);
  console.log("Магнитное поле вдоль оси Z " + magSensor.z);
});
magSensor.addEventListener("error", (event) => {
  console.log(event.error.name, event.error.message);
});
magSensor.start();
```

Интерфейсы
----------

`AbsoluteOrientationSensor` (en-US)Secure context

Описывает физическую ориентацию устройства относительно системы координат Земли.

`Accelerometer` (en-US)Secure context

Показывает ускорение, приложенное к устройству по всем трём осям.

`AmbientLightSensor` (en-US)Secure context

Возвращает текущий уровень освещенности или освещенность окружающего освещения вокруг устройства.

`GravitySensor` (en-US)Secure context

Показывает силу тяжести, приложенную к устройству по всем трём осям.

`Gyroscope`Secure context

Показывает угловую скорость устройства по всем трём осям.

`LinearAccelerationSensor` (en-US)Secure context

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

`Magnetometer` (en-US)Secure context

Предоставляет информацию о магнитном поле, обнаруженном основным магнитометром устройства.

`OrientationSensor` (en-US)Secure context

Базовый класс для `AbsoluteOrientationSensor` (en-US). Этот класс не может быть использован сам по себе, вместо этого он предоставляет свойства и методы, к которым обращаются наследуемые от него интерфейсы.

`RelativeOrientationSensor` (en-US)Secure context

Описывает физическую ориентацию устройства без учета системы координат Земли.

`Sensor`Secure context

Базовый класс для всех других интерфесов датчиков. Этот класс не может быть использован сам по себе. Вместо этого он предоставляет свойства, обработчики событий и методы, к которым обращаются интерфейсы, которые наследуются от него.

`SensorErrorEvent` (en-US)Secure context

Предоставляет информацию об ошибках, вызванных `Sensor` или связанным интерфейсом.

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

| Specification |
| --- |
| Generic Sensor API # the-sensor-interface |

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

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


Clients - Интерфейсы веб API

Clients
=======

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

Интерфейс `Clients` Service Workers API (en-US) представляет собой контейнер со списком объектов `Client` (en-US).

Методы
------

`Clients.get()` (en-US)

Получает клиента сервис воркера, соответствующего данному `id,` и возвращает его в `Promise`.

`Clients.matchAll()` (en-US)

Получает список клиентов сервис воркера и возвращает их в `Promise`. Включает параметр `options` для возврата всех клиентов сервис воркера, чьи источники являются теми же источниками, что и у связанного источника сервис воркера. Если `options` не включены, метод возвращает только тех клиентов сервис воркера, которых тот контролирует.

`Clients.openWindow()`

Открывает `Client` (en-US) сервис воркера в новом окне браузера.

`Clients.claim()`

Позволяет активному Сервис Воркеру установить себя, как активного воркера для клиентской страницы, когда воркер и страница находятся в одной области.

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

```js
clients.matchAll(options).then(function (clients) {
  for (i = 0; i < clients.length; i++) {
    if (clients[i] === "index.html") {
      clients.openWindow(clients[i]);
      // или сделать что-то другое, с учётом подошедшего клиента
    }
  }
});
```

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

| Specification |
| --- |
| Service Workers # clients-interface |

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

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

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

* Using Service Workers (en-US)
* Service workers basic code example
* Is ServiceWorker ready?
* `Promise`
* Using web workers (en-US)


Console API - Интерфейсы веб API

Console API
===========

Console API обеспечивает функциональность, которая позволяет разработчикам выполнять задачи по отладке, такие как логирование сообщений или значений переменных в определённых местах кода, измерение времени, требуемое на выполнение задачиПонятие и использование
-----------------------

Console API изначально было собственным API с различной браузерной реализацией. Спецификация Console API была создана, чтобы согласовать поведение. Сейчас все современные браузеры используют эту реализацию. Хотя некоторые реализации имеют свои собственные функции. Узнать больше можно здесь:

* Google Chrome DevTools implementation
* Safari DevTools implementation

Использование крайне простое — объект `console` (`window.console` в браузерах или `WorkerGlobalScope.console` (en-US) в Web Worker) содержит множество методов, которые вы можете вызвать для выполнения отладки. В основном используется для вывода веб-консоль различных значений.

Один из самых часто используемых методов `console.log`, который используют для вывода текущего значения переменной.

Интерфейсы
----------

`console`

Обеспечивает простую функциональность для отладки. Включает в себя логирование, трассировку, таймеры и счётчики.

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

```js
let myString = "Hello world";

// Вывод "Hello world" в консоль
console.log(myString);
```

Смотрите больше примеров на странице Console.

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

| Specification |
| --- |
| Console Standard # console-namespace |

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

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

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

* Инструменты разработчика
* Веб-консоль — как Веб-консоль в Firefox работает с вызовами Console API
* Отладка удалённых скриптов — как увидеть консоль, когда выполняется отладка на мобильных устройствах


DocumentFragment - Интерфейсы веб API

DocumentFragment
================

Интерфейс DocumentFragment представляет собой минимальный объект документа, который не имеет родителя. Он используется как лёгкая версия `Document`, чтобы хранить хорошо сформированные или потенциально не хорошо формированные фрагменты XML.

Различные другие методы могут взять document fragment в качестве аргумента (например, любые методы интерфейса Node, такие как Node.appendChild и Node.insertBefore), в этом случае прикрепляются или вставляются дети фрагмента, а не сам фрагмент.

Этот интерфейс также хорошо используется с веб-компонентами: `<template>` элементы содержат `DocumentFragment` в их `HTML Template Element.content` свойствах.

Пустой `DocumentFragment` может быть создан с помощью метода `document.createDocumentFragment` или конструктора.

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

*Этот интерфейс не имеет определённых свойств помимо наследуемых от его родителя, `Node`, и реализует их из интерфейса `ParentNode`.*

`ParentNode.children` (en-US) Только для чтения
Экспериментальная возможность

Возвращает динамическую `HTMLCollection` содержащую все объекты типа `Element`, которые являются потомками объекта `DocumentFragment`.

`ParentNode.firstElementChild` (en-US) Только для чтения
Экспериментальная возможность

Возвращает `Element`, который является первым потомком объекта `DocumentFragment`, или `null`, если такого нет.

`ParentNode.lastElementChild` (en-US) Только для чтения
Экспериментальная возможность

Возвращает `Element`, который является последним потомком объекта `DocumentFragment`, или `null`, если такого нет.

`ParentNode.childElementCount` Только для чтения
Экспериментальная возможность

Возвращает `unsigned long` - число потомков объекта `DocumentFragment`.

Конструктор
-----------

`DocumentFragment()` (en-US)
Экспериментальная возможность

Возвращает пустой объект `DocumentFragment`.

Методы
------

*Этот интерфейс наследует методы его родителя, `Node`*, и реализует их из интерфейса `ParentNode`.

`DocumentFragment.find()`
Экспериментальная возможность

Возвращает первое совпадение `Element` в дереве `DocumentFragment`.

`DocumentFragment.findAll()`
Экспериментальная возможность

Возвращает список `NodeList` найденных `Element` в дереве `DocumentFragment`.

`DocumentFragment.querySelector()` (en-US)

Возвращает первый узел `Element` в `DocumentFragment`, в порядке документа, который совпадает с заданным селектором.

`DocumentFragment.querySelectorAll()` (en-US)

Возвращает список `NodeList` всех узлов `Element` в `DocumentFragment` которые совпадают с заданным селектором.

`DocumentFragment.getElementById()` (en-US)

Возвращает первый узел `Element` в `DocumentFragment`, в порядке документа, который совпадает с заданным ID.

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

| Specification |
| --- |
| DOM Standard # interface-documentfragment |

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

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

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

* Интерфейсы DOM.


MouseEvent - Интерфейсы веб API

MouseEvent
==========

Интерфейс **`MouseEvent`** представляет собой событие, которое происходит в результате взаимодействия пользователя с манипулятором ( например, мышью). Наиболее частые из таких событий: `click (en-US)`, `dblclick (en-US)`, `mouseup (en-US)`, `mousedown (en-US)`.

`MouseEvent` выводится из метода `UIEvent` (en-US), который в свою очередь происходит из метода `Event`. Метод `MouseEvent.initMouseEvent()` (en-US) допустимо использовать для лучшей совместимости с предыдущими версиями, однако, для создания `MouseEvent` рекомендуется использовать конструктор метода `MouseEvent()` (en-US).

Несколько более конкретные события, производные от события mouseevent: `WheelEvent` (en-US) and `DragEvent` (en-US).

Конструктор
-----------

`MouseEvent()` (en-US)

Создаёт объект `MouseEvent`.

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

*Данный интерфейс наследует свойства от родителей `UIEvent` (en-US) и `Event`.*

`MouseEvent.altKey` (en-US) Только для чтения

Возвращает значение `true,` если клавиша

`alt`

была нажата во время движения мыши.

`MouseEvent.button` Только для чтения

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

`MouseEvent.buttons` Только для чтения

Отображает, какие клавиши были нажаты во время движения мыши.

`MouseEvent.clientX` Только для чтения

Отображение X координат курсора мыши в локальной системе координат (DOM контент).

`MouseEvent.clientY` Только для чтения

Отображение Y координат курсора мыши в локальной системе координат (DOM контент).

`MouseEvent.ctrlKey` Только для чтения

Возвращает значение `true,` если клавиша

`control`

была нажата во время движения мыши.

`MouseEvent.metaKey` (en-US) Только для чтения

Возвращает значение `true,` если клавиша

`meta`

была нажата во время движения мыши.

`MouseEvent.movementX` (en-US) Только для чтения

Отображает X координат указателя мыши относительно позиции последнего `mousemove (en-US)` события.

`MouseEvent.movementY` (en-US) Только для чтения

Отображает Y координат указателя мыши относительно позиции последнего `mousemove (en-US)` события.

`MouseEvent.offsetX` Только для чтения
Экспериментальная возможность

Отображает X координат указателя мыши относительно позиции границы отступа целевого узла.

`MouseEvent.offsetY` (en-US) Только для чтения
Экспериментальная возможность

Отображает Y координат указателя мыши относительно позиции границы отступа целевого узла.

`MouseEvent.pageX` Только для чтения
Экспериментальная возможность

Отображает X координат указателя мыши относительно всего документа.

`MouseEvent.pageY` (en-US) Только для чтения
Экспериментальная возможность

Отображает Y координат указателя мыши относительно всего документа.

`MouseEvent.region` (en-US) Только для чтения

Возвращает id затронутого событием региона. Если ни какой регион затронут не был, возвращает null.

`MouseEvent.relatedTarget` (en-US) Только для чтения

Второстепенная цель события, если таковая есть.

`MouseEvent.screenX` Только для чтения

Отображает X координат указателя мыши в пространстве экрана.

`MouseEvent.screenY` (en-US) Только для чтения

Отображает Y координат указателя мыши в пространстве экрана.

`MouseEvent.shiftKey` Только для чтения

Возвращает true если клавиша

`shift`

была нажата, когда произошло событие мыши.

`MouseEvent.which` (en-US)
Non-standard
 Только для чтения

Возвращает код последней нажатой клавиши, когда произошло событие мыши.

`MouseEvent.mozPressure`
Non-standard
 Только для чтения

Отображает давление которое было осуществлено при нажатии. Значение будет между `0.0` (минимальное давление) и `1.0` (максимальное давление).

`MouseEvent.mozInputSource` (en-US)
Non-standard
 Только для чтения

The type of device that generated the event (one of the `MOZ_SOURCE_*` constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

`MouseEvent.webkitForce` (en-US)
Non-standard
 Только для чтения

Отображает количество приложенного давления при клике.

`MouseEvent.x` (en-US)
Экспериментальная возможность
Только для чтения

Alias для `MouseEvent.clientX`.

`MouseEvent.y` (en-US)
Экспериментальная возможность
Только для чтения

Alias для `MouseEvent.clientY`

Константы
---------

`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN` (en-US)
Non-standard
Только для чтения

Минимальная необходимая сила для обычного клика

`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` (en-US)
Non-standard
Только для чтения

Минимальная необходимая сила для усиленного клика

Методы
------

*Данный интерфейс наследует свойства от родителей, `UIEvent` (en-US) and `Event`.*

`MouseEvent.getModifierState()` (en-US)

Returns the current state of the specified modifier key. See the `KeyboardEvent.getModifierState` (en-US)() for details.

`MouseEvent.initMouseEvent()` (en-US)
Устарело

Initializes the value of a `MouseEvent` created. If the event has already being dispatched, this method does nothing.

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

Данный пример демонстрирует симуляцию нажатия левой клавиши мыши (событие мыши генерируется программно) по чекбоксу используя методы DOM.

```js
function simulateClick() {
  var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  var cb = document.getElementById("checkbox"); //element to click on
  var canceled = !cb.dispatchEvent(evt);
  if (canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}
document.getElementById("button").addEventListener("click", simulateClick);
```

```html
<p>
  <label><input type="checkbox" id="checkbox" /> Checked</label>
</p>
<p><button id="button">Click me</button></p>
```

Нажмите на кнопку, чтобы посмотреть, как работает пример.

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

| Specification |
| --- |
| UI Events # interface-mouseevent |
| CSSOM View Module # extensions-to-the-mouseevent-interface |
| Pointer Lock 2.0 # extensions-to-the-mouseevent-interface |

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

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

Посмотрите также
----------------

* Its direct parent, `UIEvent` (en-US).


AnimationEvent - Интерфейсы веб API

AnimationEvent
==============

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

AnimationEvent - это интерфейс представляющий события, содержащие информацию, связанную с анимацией.

Event

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

*Также свойства наследуются от родителя `Event`.*

`AnimationEvent.animationName` (en-US) Только для чтения

Является `DOMString` содержащей значения `animation-name` CSS-свойств связанных с **transition.**

`AnimationEvent.elapsedTime` (en-US) Только для чтения

Является числом с плавающей точкой, которое задаёт количество времени от начала анимации в секундах, когда это событие отклонено, несмотря на какое-либо время анимация была остановлена.Для события "animationstart" , elapsedTime равно `0.0` если не было заданно отрицательное значение для `animation-delay`, в этом случае событие будет срабатывать с elapsedTime содержащим `(-1 * delay)`.

`AnimationEvent.pseudoElement` (en-US) Только для чтения

Является `DOMString`, начинающийся с '::', содержащий имя псевдо-элемента,на котором работает анимация.Если анимация не работает на псевдо-элементе, но работает на элементе,значит указанна пустая строка ' '.

Конструктор
-----------

`AnimationEvent()` (en-US)

Создаёт событие AnimationEvent с передачей параметров.

Методы
------

*Также наследуют методы от родителя `Event`*.

`AnimationEvent.initAnimationEvent()` (en-US)
Non-standard

Устарело

Инициализирует AnimationEvent созданную используя резко суждённый метод `Document.createEvent("AnimationEvent")` (en-US).

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

| Specification |
| --- |
| CSS Animations Level 1 # interface-animationevent |

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

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

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

* Использование CSS-анимации (en-US)
* Анимация связанных CSS-свойств и по правилам: `animation`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-name`, `animation-play-state`, `animation-timing-function`, `@keyframes` (en-US).


Credential Management API - Интерфейсы веб API

Credential Management API
=========================

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

The Credential Management API (API управления учётными данными) позволяет веб-сайту хранить и извлекать учётные данные пользователя, федеративного ключа и открытого ключа. Эти возможности позволяют пользователям входить в систему без ввода паролей, видеть федеративную учётную запись, которую они использовали для входа на сайт, и возобновлять сеанс без явного входа в систему с истёкшим сроком действия.

Концепции и использование учётных данных
----------------------------------------

Этот API позволяет веб-сайтам взаимодействовать с системой паролей пользовательского агента (user agent's password system), чтобы веб-сайты могли одинаково работать с учётными данными сайта, а пользовательские агенты могли оказывать лучшую поддержку в управлении своими учётными данными. Например, пользовательским агентам особенно трудно иметь дело с федеративными поставщиками удостоверений или эзотерическими механизмами входа (esoteric sign-in), которые используют больше данных, чем просто имя пользователя и пароль. Для решения этих проблем API предоставляет веб-сайту способы хранения и извлечения различных типов учётных данных. Это даёт пользователям такие возможности, как просмотр федеративной учётной записи, которую они использовали для входа на сайт, или возобновление сеанса без явного потока входа в систему с истёкшим сроком действия.

**Примечание:** Этот API ограничен контекстами верхнего уровня. Вызовы `get()` и `store()` внутри элемента `<iframe>` выполняться без эффекта.

### Учётные данные, общие для поддомена

Более поздняя версия спецификации позволяет получать учётные данные из другого поддомена. Например, пароль, хранящийся в `login.example.com`, может использоваться для входа на `www.example.com`. Чтобы это использовать, пароль должен быть явно сохранён путём вызова `CredentialsContainer.store()` (en-US). Иногда это называют сопоставлением с общедоступным списком суффиксов (PSL); однако спецификация *рекомендует* использовать PSL только для определения действующей области учётных данных. Это не обязательно. Следовательно, браузеры могут различаться реализацией API.

Интерфейсы
----------

`Credential` (en-US)

Предоставляет информацию о сущности в качестве предварительного условия для принятия решения о доверии.

`CredentialsContainer` (en-US)

Предоставляет методы для запроса учётных данных и уведомления пользовательского агента, когда происходят события, например успешный вход или выход. Этот интерфейс доступен в `navigator.credentials`.

`FederatedCredential` (en-US)

Предоставляет информацию об учётных данных от федеративного поставщика идентификации (объект), которому веб-сайт доверяет для правильной аутентификации пользователя и который предоставляет API для этой цели. OpenID Connect является примером такой структуры.

`PasswordCredential` (en-US)

Предоставляет информацию о паре имени пользователя и пароля.

`PublicKeyCredential` (en-US)

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

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

| Specification |
| --- |
| Credential Management Level 1 # the-credential-interface |

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

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


CSSStyleSheet - Интерфейсы веб API

CSSStyleSheet
=============

**`CSSStyleSheet`** interface представляет одну CSS таблицу стилей. CSS таблица наследует свойства и методы от родителя, `StyleSheet`.

Таблица стилей состоит (правил) *rules*, таких как *style rules (en-US)* ("`h1,h2 { font-size: 16pt }"`), *и различных* (`@import`, `@media`, ...), etc. **`CSSStyleSheet`** interface позволяет получать и изменять список правил в таблице стилей.

Смотрите Notes секцию о различных способах получения **`CSSStyleSheet`** object.

Properties
----------

*Inherits properties from its parent, `StyleSheet`.*

`CSSStyleSheet.cssRules` (en-US)

 Returns a live `CSSRuleList` (en-US), listing the `CSSRule` objects in the style sheet.
 This is normally used to access individual rules like this:

```

   styleSheet.cssRules[i] // where i = 0..cssRules.length-1
```

To add or remove items in `cssRules`, use the `CSSStyleSheet`'s `deleteRule()` and `insertRule()` methods, described below.

`CSSStyleSheet.ownerRule` (en-US)

If this style sheet is imported into the document using an `@import` (en-US) rule, the `ownerRule` property will return that `CSSImportRule` (en-US), otherwise it returns `null`.

Methods
-------

*Inherits methods from its parent, `Stylesheet`.*

`CSSStyleSheet.deleteRule()` (en-US)

Deletes a rule at the specified position from the style sheet.

`CSSStyleSheet.insertRule()` (en-US)

Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.

Notes
-----

In some browsers, if a stylesheet is loaded from a different domain, calling `cssRules` results in `SecurityError`.

A stylesheet is associated with at most one `Document`, which it applies to (unless disabled). A list of `CSSStyleSheet` objects for a given document can be obtained using the `document.styleSheets` (en-US) property. A specific style sheet can also be accessed from its *owner* object (`Node` or `CSSImportRule`), if any.

A `CSSStyleSheet` object is created and inserted into the document's `styleSheets` list automatically by the browser, when a style sheet is loaded for a document. As the `document.styleSheets` (en-US) list cannot be modified directly, there's no useful way to create a new `CSSStyleSheet` object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a `<style>` or `<link>` element into the document.

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

| Reason for the style sheet to be associated with the document | Appears in `document. styleSheets` list | Getting the owner element/rule given the style sheet object | The interface for the owner object | Getting the CSSStyleSheet object from the owner |
| --- | --- | --- | --- | --- |
| `<style>` and `<link>` elements in the document | Yes | `.ownerNode` (en-US) | `HTMLLinkElement`, `HTMLStyleElement` (en-US), or `SVGStyleElement` (en-US) | `.sheet` (en-US) |
| CSS `@import` (en-US) rule in other style sheets applied to the document | Yes | `.ownerRule` (en-US) | `CSSImportRule` (en-US) | `.styleSheet` (en-US) |
| `<?xml-stylesheet ?>` processing instruction in the (non-HTML) document | Yes | `.ownerNode` (en-US) | `ProcessingInstruction` (en-US) | `.sheet` (en-US) |
| HTTP Link Header | Yes | *N/A* | N/A | N/A |
| User agent (default) style sheets | No | N/A | N/A | N/A |

Specifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstylesheet-interface |

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

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

See also
--------

* Using dynamic styling information (en-US)


CSSStyleDeclaration - Интерфейсы веб API

CSSStyleDeclaration
===================

Интерфейс **`CSSStyleDeclaration`** представляет объект, являющийся блоком объявления CSS, и предоставляет информацию о стиле и различные связанные со стилем методы и свойства.

Объект `CSSStyleDeclaration` может быть представлен с помощью трёх различных API:

* Через `HTMLElement.style` (en-US), который имеет дело с встроенными стилями одного элемента (например, <div style="...">).
* Через API `CSSStyleSheet`. Например, `document.styleSheets[0].cssRules[0].style` возвращает объект `CSSStyleDeclaration` для первого правила CSS в первой таблице стилей документа.
* Через `Window.getComputedStyle ()`, который предоставляет объект `CSSStyleDeclaration` в качестве интерфейса только для чтения.
Атрибуты
--------

`CSSStyleDeclaration.cssText` (en-US)

Текстовое представление блока объявления. Установка этого атрибута изменяет стиль.

`CSSStyleDeclaration.length` (en-US) Только для чтения

Количество свойств. Смотри ниже метод `item()` (en-US) .

`CSSStyleDeclaration.parentRule` (en-US) Только для чтения

Содержащееся `CSSRule`.

Методы
------

`CSSStyleDeclaration.getPropertyPriority()` (en-US)

Возвращает необязательный приоритет "important".

`CSSStyleDeclaration.getPropertyValue()`

Возвращает значение свойства, заданное именем свойства.

`CSSStyleDeclaration.item()` (en-US)

Возвращает имя свойства.

`CSSStyleDeclaration.removeProperty()` (en-US)

Удаляет свойство из блока объявления CSS.

`CSSStyleDeclaration.setProperty()` (en-US)

Изменяет существующее свойство CSS или создаёт новое свойство CSS в блоке объявления.

`CSSStyleDeclaration.getPropertyCSSValue()` (en-US)

Поддерживается только через getComputedStyle в Firefox. Возвращает значение свойства в виде `CSSPrimitiveValue` (en-US) или `null` для сокращённых свойств.

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

```js
var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);

for (var i = styleObj.length; i--; ) {
  var nameString = styleObj[i];
  styleObj.removeProperty(nameString);
}

console.log(styleObj.cssText);
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # the-cssstyledeclaration-interface |

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

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


MediaSource - Интерфейсы веб API

MediaSource
===========

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

**`MediaSource`** – это интерфейс Media Source Extensions API (en-US) для предоставления интерактивного источника медиаданных объектам типа `HTMLMediaElement`.

Конструктор
-----------

`MediaSource()` (en-US)

Создаёт и возвращает новый объект `MediaSource` не имеющий подключённых буферов данных.

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

*Наследует свойства родительского интерфейса , `EventTarget`.*

`MediaSource.sourceBuffers` (en-US) Только для чтения

Возвращает объект типа `SourceBufferList` (en-US) содержащий список объектов типа `SourceBuffer` (en-US) , связанных непосредственно с текущим `MediaSource`.

`MediaSource.activeSourceBuffers` (en-US) Только для чтения

Возвращает объект типа `SourceBufferList` (en-US) содержащий подмножество объектов типа `SourceBuffer` (en-US) хранящих в себе другие объекты типа `SourceBuffers` — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.

`MediaSource.readyState` (en-US) Только для чтения

Возвращает enum, отображающий состояние текущего `MediaSource-объекта`, будь то отсутствие подключения к медиа-элементу(`closed`), подключённый и готовый к передаче объектов типа `SourceBuffer` (en-US) (open), или подключённый, но с завершённым потоком `MediaSource.endOfStream()` (en-US) (`ended`.)

`MediaSource.duration` (en-US)

Возвращает или устанавливает продолжительность предоставляемых медиаданных.

Методы
------

*Наследует свойства родительского интерфейса, `EventTarget`.*

`MediaSource.addSourceBuffer()` (en-US)

Создаёт новый объект типа `SourceBuffer` (en-US), с указанным MIME-типом и добавляет в список `MediaSource`'s `SourceBuffers`.

`MediaSource.removeSourceBuffer()` (en-US)

Удаляет указанный `SourceBuffer` (en-US) из списка `SourceBuffers`, связанного с текущим `MediaSource-объектом`.

`MediaSource.endOfStream()` (en-US)

Сигнализирует об окончании потока.

Статичные методы
----------------

`MediaSource.isTypeSupported()` (en-US)

Возвращает значение `Boolean` (en-US), поясняющее, поддерживается ли клиентом полученный MIME-тип — если это так, то можно успешно создать объект типа `SourceBuffer` (en-US) для этого MIME-типа.

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

Нижеприведённый простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть просмотрен здесь в виде демо (также вы можете загрузить исходный код для дальнейшего изучения.)

```js
var video = document.querySelector("video");

var assetURL = "frag\_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource();
  //console.log(mediaSource.readyState); // closed
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen(\_) {
  //console.log(this.readyState); // open
  var mediaSource = this;
  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, function (buf) {
    sourceBuffer.addEventListener("updateend", function (\_) {
      mediaSource.endOfStream();
      video.play();
      //console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

function fetchAB(url, cb) {
  console.log(url);
  var xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
}
```

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

| Specification |
| --- |
| Media Source Extensions™ # mediasource |

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

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

See also
--------

* `SourceBuffer` (en-US)
* `SourceBufferList` (en-US)


CanvasGradient - Интерфейсы веб API

CanvasGradient
==============

Интерфейс **`CanvasGradient`** представляет собой непрозрачный объект, описывающий градиент. Он возвращается методами `CanvasRenderingContext2D.createLinearGradient()` и `CanvasRenderingContext2D.createRadialGradient()` (en-US).

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

*Representing an opaque object, there is no exposed property.*

Методы
------

*Не имеет наследованных методов.*

`CanvasGradient.addColorStop()` (en-US)

Добавляет в градиент новый маркер, определяемый смещением и цветом. `Если смещение входдит за пределы 0` и `1`, генерируется `INDEX_SIZE_ERR`. Если не удаётся обработать цвет как CSS `<color>`, генерируется `SYNTAX_ERR`.

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

| Specification |
| --- |
| HTML Standard # canvasgradient |

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

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

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

* Методы создания в `CanvasRenderingContext2D`.
* Элемент `<canvas>` и связанный с ним интерфейс `HTMLCanvasElement`.


Location - Интерфейсы веб API

Location
========

Интерфейс **`Location`** представляет собой адрес (URL) объекта, с которым он связан. Его модификации отражаются на родительском объекте. Интерфейсы `Document` и `Window` имеют подобный `Location`, к которому можно получить доступ через `Document.location` и `Window.location` соответственно.

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

*Интерфейс `Location`* *не имеет унаследованных свойств, но реализует свойства `URLUtils`.*

`Location.href` (en-US)

`DOMString`, содержащий URL целиком. При изменении, соответствующий документ переходит на новую страницу.

`Location.protocol` (en-US)

`DOMString`, содержащий протокол текущего URL, включая `':'`.

`Location.host` (en-US)

`DOMString`, содержащий хост, а именно *имя хоста*, `':'` и *порт*.

`Location.hostname` (en-US)

`DOMString`, содержащий домен текущего URL.

`Location.port` (en-US)

`DOMString`, содержащий номер порта текущего URL.

`Location.pathname` (en-US)

`DOMString`, содержащий первый `'/'` после хоста с последующим текстом URL.

`Location.search` (en-US)

`DOMString`, содержащий `'?'` с последующими параметрами URL.

`Location.hash` (en-US)

`DOMString`, содержащий `'#'` с последующим идентификатором.

`Location.username` (en-US)

`DOMString`, содержащий имя пользователя, указанное перед именем домена.

`Location.password` (en-US)

`DOMString`, содержащий пароль, указанный перед именем домена.

`Location.origin` (en-US) Только для чтения

Возвращает `DOMString`, содержащий протокол, хост и порт текущего URL.

Методы
------

*Интерфейс `Location`* *не имеет унаследованных методов, но реализует методы `URLUtils`.*

`Location.assign()`

Загружает ресурс по URL, указанному в качестве параметра.

`Location.reload()`

Перезагружает ресурс по текущему URL. Единственный опциональный параметр `Boolean` (en-US) при значении `true` указывает, что страница должна быть заново загружена с сервера, при значении `false` страница может быть загружена из кеша.

`Location.replace()`

Заменяет текущий ресурс на новый по URL, указанному в качестве параметра. Отличие от `assign()` в том, что при использовании `replace()` текущая страница не будет сохранена в `History`, и пользователь не сможет использовать кнопку *назад*, чтобы вернуться к ней.

`Location.toString()` (en-US)

Возвращает `DOMString`, содержащий URL целиком. Это синоним `URLUtils.href`, однако он не может использоваться для изменения значения.

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

```js
// Этот пример создаёт ссылку и использует её свойство href
// Корректная альтернатива - использовать document.location или window.location текущего URL
var url = document.createElement("a");
url.href =
  "https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container";
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (пустой - https подразумевает порт 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
```

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

| Specification |
| --- |
| HTML Standard # the-location-interface |

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

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

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

* Два метода, создающих подобные объекты: `Window.location` и `Document.location`.
* Интерфейсы, относящиеся к URL: `URL`, `URLSearchParams` и `HTMLHyperlinkElementUtils`


HTMLDivElement - Интерфейсы веб API

HTMLDivElement
==============

Интерфейс **HTMLDivElement** предоставляет специальные свойства (не входящее в интерфейс `HTMLElement` ) для манипулирования DIV элементов.

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

*Наследует свойства родителя, `HTMLElement`.*

`HTMLDivElement.align`

Свойство типа `DOMString` указывающее выравнивание содержимого элемента относительно окружающего контекста. Принимает следующие значения `"left"`, `"right"`, `"justify"`, `"center"`.

Методы
------

*Не имеет специальных методов; Наследует методы родителя, `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmldivelement |

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

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

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

* HTML-элемент реализующий этот интерфейс: `<div>`.


CanvasRenderingContext2D - Интерфейсы веб API

CanvasRenderingContext2D
========================

Интерфейс **`CanvasRenderingContext2D`** предоставляет контекст 2D рендеринга для поверхности рисования элемента `<canvas>`.

Для того, чтобы получить объект этого интерфейса, следует вызвать метод `getContext()` объекта `<canvas>`, передав ему в качестве первого аргумента строку "2d":

```js
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
```

После того, как получен контекст 2D рендеринга для элемента canvas, вы можете начать работу с ним. Например:

```js
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);
```

Свойства и методы контекста 2D рендеринга представлены на боковой панели и далее по тексту. Кроме того, в руководстве по canvas содержится больше информации, примеров и ссылок на ресурсы по этой теме.

Рисование прямоугольников
-------------------------

Существует три метода, которые сразу же рисуют прямоугольники на холсте.

`CanvasRenderingContext2D.clearRect()`

Для всех пикселей, находящихся внутри прямоугольника, определённого начальной точкой *(x, y)* и размерами *(ширина, высота),* устанавливает чёрный прозрачный цвет, стирая любое ранее нарисованное содержимое.

`CanvasRenderingContext2D.fillRect()`

Рисует залитый прямоугольник в позиции *(x, y)*, размеры которого определяются шириной *width* и высотой *height*.

`CanvasRenderingContext2D.strokeRect()`

Рисует на холсте прямоугольник с начальной точкой в позиции *(x, y)*, имеющий ширину *w* и высоту *h*, используя текущий стиль обводки.

Рисование текста
----------------

Следующие методы позволяют создать текст. Смотрите также информацию об объекте `TextMetrics` (en-US), хранящем свойства текста.

`CanvasRenderingContext2D.fillText()`

Рисует (заливает) заданный текст в заданной позиции (x,y).

`CanvasRenderingContext2D.strokeText()`

Рисует обводку заданного текста в заданной позиции *(x, y)*.

`CanvasRenderingContext2D.measureText()`

Возвращает объект `TextMetrics` (en-US).

Стили линий
-----------

Следующие методы и свойства определяют как будут отрисовываться линии.

`CanvasRenderingContext2D.lineWidth`

Ширина линий. По умолчанию `1.0`

`CanvasRenderingContext2D.lineCap`

Форма концов линий. Возможные значения: `butt` (по умолчанию), `round`, `square`.

`CanvasRenderingContext2D.lineJoin`

Определяет форму вершин, в которых две линии сходятся. Возможные значения: `round`, `bevel`, `miter` (по умолчанию).

`CanvasRenderingContext2D.miterLimit`

Ограничение длины сопряжений. По умолчанию `10`.

`CanvasRenderingContext2D.getLineDash()`

Возвращает текущий паттерн штриховой линии, который представляет собой массив, состоящий из чётного количества неотрицательных чисел.

`CanvasRenderingContext2D.setLineDash()` (en-US)

Устанавливает текущий паттерн штриховой линии.

`CanvasRenderingContext2D.lineDashOffset`

Указывает с какого места начать штриховку линии.

Стили текста
------------

Следующие свойства контролируют отображение текста.

`CanvasRenderingContext2D.font`

Настройки шрифта. Значение по умолчанию: `10px sans-serif`.

`CanvasRenderingContext2D.textAlign`

Определяет выравнивание текста по горизонтали. Возможные значения: `start` (по умолчанию), `end`, `left`, `right` или `center`.

`CanvasRenderingContext2D.textBaseline`

Определяет выравнивание текста относительно базовой линии. Возможные значения: `top`, `hanging`, `middle`, `alphabetic` (по умолчанию), `ideographic`, `bottom`.

`CanvasRenderingContext2D.direction` (en-US)

Направление текста. Возможные значения: `ltr, rtl`, `inherit` (по умолчанию).

Стили заливки и обводки
-----------------------

Стили заливки применяются к цветам и стилям внутри форм, а стили обводки применяются к линиям вокруг форм.

`CanvasRenderingContext2D.fillStyle`

Цвет или стиль применяемый внутри форм. По умолчанию #000 (чёрный).

`CanvasRenderingContext2D.strokeStyle`

Цвет или стиль , применяемый к линиям вокруг формы. По умолчанию #000 (чёрный).

Градиенты и шаблоны
-------------------

`CanvasRenderingContext2D.createLinearGradient()`

Создаёт линейный градиент вдоль линии, задаваемой координатами, передаваемыми в параметры метода.

`CanvasRenderingContext2D.createRadialGradient()` (en-US)

Создаёт радиальный градиент, задаваемый координатами двух окружностей, передаваемыми в параметры метода.

`CanvasRenderingContext2D.createPattern()` (en-US)

Создаёт шаблон, используя указанное изображение (`CanvasImageSource` (en-US)). Он повторяет исходное изображение в направлениях, указанных во втором аргументе. Этот метод возвращает `CanvasPattern`.

Тени
----

`CanvasRenderingContext2D.shadowBlur` (en-US)

Устанавливает эффект размытия. По умолчанию `0`

`CanvasRenderingContext2D.shadowColor` (en-US)

Цвет тени. По умолчанию полностью прозрачный чёрный.

`CanvasRenderingContext2D.shadowOffsetX` (en-US)

Горизонтальное смещение тени. По умолчанию 0.

`CanvasRenderingContext2D.shadowOffsetY` (en-US)

Вертикальное смещение тени. По умолчанию 0.

Контуры
-------

Следующие методы могут быть использованы для манипулирования контурами объектов.

`CanvasRenderingContext2D.beginPath()`

Создаёт новый пустой контур, обнуляя список фрагментов контура. Вызовите этот метод, когда захотите создать новый контур.

`CanvasRenderingContext2D.closePath()`

Перемещает точку рисования назад к началу текущего фрагмента контура. Этот метод пытается провести прямую линию от текущей точки до начальной. Если форма уже закрыта или имеет только одну точку, метод ничего не делает.

`CanvasRenderingContext2D.moveTo()`

Перемещает начальную точку нового фрагмента контура в точку с координатами **(x, y)**.

`CanvasRenderingContext2D.lineTo()`

Соединяет последнюю точку фрагмента контура и точку с координатами `(x,y)` прямой линией.

`CanvasRenderingContext2D.bezierCurveTo()`

Добавляет кубическую кривую Безье к контуру. Для построения требуется три точки. Первые две точки являются контрольными, а третья - конечной. В качестве начальной точки выступает последняя точка текущего фрагмента контура, но она может быть изменена с помощью метода moveTo() перед созданием кривой Безье.

`CanvasRenderingContext2D.quadraticCurveTo()` (en-US)

Добавляет квадратичную кривую Безье к текущему контуру.

`CanvasRenderingContext2D.arc()`

Добавляет к контуру дугу, с центром в точке *(x, y)*, радиусом *r,* имеющую угол начала *startAngle* и конца *endAngle*, рисующуюся в направлении, заданном в аргументе *anticlockwise* (по умолчанию - по часовой стрелке).

`CanvasRenderingContext2D.arcTo()`

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

`CanvasRenderingContext2D.ellipse()`
Экспериментальная возможность

Добавляет к контуру эллипс, с центром в точке *(x, y)*, заданный радиусами *radiusX* и *radiusY*, имеющий угол начала *startAngle* и конца *endAngle*, рисующийся в направлении, заданном в аргументе *anticlockwise* (по умолчанию - по часовой стрелке).

`CanvasRenderingContext2D.rect()`

Создаёт контур прямоугольника с началом в точке *(x, y)*, и размерами, заданными шириной *width* и высотой *height*.

Рисование контуров
------------------

`CanvasRenderingContext2D.fill()`

Заливает фрагменты контура текущей заливкой.

`CanvasRenderingContext2D.stroke()`

Выполняет обводку фрагментов контура текущей обводкой.

`CanvasRenderingContext2D.drawFocusIfNeeded()` (en-US)

Если заданный элемент находится в фокусе, этот метод рисует рамку фокуса вокруг текущего контура.

`CanvasRenderingContext2D.scrollPathIntoView()` (en-US)

Прокручивает текущий или заданный контур в видимую область окна браузера.

`CanvasRenderingContext2D.clip()` (en-US)

Создаёт область отсечения из текущих фрагментов контура. Все что рисуется после вызова метода `clip()` применяется только внутри области отсечения. Пример использования см. в разделе Области отсечения руководства по Canvas.

`CanvasRenderingContext2D.isPointInPath()` (en-US)

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

`CanvasRenderingContext2D.isPointInStroke()` (en-US)

Позволяет узнать, находится ли указанная точка на обводке контура.

Трансформации
-------------

Объекты в контексте рендеринга `CanvasRenderingContext2D` имеют текущую матрицу преобразований и методы для управления ей. Матрица преобразований применяется в момент создания текущего контура по умолчанию, рисования текста, форм и объектов `Path2D` (en-US). Методы, перечисленные ниже, остаются по историческим причинам и из соображений совместимости, в то время как в настоящее время в большинстве разделов API используются объекты `SVGMatrix` (en-US), которые будут использоваться в будущем как замена устаревшим методам.

`CanvasRenderingContext2D.rotate()`

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

`CanvasRenderingContext2D.scale()` (en-US)

Добавляет к элементам холста трансформацию масштабирования в x раз по горизонтали и y раз по вертикали.

`CanvasRenderingContext2D.translate()` (en-US)

Добавляет трансформацию перемещения, перемещая начальную точку системы координат холста на x по горизонтали и y по вертикали.

`CanvasRenderingContext2D.transform()` (en-US)

Управляет текущей матрицей преобразований при помощи матрицы, описанной аргументами, переданными в метод.

`CanvasRenderingContext2D.setTransform()` (en-US)

Переустанавливает текущую матрицу преобразований в единичную матрицу, после чего вызывает метод `transform()` с теми же аргументами.

`CanvasRenderingContext2D.resetTransform()` (en-US)
Экспериментальная возможность

Переустанавливает текущую матрицу преобразований в единичную матрицу.

Композиция
----------

`CanvasRenderingContext2D.globalAlpha`

Значение альфа-канала, применяемое к формам и изображениям, прежде чем они накладываются на холст. Значение по умолчанию `1.0` (полностью непрозрачный).

`CanvasRenderingContext2D.globalCompositeOperation` (en-US)

Совместно с применённым `globalAlpha` это свойство определяет как формы и изображения накладываются на существующее изображение.

Рисование изображений
---------------------

`CanvasRenderingContext2D.drawImage()`

Рисует заданное изображение. У этого метода есть несколько различных форматов вызова, что обеспечивает большую гибкость в его использовании.

Манипулирование пикселями
-------------------------

Смотрите также объект `ImageData`.

`CanvasRenderingContext2D.createImageData()` (en-US)

Создаёт новый пустой объект `ImageData` с заданными размерами. Цвет всех пикселов в новом объекте устанавливается в прозрачный чёрный.

`CanvasRenderingContext2D.getImageData()`

Возвращает объект `ImageData`, представляющий данные о пикселах, расположенных под областью холста, ограниченной прямоугольником длиной *sw* и высотой *sh*, начальная точка которого находится в позиции *(sx, sy)*.

`CanvasRenderingContext2D.putImageData()`

Переносит данные, заданные в объекте `ImageData`, на холст. Если в аргументах задана уточняющая прямоугольная область, отрисованы будут только пикселы из этой области.

Сглаживание изображений
-----------------------

`CanvasRenderingContext2D.imageSmoothingEnabled` (en-US)
Экспериментальная возможность

Режим сглаживания изображений; если отключён, изображения не будут сглаживаться при масштабировании.

Состояние холста
----------------

Контекст рендеринга `CanvasRenderingContext2D` содержит множество состояний стилей рисования (атрибуты для стилей линий, стили теней, стили текста). Следующие методы помогут вам работать с этими состояниями:

`CanvasRenderingContext2D.save()`

Сохраняет текущее состояние стилей рисования, используя для этого стек, так что вы можете отменить любые внесённые в него изменения с помощью метода `restore()`.

`CanvasRenderingContext2D.restore()`

Восстанавливает состояние стилей рисования в значение, сохранённое методом `save()` в стек состояний последним.

`CanvasRenderingContext2D.canvas`

Доступная только для чтения обратная ссылка на `HTMLCanvasElement`. Может иметь значение `null`, если она не связана с элементом `<canvas>`.

Области попадания
-----------------

`CanvasRenderingContext2D.addHitRegion()`
Экспериментальная возможность

Добавляет область попадания к холсту.

`CanvasRenderingContext2D.removeHitRegion()`
Экспериментальная возможность

Удаляет область попадания с указанным `id` с холста.

`CanvasRenderingContext2D.clearHitRegions()`
Экспериментальная возможность

Удаляет все области попадания с холста.

Нестандартные API
-----------------

### Blink и WebKit

Большинство из этих API являются запрещёнными и будут удалены в будущем.

Non-standard `CanvasRenderingContext2D.clearShadow()`

Удаляет все настройки теней, такие как `CanvasRenderingContext2D.shadowColor` (en-US) и `CanvasRenderingContext2D.shadowBlur` (en-US).

Non-standard `CanvasRenderingContext2D.drawImageFromRect()`

This is redundant with an equivalent overload of `drawImage`.

Non-standard `CanvasRenderingContext2D.setAlpha()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.globalAlpha`.

Non-standard `CanvasRenderingContext2D.setCompositeOperation()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.globalCompositeOperation` (en-US).

Non-standard `CanvasRenderingContext2D.setLineWidth()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineWidth`.

Non-standard `CanvasRenderingContext2D.setLineJoin()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineJoin`.

Non-standard `CanvasRenderingContext2D.setLineCap()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.lineCap`.

Non-standard `CanvasRenderingContext2D.setMiterLimit()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.miterLimit`.

Non-standard `CanvasRenderingContext2D.setStrokeColor()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.strokeStyle`.

Non-standard `CanvasRenderingContext2D.setFillColor()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.fillStyle`.

Non-standard `CanvasRenderingContext2D.setShadow()`

Вместо этого метода следует использовать `CanvasRenderingContext2D.shadowColor` (en-US) и `CanvasRenderingContext2D.shadowBlur` (en-US).

Non-standard `CanvasRenderingContext2D.webkitLineDash`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.getLineDash()` и `CanvasRenderingContext2D.setLineDash()` (en-US).

Non-standard `CanvasRenderingContext2D.webkitLineDashOffset`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.lineDashOffset`.

Non-standard `CanvasRenderingContext2D.webkitImageSmoothingEnabled`

Вместо этого свойства следует использовать `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US).

### Только Blink

Non-standard `CanvasRenderingContext2D.getContextAttributes()`

По аналогии с аналогичным методом класса `WebGLRenderingContext`, возвращает объект `Canvas2DContextAttributes`, который содержит атрибуты "storage", показывающие какое хранилище используется (по умолчанию "persistent") и атрибут "alpha" (`true` по умолчанию), показывающий используется ли прозрачность на холсте.

Non-standard `CanvasRenderingContext2D.isContextLost()`

По аналогии с аналогичным методом класса `WebGLRenderingContext`, возвращает `true` если контекст canvas был потерян, `иначе false`.

### Только WebKit

Non-standard `CanvasRenderingContext2D.webkitBackingStorePixelRatio`

Размер хранилища по отношению к элементу canvas. Смотри High DPI Canvas.

Non-standard `CanvasRenderingContext2D.webkitGetImageDataHD`

Предназначался для HD хранилищ, но удалён из спецификации canvas.

Non-standard `CanvasRenderingContext2D.webkitPutImageDataHD`

Предназначался для HD хранилищ, но удалён из спецификации canvas.

### Только Gecko

Non-standard `CanvasRenderingContext2D.filter` (en-US)

CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

#### Prefixed APIs

Non-standard `CanvasRenderingContext2D.mozFillRule`

The fill rule to use. This must be one of `evenodd` or `nonzero` (default).

Non-standard `CanvasRenderingContext2D.mozImageSmoothingEnabled`

See `CanvasRenderingContext2D.imageSmoothingEnabled` (en-US).

Non-standard
Устарело
 `CanvasRenderingContext2D.mozDash`

An array which specifies the lengths of alternating dashes and gaps. Use `CanvasRenderingContext2D.getLineDash()` and `CanvasRenderingContext2D.setLineDash()` (en-US) instead.

Non-standard
Устарело
 `CanvasRenderingContext2D.mozDashOffset`

Specifies where to start a dash array on a line. Use `CanvasRenderingContext2D.lineDashOffset` instead.

Non-standard
Устарело
 `CanvasRenderingContext2D.mozTextStyle`

Introduced in in Gecko 1.9, deprecated in favor of the `CanvasRenderingContext2D.font` property.

Non-standard `CanvasRenderingContext2D.mozDrawText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use `CanvasRenderingContext2D.strokeText()` or `CanvasRenderingContext2D.fillText()` instead.

Non-standard `CanvasRenderingContext2D.mozMeasureText()`

This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use `CanvasRenderingContext2D.measureText()` instead.

Non-standard `CanvasRenderingContext2D.mozPathText()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Non-standard `CanvasRenderingContext2D.mozTextAlongPath()`

This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

#### Internal APIs (chrome-context only)

Non-standard `CanvasRenderingContext2D.asyncDrawXULElement()`

Renders a region of a XUL element into the `canvas`.

Non-standard `CanvasRenderingContext2D.drawWindow()` (en-US)

Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.

Non-standard `CanvasRenderingContext2D.demote()`

This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

### Internet Explorer

Non-standard `CanvasRenderingContext2D.msFillRule`

The fill rule to use. This must be one of `evenodd` or `nonzero` (default).

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

| Specification |
| --- |
| HTML Standard # 2dcontext |

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

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

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

* `HTMLCanvasElement`


Глобальная функция fetch() - Интерфейсы веб API

Глобальная функция fetch()
==========================

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

Глобальный метод **`fetch()`** запускает процесс извлечения ресурса из сети. Возвращает promise, содержащий `Response` объект (ответ на запрос).

Промис `fetch()` завершается `TypeError`, если возникает сетевая ошибка, хотя обычно это означает проблему с доступами или аналогичную ей. Для успешного завершения `fetch()` достаточно удостовериться в том, что промис выполнен и что свойство `Response.ok` (en-US) имеет значение `true`. HTTP статус 404 не является сетевой ошибкой.

Метод `fetch()` контролируется директивой `connect-src` directive of Content Security Policy (en-US) (политика безопасности контента), а не директивой ресурсов, которые извлекает.

**Примечание:** Аргументы метода `fetch()` идентичны аргументам `Request()` (en-US) конструктора.

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

Promise<Response> fetch(input[, init]);
```

### Аргументы

*input*

Определяет желаемый для получения ресурс. Это может быть:

* `USVString` (en-US) (строка), содержащая прямую URL ссылку на ресурс. Некоторые браузеры принимают `blob:` и `data:` , как схемы.
* `Request` объект (объект ответа).

*init* Необязательный

Объект с опциями, содержащий пользовательские настройки, которые вы желаете применить к запросу. Возможные варианты:

* `method`: Метод запроса, например, `GET`, `POST`.
* `headers`: Заголовки, содержащиеся в объекте `Headers` (en-US) или в объекте литерале с побитовыми значениями (`ByteString` (en-US)).
* `body`: Тело запроса, которое может быть: `Blob`, `BufferSource`, `FormData`, `URLSearchParams`, или `USVString` (en-US) объектами. Обратите внимание, что `GET` или `HEAD` запрос не может иметь тела.
* `mode`: Режим, например, `cors`, `no-cors` или `same-origin`.
* `credentials`: Полномочия: `omit`, `same-origin` или `include`. Для автоматической отправки куки для текущего домена, эта опция должна быть указана. Начиная с Chrome 50, это свойство также принимает экземпляр класса `FederatedCredential` (en-US) или `PasswordCredential` (en-US).
* `cache`: Режим кеширования запроса `default`, `no-store`, `reload`, `no-cache`, `force-cache` или `only-if-cached`.
* `redirect`: Режим редиректа: `follow` (автоматически переадресовывать), `error` (прерывать перенаправление ошибкой) или `manual` (управлять перенаправлениями вручную). В Chrome по дефолту стоит `follow` (ранее, в Chrome 47, стояло `manual`).
* `referrer`: `USVString` (en-US), определяющая `no-referrer`, `client` или a URL. Дефолтное значение - `client`.
* `referrerPolicy`: Определяет значение HTTP заголовка реферера. Может быть: `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`, `unsafe-url`.
* `integrity`: Содержит значение целостности субресурсов (subresource integrity (en-US)) запроса (например, `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
* `keepalive`: Эта опция может быть использована, чтобы разрешить запросу "пережить" страницу. Получение ресурсов с флагом `keepalive` - это альтернатива `Navigator.sendBeacon()` API.
* `signal`: Экземпляр объекта `AbortSignal`; позволяет коммуницировать с fetch запросом и, если нужно, отменять его с помощью `AbortController`.

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

`Promise` (en-US), содержащий `Response` объект (ответ на запрос).

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

| **Тип** | **Описание** |
| --- | --- |
| `AbortError` | Запрос был отменён (используя `AbortController.abort()`). |
| `TypeError` | Начиная с версии Firefox 43, `fetch()` завершится ошибкой `TypeError`, если URL имеет такие полномочия, как `http://user:password@example.com`. |

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

В нашем Fetch Request примере (см. Fetch Request live) мы создаём новый объект `Request` (запроса), используя релевантный конструктор, а затем получаем его вызовом `fetch()`. Так как запрашиваемый ресурс - изображение, для того, чтобы присвоить ему подходящий MIME тип и обработать должным образом, мы применяем к ответу метод `Body.blob()` (en-US), после чего создаём для него Object URL и передаём её в элемент `<img>`.

```js
var myImage = document.querySelector("img");

var myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then(function (response) {
    return response.blob();
  })
  .then(function (response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
  });
```

В нашем Fetch with init then Request примере (см. Fetch Request init live) мы делаем тоже самое, за исключением того, что передаём в качестве аргумента для `fetch()` объект init:

```js
var myImage = document.querySelector('img');

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ...
});
```

Обратите внимание, что объект init в качестве аргумента можно передать и в конструктор `Request` для получения аналогичного результата, например:

```js
var myRequest = new Request("flowers.jpg", myInit);
```

Допустимо использования объекта литерала в качестве `headers` в `init`.

```js
var myInit = {
  method: "GET",
  headers: {
    "Content-Type": "image/jpeg",
  },
  mode: "cors",
  cache: "default",
};

var myRequest = new Request("flowers.jpg", myInit);
```

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

| Specification |
| --- |
| Fetch Standard # fetch-method |

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

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

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

* Fetch API
* ServiceWorker API (en-US)
* HTTP access control (CORS) (en-US)
* HTTP


HTMLCollection - Интерфейсы веб API

HTMLCollection
==============

Интерфейс **`HTMLCollection`** является обобщённой коллекцией (объектом, ведущим себя подобно массиву) элементов (в порядке упоминания в документе) и предоставляет методы и свойства для получения хранящихся в нём элементов.

**Примечание:** Интерфейс назван `HTMLCollection` по историческим причинам. До стандарта DOM4 коллекции, реализующие данный интерфейс, использовались только для хранения HTML-элементов.

`HTMLCollection`, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.

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

`HTMLCollection.length` (en-US) Только для чтения

Возвращает количество элементов в коллекции.

Методы
------

`HTMLCollection.item()`

Возвращает узел с порядковым номером `index`; отсчёт ведётся от нуля. Возвращает `null`, если `index` выходит за границы допустимого диапазона.

`HTMLCollection.namedItem()` (en-US)

Возвращает узел, идентификатор или имя (в целях совместимости) которого совпадает со строкой, переданной в аргументе `name`. Соответствие имени проверяется в самую последнюю очередь, только для HTML-элементов и только для тех из них, которые поддерживают свойство `name`. Возвращает `null` , если искомый элемент отсутствует.

Использование в JavaScript
--------------------------

`HTMLCollection` предоставляет своё содержимое как собственные свойства, доступные как по имени, так и по индексу (как в массиве). Это связано с тем, что идентификаторы HTML-элементов, содержащие точки и двоеточие (допустимо в HTML5), адресуемы исключительно через синтаксис доступа к массиву. Однако, при числовых идентификаторах невозможно определить, производится ли запрос по индексу или по идентификатору, неявно приведённому к числу.

Пусть в документе присутствует элемент `<form>` с `id`, равным «`myForm`»:

```js
var elem1, elem2;

// document.forms имеет тип HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // выводит "true"

elem1 = document.forms.myForm;
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // выводит "true"

elem1 = document.forms["named.item.with.periods"];
```

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

| Specification |
| --- |
| DOM Standard # interface-htmlcollection |

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

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

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

* `NodeList`
* `HTMLFormControlsCollection` (en-US), `HTMLOptionsCollection` (en-US)


HTMLElement - Интерфейсы веб API

HTMLElement
===========

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

EventTarget

Node

Element

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

*Наследует свойства родителя, `Element`, и реализует их через `GlobalEventHandlers` и `TouchEventHandlers`.*

`HTMLElement.accessKey` — ключ доступа

Эта строковая переменная `DOMString` отображает ключ доступа, сопоставленный элементу *`Element`*.

`HTMLElement.accessKeyLabel` (en-US) Только для чтения

Возвращает `DOMString`, содержащий назначенный ключ доступа элемента.

`HTMLElement.contentEditable`

Является `DOMString`, где значение" true "означает, что элемент доступен для редактирования, а значение" false " означает, что это не так.

`HTMLElement.isContentEditable` (en-US) Только для чтения

Возвращает `Boolean` (en-US), который указывает, можно ли редактировать содержимое элемента.

`HTMLElement.contextMenu`

Является `HTMLMenuElement` (en-US), представляющим контекстное меню, связанное с элементом. Может быть null

`HTMLElement.dataset` (en-US) Только для чтения  — набор данных

Возвращает `domstringmap`, который позволяет получить доступ к чтению и записи атрибутов пользовательских данных элемента (data-\*) .

`HTMLElement.dir` (en-US)

Is a `DOMString`, reflecting the `dir` global attribute, representing the directionality of the element. Possible values are `"ltr"`, `"rtl"`, and `"auto"`.

`HTMLElement.draggable` (en-US)

Is a `Boolean` indicating if the element can be dragged.

`HTMLElement.dropzone` Только для чтения

Returns a `DOMSettableTokenList` reflecting the `dropzone` global attribute and describing the behavior of the element regarding a drop operation.

`HTMLElement.hidden`

Is a `Boolean` indicating if the element is hidden or not.

`HTMLElement.itemScope`
Экспериментальная возможность

Is a `Boolean`…

`HTMLElement.itemType` Только для чтения
Экспериментальная возможность

Returns a `DOMSettableTokenList`…

`HTMLElement.itemId`
Экспериментальная возможность

Is a `DOMString`…

`HTMLElement.itemRef` Только для чтения
Экспериментальная возможность

Returns a `DOMSettableTokenList`…

`HTMLElement.itemProp` Только для чтения
Экспериментальная возможность

Returns a `DOMSettableTokenList`…

`HTMLElement.itemValue`
Экспериментальная возможность

Returns an `Object`…

`HTMLElement.lang` (en-US)

Is a `DOMString` representing the language of an element's attributes, text, and element contents.

`HTMLElement.offsetHeight` Только для чтения
Экспериментальная возможность

Returns a `double` containing the height of an element, relative to the layout.

`HTMLElement.offsetLeft`Только для чтения
Экспериментальная возможность

Returns a `double`, the distance from this element's left border to its `offsetParent`'s left border.

`HTMLElement.offsetParent` (en-US)Только для чтения
Экспериментальная возможность

Returns an `Element` that is the element from which all offset calculations are currently computed.

`HTMLElement.offsetTop`Только для чтения
Экспериментальная возможность

Returns a `double`, the distance from this element's top border to its `offsetParent`'s top border.

`HTMLElement.offsetWidth`Только для чтения
Экспериментальная возможность

Returns a `double` containing the width of an element, relative to the layout.

`HTMLElement.properties` Только для чтения
Экспериментальная возможность

Returns an `HTMLPropertiesCollection`…

`HTMLElement.spellcheck` (en-US)

Is a `Boolean` that controls spell-checking (en-US). It is present on all HTML elements, though it hasn't an effect on all of them.

`HTMLElement.style` (en-US)

Is `CSSStyleDeclaration`, an object representing the declarations of an element's style attributes.

`HTMLElement.tabIndex` (en-US)

Is a `long` representing the position of the element in the tabbing order.

`HTMLElement.title` (en-US)

Is a `DOMString` containing the text that appears in a popup box when mouse is over the element.

`HTMLElement.translate` (en-US)
Экспериментальная возможность

Is a `Boolean`

### Event handlers

Most events properties, of the form `onXYZ`, are defined on the `GlobalEventHandlers` or `TouchEventHandlers`, implemented by `HTMLElement`. A few more are specific to `HTMLElement`.

`HTMLElement.oncopy` (en-US)
Non-standard

Returns the event handling code for the `copy` event (Firefox bug 280959).

`HTMLElement.oncut` (en-US)
Non-standard

Returns the event handling code for the `cut` event (Firefox bug 280959).

`HTMLElement.onpaste` (en-US)
Non-standard

Returns the event handling code for the `paste` event (Firefox bug 280959).

`TouchEventHandlers.ontouchstart`
Non-standard

Returns the event handling code for the `touchstart (en-US)` event.

`TouchEventHandlers.ontouchend`
Non-standard

Returns the event handling code for the `touchend (en-US)` event.

`TouchEventHandlers.ontouchmove`
Non-standard

Returns the event handling code for the `touchmove (en-US)` event.

`TouchEventHandlers.ontouchenter`
Non-standard

Returns the event handling code for the `touchenter` event.

`TouchEventHandlers.ontouchleave`
Non-standard

Returns the event handling code for the `touchleave` event.

`TouchEventHandlers.ontouchcancel`
Non-standard

Returns the event handling code for the `touchcancel (en-US)` event.

Methods
-------

*Inherits methods from its parent, `Element`.*

`HTMLElement.blur()` (en-US)

Removes keyboard focus from the currently focused element.

`HTMLElement.click()`

Sends a mouse click event to the element.

`HTMLElement.focus()` (en-US)

Makes the element the current keyboard focus.

`HTMLElement.forceSpellCheck()` (en-US)
Экспериментальная возможность

Makes the spell checker runs on the element.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmlelement |

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

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

See also
--------

* `Element`