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

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

Создаёт новый пустой `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
===============

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

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

Возвращает Описание Типа Документа (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()
===================

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

Возвращает объект всех элементов `<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.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()
=========================

Возвращает ссылку на элемент по его идентификатору (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()
============================

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

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

`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.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()
======================

Возвращает новый объект типа `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()
========================

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

`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