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

Document.anchors
================

**`anchors`** возвращает массив всех якорей в документе.

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

nodeList = document.anchors;
```

### Значение

`HTMLCollection`.

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

```js
if (document.anchors.length >= 5) {
  dump("найдено слишком много якорей");
  window.location = "http://www.google.com";
}
```

Следующий пример автоматически генерирует список якорей из заглавий блоков, имеющихся на странице:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <script>
 function init() {
 var toc = document.getElementById("toc");
 var i, li, newAnchor;
 for (i = 0; i < document.anchors.length; i++) {
 li = document.createElement("li");
 newAnchor = document.createElement("a");
 newAnchor.href = "#" + document.anchors[i].name;
 newAnchor.innerHTML = document.anchors[i].text;
 li.appendChild(newAnchor);
 toc.appendChild(li);
 }
 }
 </script>
  </head>
  <body onload="init()">
    <h1>Title</h1>
    <h2><a name="contents">Contents</a></h2>
    <ul id="toc"></ul>

    <h2><a name="plants">Plants</a></h2>
    <ol>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Pears</li>
    </ol>

    <h2><a name="veggies">Veggies</a></h2>
    <ol>
      <li>Carrots</li>
      <li>Celery</li>
      <li>Beats</li>
    </ol>
  </body>
</html>
```

Посмотреть на JSFiddle

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

По причине обратной совместимости возвращаемый массив якорей включает в себя лишь якоря, созданные с помощью атрибута **name**, а не а **id**.

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

| Specification |
| --- |
| HTML Standard # dom-document-anchors |

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

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


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

Document()
==========

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

**`Document`** конструктор создаёт новый `Document` объект, который является веб-страницей, загруженной в браузере и служит точкой входа в содержание страницы.

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

var document = new Document()
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-document① |

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

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


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

Document.hidden
===============

Доступное только для чтения свойство **`Document.hidden`** возвращает булево значение, показывающее является ли страница скрытой или нет.

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

var boolean = document.hidden
```

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

```js
document.addEventListener("visibilitychange", function () {
  console.log(document.hidden);
  // Modify behavior...
});
```

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

| Specification |
| --- |
| HTML Standard # dom-document-hidden |

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

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


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

Document.documentElement
========================

**`Document.documentElement`** - свойство только для чтения, которое возвращает элемент `Element` , который является коренным элементом документа `document` (en-US) (например элемент `<html>` для HTML документов).

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

var element = document.documentElement;
```

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

```js
var rootElement = document.documentElement;
var firstTier = rootElement.childNodes;

// firstTier -переменная объекта NodeList непосредственных потомков корневого элемента
for (var i = 0; i < firstTier.length; i++) {
  // что-то делает с каждым прямым потомком корневого элемента
  // как и firstTier[i]
}
```

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

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

HTML документ обычно содержит один дочерний узел - `<html>`, возможно с объявлением DOCTYPE перед ним. XML документы часто содержат множественные дочерние узлы: корневой элемент, объявление DOCTYPE, и инструкции по обработке (en-US).

Поэтому вам стоит использовать `document.documentElement` вместо `document.firstChild` для доступа к корневому элементу.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documentelement① |

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

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


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

Document.applets
================

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

Свойство **`applets`** объекта `Document` возвращает пустую коллекцию `HTMLCollection`. Это свойство сохраняется только для совместимости; в старых версиях браузеров оно возвращало список апплетов документа.

**Примечание:** Поддержка элемента `<applet>` удалена во всех браузерах. Поэтому вызов `document.applets` всегда возвращает пустую коллекцию.

### Значение

Пустая `HTMLCollection`.

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

| Specification |
| --- |
| HTML Standard # dom-document-applets |

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

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


Document.writeln() - Интерфейсы веб API

Document.writeln()
==================

Выводит в документ строку со знаком перевода каретки в конце.

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

document.writeln(line);
```

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

* `line` - строка содержащая текст.
Пример
------
```

document.writeln("<p>введите пароль:</p>");
```

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

**document.writeln** тоже самое, что document.write но добавляет знак новой строки.

**Примечание:** `document.writeln` (как и `document.write`) не работает с XHTML документами (вы получите ошибку "Operation is not supported" (`NS_ERROR_DOM_NOT_SUPPORTED_ERR`) в консоли ошибок). Происходит это, если открыть локальный файл с расширением .xhtml или документ с MIME типом application/xhtml+xml. Больше информации доступно на W3C XHTML FAQ.

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

writeln


Document.createTextNode() - Интерфейсы веб API

Document.createTextNode()
=========================

Создаёт новый текстовый узел.

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

var text = document.createTextNode(data);
```

* `text` - это текстовый узел.
* `data` - это строка с данными, которые будут помещены в текстовый узел.
Пример
------

```js
<!DOCTYPE html>
<html lang="en">
<head>
<title>createTextNode example</title>
<script>
function addTextNode(text) {
  var newtext = document.createTextNode(text),
      p1 = document.getElementById("p1");

  p1.appendChild(newtext);
}
</script>
</head>

<body>
  <button onclick="addTextNode('YES! ');">YES!</button>
  <button onclick="addTextNode('NO! ');">NO!</button>
  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>

  <hr />

  <p id="p1">First line of paragraph.</p>
</body>
</html>
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createtextnode① |

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

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


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

Document: DOMContentLoaded event
================================

Событие **`DOMContentLoaded`** запускается когда первоначальный HTML документ будет полностью загружен и разобран, без ожидания полной загрузки таблиц стилей, изображений и фреймов.

|  |  |
| --- | --- |
| Всплытие | да |
| Отменяемый | Да (хотя указано как простое событие, которое не может быть отменено) |
| Интерфейс | `Event` |
| Свойство обработчика событий | нет |

Разные события,`load`, должны быть использованы только для обнаружения полностью загруженной страницы. Это распространённая ошибка в использовании `load`, там где `DOMContentLoaded` было бы более уместным.

Синхронный JavaScript останавливает разбор DOM. Если вы хотите что бы DOM был разобран как можно быстрее после того как пользователь запросит страницу, вы должны сделать ваш JavaScript асинхронным and оптимизировать загрузку таблиц стилей. Если загружать как обычно, таблицы стилей тормозят разбор DOM так как они загружаются параллельно, "крадя" трафик у основного HTML документа.

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

### Основное применение

```js
document.addEventListener("DOMContentLoaded", (event) => {
  console.log("DOM полностью загружен и разобран");
});
```

### Отложенный DOMContentLoaded

```html
<script>
 document.addEventListener("DOMContentLoaded", (event) => {
 console.log("DOM полностью загружен и разобран");
 });

 for (let i = 0; i < 1000000000; i++) {} // Этот синхронный скрипт откладывает разбор DOM,
 // так что событие DOMContentLoaded будет запущено позже.
</script>
```

### Проверка того, завершена ли загрузка

`DOMContentLoaded` может сработать до того, как ваш скрипт будет запущен, поэтому разумно это проверить, перед добавлением обработчика.

```js
function doSomething() {
  console.info("DOM загружен");
}

if (document.readyState === "loading") {
  // Загрузка ещё не закончилась
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` Уже сработал
  doSomething();
}
```

### Живые примеры

#### HTML

```html
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```

```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

#reload {
  height: 2rem;
}
```

#### JS

```js
const log = document.querySelector(".event-log-contents");
const reload = document.querySelector("#reload");

reload.addEventListener("click", () => {
  log.textContent = "";
  window.setTimeout(() => {
    window.location.reload(true);
  }, 200);
});

window.addEventListener("load", (event) => {
  log.textContent = log.textContent + "load\n";
});

document.addEventListener("readystatechange", (event) => {
  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener("DOMContentLoaded", (event) => {
  log.textContent = log.textContent + `DOMContentLoaded\n`;
});
```

#### Result

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

| Specification |
| --- |
| HTML Standard # stop-parsing |

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

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

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

* События связанные с: `load`, `readystatechange`, `beforeunload`, `unload`
* Это событие `Window` нацеленное на: `DOMContentLoaded` (en-US)


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

Document.readyState
===================

Свойство **`Document.readyState`** описывает состояние загрузки `document`.

Когда значение этого свойства изменяется, в объекте `document` запускается событие `readystatechange (en-US)`.

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

var string = document.readyState;
```

### Значения

Свойство **readyState** объекта document может иметь одно из следующих значений:

`loading`

Страница все ещё загружается.

`interactive`

Страница уже загружена и DOM дерево построено, но дополнительные ресурсы, такие как изображения и iframe (en-US), все ещё загружаются.

`complete`

Страница и все дополнительные ресурсы уже загружены. Это состояние указывает, что событие `load (en-US)` уже вызвано.

При изменении значения, данного свойства, вызывается событие `readystatechange (en-US)` на объекте `document`.

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

### Разные состояния загрузки страницы

```js
switch (document.readyState) {
  case "loading":
    // Страница все ещё загружается
    break;
  case "interactive":
    // Страница уже загружена. Теперь мы можем получить доступ к DOM объектам.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // Страница загружена вместе с дополнительными ресурсами.
    console.log(
      "The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText,
    );
    break;
}
```

### readystatechange как альтернатива событию DOMContentLoaded

```js
// альтернатива событию DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};
```

### readystatechange как альтернатива событию load

```js
// альтернатива событию load
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
};
```

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

| Specification |
| --- |
| HTML Standard # current-document-readiness |

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

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

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

* Событие `readystatechange (en-US)`
* Событие `DOMContentLoaded (en-US)`
* Событие `load (en-US)`


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

Document.all
============

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

The `Document` Свойство **`all`** только для чтения интерфейса возвращает: `HTMLAllCollection` (en-US) С корнем в узле документа. Другими словами, он возвращает все содержимое страницы.

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

var htmlAllCollection = document.all;
```

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

В `HTMLAllCollection` (en-US) содержится все узлы в документе.

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

| Specification |
| --- |
| HTML Standard # dom-document-all |

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

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


Document.importNode() - Интерфейсы веб API

Document.importNode()
=====================

Метод **`importNode()`** объекта `Document` создаёт копию `Node` или `DocumentFragment` из другого документа, для последующей вставки в текущий документ.

Импортированный узел пока ещё не включён в дерево документов. Чтобы добавить его, вам необходимо вызвать один из методов вставки, например, `appendChild()` или `insertBefore()` с узлом, который *находится* в дереве документов.

В отличие от `document.adoptNode()` (en-US), исходный узел не удаляется из исходного документа. Импортированный узел является клоном оригинала.

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

var node = document.importNode(externalNode, deep);
```

*node*

Копируемый узел из области видимости импортируемого документа . Свойство `Node.parentNode` узла = `null`, до тех пор, пока он не будет вставлен в дерево документа.

*externalNode*

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

*deep*

Булеан, контролирующий, необходимо ли импортировать всё DOM поддерево узла *externalNode*.

* Если *deep* установлен в `true`, *узел externalNode* и все его потомки будут скопированы.
* Если *deep* установлен в `false`, импортируется только *externalNode* — новый узел не будет содержать потомков.

**Примечание:** In the DOM4 specification, *deep* was an optional argument with a default value of `true`.

This default has changed in the latest spec — the new default value is **`false`**. Though it's still an optional argument, you should always provide the `deep` argument for backward *and* forward compatibility. With Gecko 28.0, the console warns developers not to omit the argument. Starting with Gecko 29.0), a shallow clone is defaulted instead of a deep clone.

Example
-------

```js
var iframe = document.querySelector("iframe");
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);
```

Notes
-----

Nodes from external documents should be cloned using `document.importNode()` (or adopted using `document.adoptNode()` (en-US)) before they can be inserted into the current document. For more on the `Node.ownerDocument` issues, see the W3C DOM FAQ.

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-importnode① |

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

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

See also
--------

* `document.adoptNode()` (en-US)
* `Node.appendChild()`
* `Node.insertBefore()`


Document.close() - Интерфейсы веб API

Document.close()
================

Метод `document.close()` завершает запись в документ, открытый с помощью document.open().

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

document.close();
```

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

// открытие документа для записи в него.
// запись содержимого документа.
// закрытие документа.
document.open();
document.write("<p>The one and only content.</p>");
document.close();
```

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

| Specification |
| --- |
| HTML Standard # dom-document-close-dev |

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

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


Document.createDocumentFragment() - Интерфейсы веб API

Document.createDocumentFragment()
=================================

Создаёт новый пустой `DocumentFragment`.

Syntax
------
```

var fragment = document.createDocumentFragment();
```

`fragment` это ссылка на пустой объект `DocumentFragment`.

Description
-----------

`DocumentFragment`s являются DOM нодами. Они, при этом, не являются частями основного дерева DOM. Обычно используются для создания фрагмента документа, добавления в него новых элементов/нод, а затем присоединения этого фрагмента к основному дереву. В основном дереве фрагмент буден заменён собственными дочерними элементами.

Поскольку фрагмент документа хранится **в памяти** и не является частью основного дерева, добавление в него дочерних элементов не вызывает reflow (вычисление геометрии и позиций элементов). В следствие этого, использование фрагментов документа часто увеличивает производительность.

Example
-------

```js
var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createdocumentfragment① |

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

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

See also
--------

* `document.implementation.createDocument()` (en-US)
* `documentFragment`


document.images - Интерфейсы веб API

document.images
===============

### Кратко об объекте

`document.images` возвращает коллекцию изображений в текущем HTML документе.

### Синтаксис

```js
var htmlCollection = document.images;
```

### Пример

```js
var images = document.images;

for (var i = 0; i < images.length; i++) {
  if (images[i].src == "banner.gif") {
    alert("Баннер найден!");
  }
}
```

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

`document.images.length` — возвращает количество изображений на странице.

`document.images` является частью DOM HTML, и работает только в HTML документах.

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

| Specification |
| --- |
| HTML Standard # dom-document-images-dev |

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

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


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

Document.doctype
================

Возвращает Описание Типа Документа (Document Type Declaration, DTD) относительно текущего документа. Возвращаемый объект обеспечивает выполнение `DocumentType` (en-US) интерфейса. Используйте `DOMImplementation.createDocumentType()` (en-US) для создания `DocumentType`.

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

doctype = document.doctype;
```

* `doctype` - свойство только для чтения.
Пример
------

```js
var doctypeObj = document.doctype;

console.log(
  "doctypeObj.name: " +
    doctypeObj.name +
    "\n" +
    "doctypeObj.internalSubset: " +
    doctypeObj.internalSubset +
    "\n" +
    "doctypeObj.publicId: " +
    doctypeObj.publicId +
    "\n" +
    "doctypeObj.systemId: " +
    doctypeObj.systemId,
);
```

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

Свойство возвращает `null`, если не существует DTD связанного с текущим документом.

DOM уровня 2 не поддерживает редактирование описания типа документа.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-doctype① |

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

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


Document.hasFocus() - Интерфейсы веб API

Document.hasFocus()
===================

Метод **`Document.hasFocus()`** возвращает значение `Boolean`, указывающее имеет ли документ или любой элемент внутри документа фокус. Этот метод может быть использован, чтобы определить, имеет ли активный элемент в документе фокус.

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

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

focused = document.hasFocus();
```

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

`false` если активный элемент в документе не имеет фокуса; `true` если активный элемент в документе имеет фокус.

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

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
    <style>
 #message {
 font-weight: bold;
 }
 </style>
    <script>
 setInterval( checkPageFocus, 200 );

 function checkPageFocus() {
 var info = document.getElementById("message");

 if ( document.hasFocus() ) {
 info.innerHTML = "Документ имеет фокус.";
 } else {
 info.innerHTML = "Документ не имеет фокус.";
 }
 }

 function openWindow() {
 window.open (
 "http://developer.mozilla.org/",
 "mozdev",
 "width=640,
 height=300,
 left=150,
 top=260"
 );
 }
 </script>
  </head>
  <body>
    <h1>JavaScript hasFocus пример</h1>
    <div id="message">Ожидание действий со стороны пользователя</div>
    <div><button onclick="openWindow()">Открыть новое окно</button></div>
  </body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-document-hasfocus-dev |

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

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

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

* Using the Page Visibility API (en-US)


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

Document.links
==============

Возвращает объект всех элементов `<area>` и `<a>`, присутствующих на странице с значением атрибута href.

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

nodeList = document.links
```

### Значение

`HTMLCollection`.

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

```js
var links = document.links;
for (var i = 0; i < links.length; i++) {
  var linkHref = document.createTextNode(links[i].href);
  var lineBreak = document.createElement("br");
  document.body.appendChild(linkHref);
  document.body.appendChild(lineBreak);
}
```

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

| Specification |
| --- |
| HTML Standard # dom-document-links-dev |

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

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


Document.evaluate() - Интерфейсы веб API

Document.evaluate()
===================

Возвращает экземпляр объекта типа `XPathResult` (en-US) исходя из данного XPath (en-US) и других входных параметров.

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

var xpathResult = document.evaluate(
 xpathExpression,
 contextNode,
 namespaceResolver,
 resultType,
 result
);
```

* `xpathExpression` - строка, описывающая XPath, который должен быть исполнен.
* `contextNode` указывает*контекстный узел* для запроса (см. [http://www.w3.org/TR/xpath спецификация XPath). В качестве данного аргумента может быть задан объект *document*.
* `namespaceResolver` - функция, которой будут переданы все префиксы пространств имён. Она должна возвращать строку, описывающую URI, ассоциированный с данным префиксом. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. `null` is common for HTML documents or when no namespace prefixes are used.
* `resultType` - число, описывающее тип возвращаемого `XPathResult` (см. ниже). Используйте именные свойства-константы конструктора класса `XPathResult` (эквивалентно численным значениям от 0 до 9), как например `XPathResult.ANY_TYPE`.
* `result` - экземпляр объекта типа `XPathResult`, используемого для хранения результатов поиска по данному `xpathExpression`. Может принимать значение `null`
Пример
------

```js
var headings = document.evaluate(
  "/html/body//h2",
  document,
  null,
  XPathResult.ANY\_TYPE,
  null,
);
/\* Найти в документе все элементы h2
 \* В качестве результата будет получен узловой итератор. \*/
var thisHeading = headings.iterateNext();
var alertText = "В данном документе заголовками 2-го уровня являются:\n";
while (thisHeading) {
  alertText += thisHeading.textContent + "\n";
  thisHeading = headings.iterateNext();
}
alert(alertText); // Показывает alert со всеми найденными элементами h2
```

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as `//h2`. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits *every* node from the root and all subnodes looking for possible matches.

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

```js
document.evaluate(".//h2", document.body, null, XPathResult.ANY\_TYPE, null);
```

Notice in the above `document.body` has been used as the context instead of `document` so the XPath starts from the body element. (In this example, the `"."` is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving `//h2`) the query would start from the root node (`html`) which would be more wasteful.)

Более детально данный материал описан в статье Introduction to using XPath in JavaScript (en-US).

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

* Выражения XPath могут быть интерпретированы в HTML- и XML-документах.
* While using document.evaluate() works in FF2, in FF3 one must use someXMLDoc.evaluate() if evaluating against something other than the current document.
Типы возвращаемых данных
------------------------

These are supported values for the `resultType` parameter of the `evaluate` method:

| Result Type | Value | Description |
| --- | --- | --- |
| `ANY_TYPE` | 0 | Whatever type naturally results from the given expression. |
| `NUMBER_TYPE` | 1 | A result set containing a single number. Useful, for example, in an XPath expression using the `count()` function. |
| `STRING_TYPE` | 2 | A result set containing a single string. |
| `BOOLEAN_TYPE` | 3 | A result set containing a single boolean value. Useful, for example, an an XPath expression using the `not()` function. |
| `UNORDERED_NODE_ITERATOR_TYPE` | 4 | A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
| `ORDERED_NODE_ITERATOR_TYPE` | 5 | A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
| `UNORDERED_NODE_SNAPSHOT_TYPE` | 6 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document. |
| `ORDERED_NODE_SNAPSHOT_TYPE` | 7 | A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document. |
| `ANY_UNORDERED_NODE_TYPE` | 8 | A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression. |
| `FIRST_ORDERED_NODE_TYPE` | 9 | A result set containing the first node in the document that matches the expression. |

Results of `NODE_ITERATOR` types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

Results of `NODE_SNAPSHOT` types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

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

| Specification |
| --- |
| DOM Standard # dom-xpathevaluatorbase-evaluate |

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

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

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

* DOM:document.createExpression (en-US)
* XPath Code Snippets
* Check for browser support


document.createElement - Интерфейсы веб API

document.createElement
======================

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

В HTML-документах создаёт элемент c тем тегом, что указан в аргументе или `HTMLUnknownElement`, если имя тега не распознаётся.

В XUL-документах создаёт указанный в аргументе элемент XUL.

В остальных случаях создаёт элемент с нулевым *NamespaceURI*.

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

var element = document.createElement(tagName, [options]);
```

* `element` — созданный объект элемента.
* `tagName` — строка, указывающая элемент какого типа должен быть создан. nodeName создаётся и инициализируется со значением `tagName`.
* `options` — необязательный параметр, объект `ElementCreationOptions`, который может содержать только поле `is`, указывающее имя пользовательского элемента, созданного с помощью `customElements.define()` (см. Веб-компоненты).
### Пример

Данный пример создаёт новый элемент `<div>` и вставляет его перед элементом с идентификатором `org_div1`:

```html
<div><h1>Привет!</h1></div>
<div id="org\_div1">Текст выше сгенерирован автоматически.</div>
```

```js
document.body.onload = addElement;
var my_div = (newDiv = null);

function addElement() {
  // Создаём новый элемент div
  // и добавляем в него немного контента

  var newDiv = document.createElement("div");
  newDiv.innerHTML = "<h1>Привет!</h1>";

  // Добавляем только что созданный элемент в дерево DOM

  my_div = document.getElementById("org\_div1");
  document.body.insertBefore(newDiv, my_div);
}
```

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

Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.

Для создания элементов с заданным пространством имён используйте метод createElementNS.

Реализация `createElement` в Gecko не соответствует DOM спецификации для XUL и XHTML документов: `localName` и `namespaceURI` не устанавливаются в `null` в созданном документе. Смотрите Firefox bug 280692 для подробностей.

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

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-createelement① |

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

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


document.getElementById() - Интерфейсы веб API

document.getElementById()
=========================

Возвращает ссылку на элемент по его идентификатору (ID (en-US)); идентификатор является строкой, которая может быть использована для идентификации элемента; она может быть определена при помощи атрибута `id` в HTML или из скрипта.

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

element = document.getElementById(id);
```

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

**`id`**

чувствительная к регистру строка, являющаяся уникальным идентификатором искомого элемента.

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

ссылка на объект типа `Element` соответствующий указанному ID или `null`, если элемент с указанным ID не найден в документе.

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

```html
<!doctype html>
<html>
  <head>
    <title>getElementById example</title>
    <script>
 function changeColor(newColor) {
 var elem = document.getElementById("para1");
 elem.style.color = newColor;
 }
 </script>
  </head>
  <body>
    <p id="para1">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>
```

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

Начинающим следует знать, что верхний регистр в части имени метода 'Id' *должен* быть точным для корректного вызова функции; "getElementByID" будет *не корректно*, как бы естественно это ни казалось.

`Если элементы с указанным id отсутствуют`, функция вернёт null. Заметьте, что параметр id чувствителен к регистру, так `document.getElementById("Main")` вернёт `null` вместо элемента `<div id="main">`, потому что "M" и "m" различны для этого метода.

**Элементы вне документа** не ищутся `getElementById()`. При создании элемента и назначении ему ID, вам следует вставить элемент в дерево документа с помощью `Node.insertBefore()` или подобным методом, до того как вы сможете получить к нему доступ при помощи `getElementById()`:

```js
var element = document.createElement("div");
element.id = "testqq";
var el = document.getElementById("testqq"); // el will be null!
```

**Не-HTML документы**. Релизация DOM должна содержать информацию, сообщающую о том, какие атрибуты являются идентификаторами. Атрибуты с именем "id" не являются идентификаторами только если это не указано в описании типа документа (DTD). Атрибут "id" определён в качестве идентификатора в общих случаях XHTML, XUL, и других. От реализаций, которые не знают, какой атрибут является идентификатором, ожидается возврат null.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-nonelementparentnode-getelementbyid② |

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

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

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

* `Document` ссылка для иных методов и свойств которые вы можете использовать для получения ссылок на иные элементы.
* `Document.querySelector()` для выборки по таким запросам, как `'div.myclass'`
* xml:id - имеет метод, позволяющий getElementById() получать «xml: id» в XML-документах (например, возвращаемые вызовами Ajax)


Document.getElementsByName() - Интерфейсы веб API

Document.getElementsByName()
============================

Метод **`getElementsByName()`** объекта `Document` возвращает коллекцию `NodeList` элементов с заданным `name` (en-US).

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

var elements = document.getElementsByName(name);
```

* *elements* — это живая `NodeList` коллекция. То есть, она автоматически обновляется, когда элементы с таким же `name` добавляются/удаляются из документа.
* \_name \_— это значение поля `name` элемента(элементов).
Пример
------

```html
<!doctype html>
<html lang="en">
  <title>Example: using document.getElementsByName</title>

  <input type="hidden" name="up" />
  <input type="hidden" name="down" />

  <script>
 var up\_names = document.getElementsByName("up");
 console.log(up\_names[0].tagName); // displays "INPUT"
 </script>
</html>
```

Notes
-----

The `name` (en-US) attribute can only be applied in (X)HTML documents.

The returned `NodeList` Collection contains *all* elements with the given `name`, such as `<meta>`, `<object>` (en-US), and even elements which do not support the `name` attribute at all.

**Предупреждение:** The **getElementsByName** method works differently in IE10 and below. There, `getElementsByName()` also returns elements that have an `id` attribute with the specified value. Be careful not to use the same string as both a `name` and an `id`.

**Предупреждение:** The **getElementsByName** method works differently in IE. There, `getElementsByName()` does not return all elements which may not have a `name` attribute (such as `<span>`).

**Предупреждение:** Both IE and Edge return an `HTMLCollection`, not a `NodeList`

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

| Specification |
| --- |
| HTML Standard # dom-document-getelementsbyname-dev |

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

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

See also
--------

* `document.getElementById()` to return a reference to an element by its unique `id`
* `document.getElementsByTagName()` to return references to elements with the same tag name
* `document.querySelector()` to return references to elements via CSS selectors like `'div.myclass'`


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

Document.forms
==============

`forms` возвращает коллекцию (`HTMLCollection`) форм в текущем документе

**Примечание:** Точно также Вы можете получить список элементов выбранной формы, используя свойство `HTMLFormElement.elements`.

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

collection = document.forms;
```

### Значение

Объект `HTMLCollection` содержит все формы, имеющиеся на странице. Каждый элемент этой коллекции - это `HTMLFormElement` (en-US), представленный отдельным тегом `<form>`.

Если на странице форм нет, тогда возвращённый результат будет пустым, а длина коллекции равна нулю.

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

### Получение информации с формы
```

<!DOCTYPE html>
<html lang="en">

<head>
<title>document.forms example</title>
</head>

<body>

<form id="robby">
  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
</form>

<form id="dave">
  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
</form>

<form id="paul">
  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
</form>

</body>
</html>
```

### Получение элемента формы
```

var selectForm = document.forms[index];
var selectFormElement = document.forms[index].elements[index];
```

### Обращение к форме по её имени
```

<!DOCTYPE html>
<html lang="en">
<head>
  <title>document.forms example</title>
</head>

<body>

<form name="login">
  <input name="email" type="email">
  <input name="password" type="password">
  <button type="submit">Log in</button>
</form>

<script>
  var loginForm = document.forms.login; // Or document.forms['login']
  loginForm.elements.email.placeholder = 'test@example.com';
  loginForm.elements.password.placeholder = 'password';
</script>
</body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-document-forms-dev |

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

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

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

* HTML forms
* `<form>` и интерфейс `HTMLFormElement` (en-US)

*


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

Document.designMode
===================

`document.designMode` переключает режим редактирования для всего документа. Допустимые значения: "on" и "off". В соответствии со спецификацией, это свойство по умолчанию имеет значение "off". Firefox следует этому стандарту. В более ранних версии Chrome и IE это свойство по умолчанию имеет значение "inherit". Начиная с Chrome 43 значение по умолчанию "off", а значение "inherit" более не поддерживается. В IE6-10 значение должно быть указанно с большой буквы ("On" и "Off")

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

var mode = document.designMode;
document.designMode = "on" || "off";
```

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

Включить режим редактирования для `<iframe>` (en-US) :
```

iframeNode.contentDocument.designMode = "on";
```

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

| Specification |
| --- |
| HTML Standard # dom-document-designmode-dev |

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

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

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

* Rich-Text Editing в Mozilla
* `HTMLElement.contentEditable`
* Свойство designMode на MSDN


Document.getElementsByTagName() - Интерфейсы веб API

Document.getElementsByTagName()
===============================

Возвращает `HTMLCollection` элементов с указанным именем тега. Поиск осуществляется по всему документу, включая корневой узел. Возвращаемая HTMLCollection живая, это значит что она автоматически обновляет сама себя чтобы оставаться синхронизированной с DOM деревом без необходимости вызова document.getElementByTagName() снова.

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

var elements = document.getElementsByTagName(name);
```

* `elements` это живая `HTMLCollection` (с учётом примечания внизу) найденных документов в таком порядке в каком они появляются в дереве.
* `name` строка представляющая собой имя элемента. Специальная строка "\*" позволяет получить все элементы.

**Примечание:** Последняя W3C спецификация говорит что `elements` является `HTMLCollection`; между тем, данный метод возвращает `NodeList` в WebKit браузерах. См. Firefox bug 14869 для большей информации.

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

В следующем примере, getElementByTagName() стартует из отдельного родительского элемента и ищет сверху-вниз рекурсивно по DOM начиная с родительского элемента просматривая дочерние элементы на соответствие тегов параметру name.

Отметим что когда узел в котором `getElementsByTagName()` был вызван не является узлом `document`, по факту используется метод `element.getElementsByTagName()`.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>getElementsByTagName example</title>
    <script>
 function getAllParaElems() {
 var allParas = document.getElementsByTagName("p");
 var num = allParas.length;
 alert("There are " + num + " paragraph in this document");
 }

 function div1ParaElems() {
 var div1 = document.getElementById("div1");
 var div1Paras = div1.getElementsByTagName("p");
 var num = div1Paras.length;
 alert("There are " + num + " paragraph in #div1");
 }

 function div2ParaElems() {
 var div2 = document.getElementById("div2");
 var div2Paras = div2.getElementsByTagName("p");
 var num = div2Paras.length;
 alert("There are " + num + " paragraph in #div2");
 }
 </script>
  </head>
  <body style="border: solid green 3px">
    <p>Some outer text</p>
    <p>Some outer text</p>

    <div id="div1" style="border: solid blue 3px">
      <p>Some div1 text</p>
      <p>Some div1 text</p>
      <p>Some div1 text</p>

      <div id="div2" style="border: solid red 3px">
        <p>Some div2 text</p>
        <p>Some div2 text</p>
      </div>
    </div>

    <p>Some outer text</p>
    <p>Some outer text</p>

    <button onclick="getAllParaElems();">show all p elements in document</button
 ><br />

    <button onclick="div1ParaElems();">
      show all p elements in div1 element</button
 ><br />

    <button onclick="div2ParaElems();">
      show all p elements in div2 element
    </button>
  </body>
</html>
```

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

Когда вызывается на HTML document, `getElementsByTagName()` переводит в нижний регистр свой аргумент перед работой. Это может быть неожиданным при попытке найти соответствие для camelCase SVG элементов в поддереве HTML документа. В таком случае может быть полезен `document.getElementsByTagNameNS()` (en-US). Смотрите также Firefox bug 499656.

`document.getElementsByTagName()` подобен `element.getElementsByTagName()`, за исключением того что поиск охватывает весь документ.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbytagname① |

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

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


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

Document.activeElement
======================

Аннотация
---------

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

Часто возвращается `<input>` или `<textarea>` (en-US) объект, если он содержит в себе выделенный в данный момент текст. При этом вы можете получить более подробные сведения, используя свойства элемента `selectionStart` и `selectionEnd`. В других случаях сфокусированным элементом может быть `<select>` элемент (меню) или `<input>` элемент типа button, checkbox или radio.

**Примечание:** На Mac, элементы, не являющиеся текстовыми полями, как правило, не получают фокус.

Как правило, пользователь может нажать клавишу табуляции для перемещения по фокусируемым элементам страницы, и использовать пробел для их активации (нажать кнопку button, выбрать переключатель radio).

Не следует путать фокус с выделением документа, состоящего в основном из статических текстовых узлов. См. `window.getSelection()`.

Когда выделение отсутствует, активным элементом является `<body>` страницы или null.

**Примечание:** Этот атрибут является частью разрабатываемой спецификации HTML 5.

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

var curElement = document.activeElement;
```

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

```html
<!doctype html>
<html>
  <head>
    <script type="text/javascript" charset="utf-8">
 function init() {
 function onMouseUp(e) {
 console.log(e);
 var outputElement = document.getElementById("output-element");
 var outputText = document.getElementById("output-text");
 var selectedTextArea = document.activeElement;
 var selection = selectedTextArea.value.substring(
 selectedTextArea.selectionStart,
 selectedTextArea.selectionEnd,
 );
 outputElement.innerHTML = selectedTextArea.id;
 outputText.innerHTML = selection;
 }

 document
 .getElementById("ta-example-one")
 .addEventListener("mouseup", onMouseUp, false);
 document
 .getElementById("ta-example-two")
 .addEventListener("mouseup", onMouseUp, false);
 }
 </script>
  </head>
  <body onload="init()">
    <div>Выделите текст в одном из текстовых полей ниже:</div>
    <form id="frm-example" action="#" accept-charset="utf-8">
      <textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
Это текстовое поле 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea
 >
      <textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
Это текстовое поле 2:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea
 >
    </form>
    ID активного элемента: <span id="output-element"></span><br />
    Выделенный текст: <span id="output-text"></span>
  </body>
</html>
```

Посмотреть на JSFiddle

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

Первоначально введённое как собственное расширение DOM в Internet Explorer 4, это свойство также поддерживается в Opera и Safari (в версии 4).

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

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

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

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

Связанные события
-----------------

* `focus (en-US)`
* `blur (en-US)`
* `focusin (en-US)`
* `focusout (en-US)`


Document.write() - Интерфейсы веб API

Document.write()
================

Пишет строку в поток документа, открытый с помощью document.open() (en-US).

**Примечание:** Замечание: поскольку `document.write` пишет строку в **поток** документа, вызов `document.write` для закрытого (но загруженного) документа автоматически вызовет `document.open`, который очистит документ (en-US).

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

```js
document.write(разметка);
```

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

*разметка*

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

### Пример

```html
<html>
  <head>
    <title>write example</title>

    <script>
 function newContent() {
 alert("загрузка нового контента");
 document.open();
 document.write("<h1>Долой старое, да здравствует новое!</h1>");
 document.close();
 }
 </script>
  </head>

  <body onload="newContent();">
    <p>Какой-то оригинальный контент.</p>
  </body>
</html>
```

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

Запись в документ, загруженный без вызова `document.open(),` автоматически вызовет `document.open`. По окончании записи рекомендуется вызвать `document.close(),` чтобы браузер завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент `h1` становится узлом документа.

Если вызов `document.write()` производится во встроенном HTML теге `<script>` , вызов `document.open() не будет выполнен`. Например:

```html
<script>
 document.write("<h1>Основной заголовок</h1>");
</script>
```

**Примечание:** `document.write` и `document.writeln` не работают в XHTML документах (выводится сообщение "Операция не поддерживается" [`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с типом MIME - `application/xhtml+xml` . Больше информации доступно по адресу W3C XHTML FAQ.

**Примечание:** `document.write` в отложенных или асинхронных сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов `document.write()` из асинхронно загруженного внешнего сценария" в консоли ошибок.

**Примечание:** В Edge вызов `document.write` в `iframe` более одного раза приводит к ошибке SCRIPT70: Доступ запрещён.

**Примечание:** Начиная с версии 55, Chrome не исполняет элементы `<script>` вставленные посредством `document.write()` в случае отсутствия кеша HTTP для пользователей 2G подключения.

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

| Specification |
| --- |
| HTML Standard # dom-document-write-dev |

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

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

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

* `element.innerHTML`
* `document.createElement()`


Document.createRange() - Интерфейсы веб API

Document.createRange()
======================

Возвращает новый объект типа `Range`.

Syntax
------
```

range = document.createRange();
```

`range` содержит созданный объект `Range`.

Example
-------

```js
var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
```

Notes
-----

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

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

* DOM Level 2 Range: DocumentRange.createRange


Document.createComment() - Интерфейсы веб API

Document.createComment()
========================

Основное
--------

`createComment()` создаёт новый комментарий и возвращает его.

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

CommentNode = document.createComment(data)
```

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

`data`

Строка, которая будет внутри комментария

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

```js
var docu = new DOMParser().parseFromString("<xml></xml>", "application/xml");
var comment = docu.createComment("Это комментарий на странице");

docu.getElementsByTagName("xml")[0].appendChild(comment);

alert(new XMLSerializer().serializeToString(docu));
// Выведет: <xml><!--Это комментарий на странице--></xml>
```

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

* Вернёт **`NS_ERROR_DOM_INVALID_CHARACTER_ERR`**, если "--" есть в содержимом тега.
Спецификация
------------

* createComment


Document.querySelector() - Интерфейсы веб API

Document.querySelector()
========================

`Document` метод **`querySelector()`** возвращает первый элемент (`Element`) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение `null`.

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

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

```js
element = document.querySelector(selectors);
```

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

*селекторы*

`DOMString`, содержащий один или более селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если же нет, генерируется исключение `SYNTAX_ERR`. Смотрите Расположение элементов DOM с использованием селекторов для того, чтобы узнать больше о селекторах и о том, как ими управлять.

**Примечание:** Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов. См. Escaping special characters для получения дополнительной информации.

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

Ссылка на объект типа `Element`, являющийся первым элементов в документе, который соответствует указанному набору CSS селекторов, либо `null`, если совпадений нет.

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте функцию `querySelectorAll()`.

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

`SYNTAX_ERR`

Некорректный синтаксис указанных селекторов *selectors*.

Примечания по использованию
---------------------------

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

Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.

### Экранирование специальных символов

Чтобы сопоставить ID или селекторы, которые не соответствуют стандартному синтаксису CSS (например, использующих ненадлежащим образом двоеточие или пробел), необходимо экранировать символ обратной косой чертой ("`\`"). Поскольку обратная косая черта также является экранирующим символом в JavaScript, то при вводе литеральной строки необходимо экранировать её *дважды* (первый раз для строки JavaScript и второй для `querySelector()`):

```html
<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
 console.log("#foo\bar"); // "#fooar" (\b is the backspace control character)
 document.querySelector("#foo\bar"); // Does not match anything

 console.log("#foo\\bar"); // "#foo\bar"
 console.log("#foo\\\\bar"); // "#foo\\bar"
 document.querySelector("#foo\\bar"); // Match the first div

 document.querySelector("#foo:bar"); // Does not match anything
 document.querySelector("#foo\\:bar"); // Match the second div
</script>
```

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

### Выбор первого элемента с совпадающим классом

В этом примере, нам вернётся первый элемент в документе с классом "`myclass`":

```js
var el = document.querySelector(".myclass");
```

### Более сложный селектор

Селекторы, передаваемые в querySelector, могут быть использованы и для точного поиска, как показано в примере ниже. В данном примере возвращается элемент <input name="login"/>, находящийся в <div class="user-panel main">:

```js
var el = document.querySelector("div.user-panel.main input[name=login]");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselector① |

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

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

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

* Locating DOM elements using selectors
* `document.querySelectorAll()`
* `element.querySelector()`
* `element.querySelectorAll()`
* Фрагменты кода для querySelector


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

Document.embeds
===============

The **`embeds`** read-only property of the `Document` interface returns a list of the embedded `<object>` (en-US) elements within the current document.

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

nodeList = document.embeds
```

### Значение

`HTMLCollection`.

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

| Specification |
| --- |
| HTML Standard # dom-document-embeds-dev |


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

Document.referrer
=================

Возвращает URI страницы, с которой был совершён переход на текущую.

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

var referrer = document.referrer;
```

### Значение

Вернёт пустую строку, если пользователь попал на страницу напрямую (не через ссылку, а, например, через закладку). Т.к. свойство возвращает строку, это не даёт вам доступ к DOM ссылающейся страницы.

Внутри элемента `<iframe>` (en-US), `Document.referrer` первоначально будет установлен в тоже значение, что и `href` объекта `Window.location` родительского окна.

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

* DOM Level 2: referrer
Совместимость с браузерами
--------------------------

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


Document.execCommand() - Интерфейсы веб API

Document.execCommand()
======================

Обзор
-----

Когда HTML документ переключён в режим редактирования (`document.designMode`), для него будет доступен метод `execCommand`, который предоставляет команды для работы с контентом в редактируемой области. Большинство команд влияют на выделение (bold, italics, и т. п.), другие вставляют новые элементы (createLink) или влияют на всю строку (indenting). При использовании `contentEditable`, вызов `execCommand` влияет на активный редактируемый элемент.

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

```js
execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
```

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

>
>
> String aCommandName
>
> имя команды
>
>
>
>
>
> Boolean aShowDefaultUI
>
> нужно ли показать пользовательский интерфейс по умолчанию. Это не реализовано в Mozilla.
>
>
>
>
>
> String aValueArgument
>
> некоторым командам (например insertimage) также требуется значение аргумента (url картинки). Если аргумент не нужен введите `null`.
>
>
>
>
>

Команды
-------

>
>
> backColor
>
> Изменить цвет фона документа. В режиме styleWithCss командой устанавливается цвет фона родительского блока. Необходима передача строкового значения цвета в качестве аргумента. (Internet Explorer таким образом устанавливает цвет фона текста.)
>
>
>
>
>
> bold
>
> Включает/отключает выделение жирным bold отмеченного текста или начиная с места ввода текста. (Internet Explorer использует тег `<strong>` вместо `<b>`.)
>
>
>
>
>
> contentReadOnly
>
> Делает содержимое документа либо неизменяемым либо редактируемым. Требуется передача булевого true/false в качестве аргумента. (Не поддерживается Internet Explorer.)
>
>
>
>
>
> copy
>
> Копирует выделенное в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.
>
>
>
>
>
> createLink
>
> Создаёт ссылку из выделения, если таковое имеется. Необходима передача HREF URI в качестве аргумента. URI должен содержать как минимум один символ, допускается пробельный. (Internet Explorer создаст ссылку и без URI.)
>
>
>
>
>
> cut
>
> Вырезает выделенное и помещает его в буфер обмена. Возможность такого поведения отличается от браузера к браузеру и расширяется со временем. Следует проверить таблицу совместимости, чтобы убедиться в возможности использования.
>
>
>
>
>
> decreaseFontSize
>
> Добавляет тег `<small>` (en-US) вокруг выделения или с места ввода текста. (Не поддерживается Internet Explorer.)
>
>
>
>
>
> delete
>
> Удаляет выделенное.
>
>
>
>
>
> enableInlineTableEditing
>
> Включает/выключает возможность вставки и удаления строк/столбцов таблицы. (Не поддерживается Internet Explorer.)
>
>
>
>
>
> enableObjectResizing
>
> Включает/выключает возможность изменения размера картинок и других объектов. (Не поддерживается Internet Explorer.)
>
>
>
>
>
> fontName
>
> Изменяет название шрифта для выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта (напр., "Arial")
>
>
>
>
>
> fontSize
>
> Изменяет размер шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента размера шрифта (1-7).
>
>
>
>
>
> foreColor
>
> Изменяет цвет шрифта выделенного текста или с места ввода текста. Требует передачи в качестве аргумента наименования шрифта.
>
>
>
>
>
> formatBlock
>
> Добавляет тег HTML-блока вокруг строк, содержащих в себе выделенный текст, заменяя блочный элемент, содержащий такие строки, если он существует (в Firefox, BLOCKQUOTE является исключением - он обернёт любой блочный элемент). Требует передачи в качестве аргумента наименования Тега. Теоретически может использоваться любой блочный тег (напр., "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer поддерживает только теги заголовков H1 - H6, ADDRESS и PRE, которые должны также быть заключены в символы < >, как например: "<H1>".)
>
>
>
>
>
> forwardDelete
>
> Удаляет символ справа от курсора, так же как при нажатии на клавишу delete.
>
>
>
> heading
>
>
>  Добавляет тег заголовка вокруг выделенного текста либо в месте, где установлен курсор.
>  Требует передачи строки имени тега в качестве аргумента. (то есть "H1", "H6"). (Не поддерживается в Internet Explorer и Safari)
>
>
>
>
>
>
> hiliteColor
>
> Изменяет цвет фона для выделенного текста либо в месте, где установлен курсор. Требует передачи цвета в качестве аргумента. UseCSS должен быть включён для работы этой функции. (Не поддерживается в Internet Explorer)
>
>
>
>
>
> increaseFontSize
>
> Добавляет тег BIG вокруг выделенного текста или на месте курсора. (Не поддерживается в Internet Explorer)
>
>
>
>
>
> indent
>
> Добавляет отступ в строку, в которой расположен курсор (или что-то выделено). В Firefox, если выделение охватывает несколько строк с разными уровнями отступа, будут сдвинуты только строки с наименьшим отступом.
>
>
>
>
>
> insertBrOnReturn
>
> Добавляет тег `<br>` или разбивает текущий элемент на два блока. Не работает в Internet Explorer
>
>
>
>
>
> insertHorizontalRule
>
> Вставляет горизонтальную линию на месте курсора (удаляет выделение).
>
>
>
>
>
> insertHTML
>
> Вставляет HTML текст на месте курсора (удаляет выделенный текст). Требует передачи правильной HTML строки в качестве аргумента. (Не поддерживается в Internet Explorer)
>
>
>
>
>
> insertImage
>
> Вставляет изображение на место курсора (удаляет выделенный текст). Необходимо указывать ссылку на изображение в параметре "aValueArgument". (Internet Explorer может создавать изображения с пустым SRC)
>
>
>
>
>
> insertOrderedList
>
> Создаёт пронумерованный список из выбранного или на месте курсора.
>
>
>
>
>
> insertUnorderedList
>
> Создаёт список из выбранного или на месте курсора.
>
>
>
>
>
> insertParagraph
>
> Вставляет параграф вокруг выделения или для текущей строки. (Internet Explorer вставляет параграф в месте курсора и удаляет выделенный текст)
>
>
>
> insertText
>
> Вставляет простой текст в месте курсора или выделения (выделенный текст будет заменён).
>
>
>
>
>
> italic
>
> Переключает курсив в месте курсора или выделения. (Internet Explorer использует теги `<em>` вместо `<i>` (en-US).)
>
>
>
>
>
> justifyCenter
>
> Центрирует строку, в которой есть выделение или установлен курсор.
>
>
>
>
>
> justifyFull
>
> Выравнивает по ширине строку, в которой есть выделение или установлен курсор.
>
>
>
>
>
> justifyLeft
>
> Выравнивает по левому краю строку, в которой есть выделение или установлен курсор.
>
>
>
>
>
> justifyRight
>
> Выравнивает по правому краю строку, в которой есть выделение или установлен курсор.
>
>
>
>
>
> outdent
>
> Добавляет выступ для строки, в которой расположен курсор (или что-то выделено).
>
>
>
>
>
> paste
>
> Вставляет данные из буфера обмена в место курсора или выделения (последнее заменяется). Доступ к буферу обмена должен быть включён в файле user.js
>
>
>
>
>
> redo
>
> Повтор последнего действия. (Если было отменено с помощью **undo** или **ctrl+z**)
>
>
>
>
>
> removeFormat
>
> Очищает форматирование для выделенного.
>
>
>
>
>
> selectAll
>
> Выделяет всё в редактируемом документе.
>
>
>
>
>
> strikeThrough
>
> Переключает зачёркивание текста для выделения или на месте курсора.
>
>
>
>
>
> subscript
>
> Переключает нижний индекс для выбранного или на месте курсора.
>
>
>
>
>
> superscript
>
> Переключает верхний индекс для выбранного или на месте курсора.
>
>
>
>
>
> underline
>
> Переключает подчёркивание для выбранного или на месте курсора.
>
>
>
>
>
> undo
>
> Отменяет последнее действие.
>
>
>
>
>
> unlink
>
> Удаляет ссылку или якорь для выбранной ссылки/якоря
>
>
>
>
>
> useCSS
> Устарело
>
>
> Переключает режим стилизации HTML и CSS для генерируемой разметки. Может принимать только булевы значения true/false. ПРИМЕЧАНИЕ: этот аргумент с перевёрнутой логикой (т.е. false = CSS / true = HTML). (Не поддерживается в Internet Explorer.) **Внимание! Эта команда является устаревшей, используйте *styleWithCSS.***
>
>
>
>
>
> styleWithCSS
>
> **Заменяет команду useCSS.** Аргумент работает как ожидалось, т.е. true модифицирует/генерирует атрибуты стиля в разметке, false генерирует элементы форматирования.
>
>
>
>
>

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

iframeNode.execCommand("bold"); // Жирный текст
iframeNode.execCommand("undo"); // Отмена последнего действия
iframeNode.execCommand("insertText", false, "Lorem ipsum dolor sit amet, consectetur adipisicing elit."); // Вставка текста
```

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

| Specification |
| --- |
| Trusted Types # dom-document-execcommand |

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

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

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

* `document.contentEditable`
* `document.designMode`
* Rich-Text Editing в Mozilla


Document.createTreeWalker() - Интерфейсы веб API

Document.createTreeWalker()
===========================

Вызов метода **`Document.createTreeWalker()`** возвращает новый объект класса `TreeWalker` (en-US).Синтаксис
---------
```

document.createTreeWalker(root, whatToShow[, filter[, entityReferenceExpansion]]);
```

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

`root`

корневой узел `Node` для `TreeWalker` (en-US). Чаще всего это элемент принадлежащий document.

`whatToShow` Необязательный

A `unsigned long` representing a bitmask created by combining the constant properties of `NodeFilter`. It is a convenient way of filtering for certain types of node. It defaults to `0xFFFFFFFF` representing the `SHOW_ALL` constant.

| Константа | Числовое значение | Описание |
| --- | --- | --- |
| `NodeFilter.SHOW_ALL` | `-1` (that is the max value of `unsigned long`) | Показывать все узлы. |
| `NodeFilter.SHOW_ATTRIBUTE`
Устарело
 | `2` | Shows attribute `Attr` nodes. This is meaningful only when creating a `TreeWalker` (en-US) with an `Attr` node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_CDATA_SECTION`
Устарело
 | `8` | Shows `CDATASection` nodes. |
| `NodeFilter.SHOW_COMMENT` | `128` | Shows `Comment` nodes. |
| `NodeFilter.SHOW_DOCUMENT` | `256` | Shows `Document` nodes. |
| `NodeFilter.SHOW_DOCUMENT_FRAGMENT` | `1024` | Shows `DocumentFragment` nodes. |
| `NodeFilter.SHOW_DOCUMENT_TYPE` | `512` | Shows `DocumentType` (en-US) nodes. |
| `NodeFilter.SHOW_ELEMENT` | `1` | Shows `Element` nodes. |
| `NodeFilter.SHOW_ENTITY`
Устарело
 | `32` | Shows `Entity` nodes. This is meaningful only when creating a `TreeWalker` (en-US) with an `Entity` node as its root; in this case, it means that the `Entity` node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_ENTITY_REFERENCE`
Устарело
 | `16` | Shows `EntityReference` nodes. |
| `NodeFilter.SHOW_NOTATION`
Устарело
 | `2048` | Shows `Notation` nodes. This is meaningful only when creating a `TreeWalker` (en-US) with a `Notation` node as its root; in this case, it means that the `Notation` node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree. |
| `NodeFilter.SHOW_PROCESSING_INSTRUCTION` | `64` | Shows `ProcessingInstruction` (en-US) nodes. |
| `NodeFilter.SHOW_TEXT` | `4` | Shows `Text` nodes. |

`filter` Необязательный

A `NodeFilter` (en-US), that is an object with a method `acceptNode`, which is called by the `TreeWalker` (en-US) to determine whether or not to accept a node that has passed the `whatToShow` check.

`entityReferenceExpansion` Необязательный

A `Boolean` (en-US) flag indicating if when discarding an `EntityReference` its whole sub-tree must be discarded at the same time.

### Return value

A new `TreeWalker` (en-US) object.

Example
-------

The following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as acceptable each node (it could reduce the set in the `acceptNode()` method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array.

```js
var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW\_ELEMENT,
  {
    acceptNode: function (node) {
      return NodeFilter.FILTER\_ACCEPT;
    },
  },
  false,
);

var nodeList = [];

while (treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
```

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

| Specification |
| --- |
| DOM Standard # dom-document-createtreewalker |

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

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

See also
--------

* The interface of the object it creates: `TreeWalker` (en-US).


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

readystatechange
================

Событие `readystatechange` срабатывает, когда изменяется атрибут документа `readyState` (en-US).

Основная информация
-------------------

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

HTML5

Интерфейс

Event

Всплывает

Нет

Отменяемое

Нет

Цель

Document

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

Нет

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

| Свойство | Тип | Описание |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Цель события (Самая верхняя цель в дереве DOM). |
| `type` Только для чтения  | `DOMString` | Тип события. |
| `bubbles` Только для чтения  | `Boolean` | Всплывает ли событие. |
| `cancelable` Только для чтения  | `Boolean` | Возможно ли отменить событие. |

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

```js
document.readyState === "complete";
// true

// Альтернатива DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
};
```

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

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

Связанные события
-----------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`


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

Document.URL
============

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

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

string = document.URL
```

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

### JavaScript
```

document.getElementById("url").textContent = document.URL;
```

### HTML

```html
<p id="urlText">
  URL:<br />
  <span id="url">URL goes here</span>
</p>
```

### Результат

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-url① |

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

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

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

* `HTMLDocument`


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

Document.head
=============

Возвращает элемент `<head>` текущего документа. Если имеется более одного элемента `<head>`, будет возвращён первый из них.

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

var objRef = document.head;
```

### Значение

`HTMLHeadElement`.

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

<!doctype html>
<head id="my-document-head">
  <title>Example: using document.head</title>
</head>

<script>
  var theHead = document.head;

  console.log(theHead.id); // "my-document-head";

  console.log( theHead === document.querySelector("head") ); // true
</script>
```

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

`document.head` доступно только для чтения. Присвоить значение этому свойству нельзя. При попытке это сделать ошибка вызвана не будет, только если вы не используете Strict Mode. В данном случае будет вызвано `TypeError` .

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

| Specification |
| --- |
| HTML Standard # dom-document-head-dev |

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

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

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

* `document.body`


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

Document.compatMode
===================

Определяет когда документ отображается в Quirks mode или Стандартном режиме.

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

mode = document.compatMode
```

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

* `"BackCompat"` если документ в quirks mode;
* `"CSS1Compat"` если документ в не-quirks (также известном как "standards") mode или лимитированный-quirks (известный как "almost standards") mode.

`mode`

Исчислимая величина, которая может быть:

**Примечание:** все эти режимы внесены в стандарт, поэтому старые названия "standards" и "almost standards" теперь бессмысленны и не используются.

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

if (document.compatMode == "BackCompat") {
  // в Quirks режиме
}
```

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

* DOM: Document.compatMode


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

Document.domain
===============

Свойство `domain` у `Document` интерфейса получает/устанавливает доменную часть источника происхождения (origin) текущего документа, используется в политике ограничения домена (same origin policy) (en-US).

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

var domainString = document.domain;
document.domain = string;
```

### Значение

Доменная часть источника происхождения (origin) текущего документа.

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

`SecurityError`

An attempt has been made to set `domain` under one of the following conditions:

* The document is inside a sandboxed `<iframe>` (en-US)
* The document has no browsing context
* The document's effective domain is `null`
* The given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it)
* The `document-domain` (en-US) `Feature-Policy` (en-US) is enabled

Examples
--------

### Getting the domain

For the URI `http://developer.mozilla.org/ru/docs/Web`, this example sets `currentDomain` to the string "`developer.mozilla.org`".
```

var currentDomain = document.domain;
```

### Closing a window

If a document, such as `www.example.xxx/good.html`, has the domain of `"www.example.xxx"`, this example attempts to close the window.
```

var badDomain = "www.example.xxx";

if (document.domain == badDomain) {
  // Just an example: window.close() sometimes has no effect
  window.close();
}
```

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

Свойство возвращает `null` если домен документа не может быть идентифицирован, хотя теперь это изменилось с Firefox 62 - смотри обсуждение в Firefox bug 819475.

Mozilla позволит вам установить его в супердомен текущего значения, ограниченный его базовым доменом. Например, на developer.mozilla.org возможно установить его как "mozilla.org" но не как "mozilla.com" или "org".

Если это свойство успешно установлено, портовая часть источника так же устанавливается на нуль.

Mozilla отличает свойство `document.domain`, которое никогда не было установлено от явно установленного такого же домена как в URL документа, хотя свойство возвращает одинаковое значение в обоих случаях. Один документ разрешает доступ к другому, если они оба установили `document.domain` в одинаковое значение, указывая тем самым на их намерение сотрудничать или ни один из них не установил `document.domain`, а домены в URL-адресах одинаковые (реализация). Если бы не эта специальная политика, то каждый сайт будет подвержен XSS от своих поддоменов (для примера https://bugzilla.mozilla.org может быть атакован с помощью заведения багов (bug attachments) на https://bug\*.bugzilla.mozilla.org).

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

| Specification |
| --- |
| HTML Standard # relaxing-the-same-origin-restriction |

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

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

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

* Политика ограничения домена для JavaScriptHTML (en-US)


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

Document.dir
============

Свойство **`Document.dir`** является строкой `DOMString` показывает направление текста на странице (слева направо или справа налево).

**Возможные значения:**

* `'ltr'` - слева направо
* `'rtl'` - справа налево
Синтаксис
---------

```js
dirStr = document.dir;
document.dir = dirStr;
```

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

| Specification |
| --- |
| HTML Standard # dom-document-dir |

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

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

Связанные события
-----------------

* http://msdn.microsoft.com/en-us/library/ms533731.aspx


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

Document.contentType
====================

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

Возвращает MIME-тип при рендеринге страницы. Информация может поступать из заголовка HTTP или других ресурсов MIME.

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

contentType = document.contentType;
```

Свойство contentType доступно только для чтения.

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

Свойство не влияет на МЕТА теги.

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

Не является стандартом, поддерживается только Gecko. Для использования только в отладчике chrome (Extensions и XUL Mozilla Firefox).


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

Document.alinkColor
===================

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

Возвращает или задаёт цвет активной ссылки в теле документа. Ссылка активна в течение времени между событиями mousedown и mouseup.

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

color = document.alinkColor
document.alinkColor = color
```

Color - строка, содержащая имя цвета (например, `blue`, `dark blue` и т.д.) или шестнадцатеричное значение цвета(`#0000FF`)

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

Значение по умолчанию для этого свойства в Mozilla Firefox является красным (`#ee0000` в шестнадцатеричном формате).

`document.alinkColor` устарел в DOM Level 2 HTML. Одним из вариантов является CSS-селектор `:active`.

Другой альтернативой является document.body.aLink, хотя это устарело в HTML 4.01 в пользу альтернативы CSS.

Gecko поддерживает оба варианта `alinkColor`/`:active` and `:focus`. Internet Explorer 6 и 7 поддерживает `alinkColor` / `:active` только для HTML ссылок с якорем (<a>) и поведение у них такое же, как `:focus` в Gecko. В IE нет поддержки `:focus`.

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

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


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

Document.bgColor
================

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

Устаревшее свойство `bgColor` возвращает или устанавливает цвет фона текущего документа.

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

color = document.bgColor
document.bgColor =color
```

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

* `color` это строка представляющая цвет или в виде слова (например `red`) или шестнадцатеричного значения (т.е. "`#ff0000`").
Пример
------
```

document.bgColor = "darkblue";
```

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

В Firefox это поле по умолчанию содержит белый цвет (`#ffffff` в шестнадцатеричном виде).

`Поле document.bgColor` признано устаревшим в DOM Level 2 HTML. В качестве альтернативы рекомендуется использовать CSS стиль `background-color` который доступен через DOM как `document.body.style.backgroundColor`. Другой альтернативой доступа является `document.body.bgColor`, хотя этот вариант также признан устаревшим в HTML 4.01 и также рекомендуется использовать CSS.

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

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


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

Document.defaultView
====================

В браузерах возвращает объект window (en-US), который связан с document текущей страницы или `null` если document не доступен.

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

var win = document.defaultView;
```

Это свойство доступно только для чтения.

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

| Specification |
| --- |
| HTML Standard # dom-document-defaultview-dev |

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

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


Document.createAttribute() - Интерфейсы веб API

Document.createAttribute()
==========================

Метод **`Document.createAttribute()`** создаёт новый атрибут узла и возвращает его. Созданный объект узла реализует `Attr` интерфейс . DOM не указывает, какие атрибуты могут быть добавлены к определённому элементу таким способом.

**Примечание:** Строка, заданная в параметре, преобразуется в нижний регистр.

Syntax
------
```

attribute = document.createAttribute(name)
```

### Parameters

* `name` строка, содержащая имя атрибута.
### Return value

A `Attr` node.

### Exceptions

* `INVALID_CHARACTER_ERR` если параметр содержит недопустимые символы для атрибута XML.
Example
-------

```js
var node = document.getElementById("div1");
var a = document.createAttribute("my\_attrib");
a.value = "newVal";
node.setAttributeNode(a);
console.log(node.getAttribute("my\_attrib")); // "newVal"
```

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

| Specification |
| --- |
| DOM Standard # dom-document-createattribute |

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

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

See also
--------

* `Document.createElement()`


Document.getSelection() - Интерфейсы веб API

Document.getSelection()
=======================

Этот метод работает в точности так же, как `Window.getSelection()`; он возвращает объект `Selection` (en-US), в котором содержатся данные о тексте, выделенном в документе на данный момент.


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

Document.scripts
================

Возвращает список элементов `<script>` в документ. Возвращаемый объект является `HTMLCollection`.

Syntax
------
```

var scriptList = document.scripts;
```

Возвращаемый `scriptList` является `HTMLCollection`. Вы можете использовать его как массив для получения всех элементов в списке.

Example
-------

Этот пример показывает есть ли на странице элементы `<script>`.

```js
var scripts = document.scripts;

if (scripts.length) {
  alert("This page has scripts!");
}
```

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

| Specification |
| --- |
| HTML Standard # dom-document-scripts-dev |

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

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


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

Document.currentScript
======================

Возвращает элемент `<script>`, который выполняется в данный момент.

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

var curScriptElement = document.currentScript;
```

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

Этот пример проверяет, выполняется ли текущий скрипт асинхронно:

```js
if (document.currentScript.async) {
  console.log("Executing asynchronously");
} else {
  console.log("Executing synchronously");
}
```

Посмотреть живые примеры

Notes
-----

Важно заметить, что элемент `<script>` не будет соответствовать текущему, если он выполняется внутри callback'a или event handler'a; он будет соответствовать элементу только при начальном выполнении скрипта.

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

| Specification |
| --- |
| HTML Standard # dom-document-currentscript-dev |

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

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

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

* `<script>`
* `element.onafterscriptexecute`
* `element.onbeforescriptexecute`