recursal/MDN huggingface dataset:
Node.removeChild
================

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

Удаляет дочерний элемент из DOM. Возвращает удалённый элемент.

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

var oldChild = element.removeChild(child);
element.removeChild(child);
```


* `child` дочерний элемент который будет удалён из DOM.
* `element` родительский элемент удаляемого `child`.
* `oldChild` ссылка на удаляемый дочерний элемент. `oldChild` === `child`.

Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки на объект - `oldChild`.

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

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

<!-- Пример -->

<div id="top" align="center">
  <div id="nested"></div>
</div>
```



```js
// Удаление элемента с известным родителем
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
```



```js
// Удаление элемента без указания его родителя
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```



```js
// Удаление всех дочерних элементов
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

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

| Specification |
| --- |
| DOM Standard # dom-node-removechild |

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

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

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

* `Node.replaceChild`
* `Node.parentNode`
* `ChildNode.remove` (en-US)
Node.firstChild
===============

Свойство **`Node.firstChild`** только для чтения, возвращающее первый потомок узла в древе или `null`, если узел является бездетным. Если узел это `документ`, он возвращает первый узел в списке своих прямых детей.

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

var childNode = node.firstChild;
```

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

`childNode` это ссылка на первый потомок `node,` если таковой имеется, в противном случае это `null`.

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

Этот пример демонстрирует использование `firstChild` и как этому свойству могут мешать пробелы. Смотрите раздел Notes для получения дополнительной информации о обработке пробелов в Gecko DOM.


```html
<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```


В данном примере alert выведет '#text', потому что текстовый узел вставлен для сохранения пробела между концом открытого <p> и тега <span>. **Любое** пустое пространство между элементами является причиной вставки узла #text, начиная от единичного пробела, разрыва строки, отступа и так далее.

Другой #text узел вставляется между закрывающими тегами </span> и </p>.

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


```html
<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```


Теперь alert будет показывать 'SPAN'.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-firstchild① |

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

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

Свойство **`Node.nodeValue`** возвращает или устанавливает значение текущего узла.

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

value = node.nodeValue;
```


`value` это строка содержащая значение текущего узла, если таковой имеется.

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

Для самого документа, `nodeValue` возвращает `null`. Для текста, комментария и CDATA узлов, `nodeValue` возвращает содержимое узла. Для узла атрибута, вернётся значение атрибута.

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

| Attr | Значение атрибута |
| --- | --- |
| CDATASection | Содержимое секции CDATA |
| Comment | Содержимое комментария |
| Document | null |
| DocumentFragment | null |
| DocumentType | null |
| Element | null |
| NamedNodeMap | null |
| EntityReference | null |
| Notation | null |
| ProcessingInstruction | Все содержимое исключая цель |
| Text | Содержимое текстового узла |

Когда `nodeValue` равно `null`, установки не имеют эффекта.

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

* DOM Level 2 Core: Node.nodeValue
Node.parentNode
===============

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

Возвращает родителя определённого элемента DOM дерева.

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

parentNode = node.parentNode
```


`parentNode` родитель текущего элемента. Родитель элемента является `Element` узлом, `Document` узлом, или `DocumentFragment` узлом.

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


```js
if (node.parentNode) {
  // удаляем элемент из дерева
  node.parentNode.removeChild(node);
}
```

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

`Document` и `DocumentFragment` nodes (en-US) *могут не иметь родителя*, в этом случае `parentNode` всегда возвращает `null`.

Так же возвращает `null` если элемент только был создан и ещё не добавлен в DOM дерево.

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

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

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

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

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

* `Node.firstChild`
* `Node.lastChild`
* `Node.childNodes`
* `Node.nextSibling`
* `Node.previousSibling`
* `Node.removeChild`
Node.childNodes
===============

Доступный для чтения аттрибут `Node.childNodes` возвращает *коллекцию* дочерних элементов данного элемента.

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

var ndList = elementNodeReference.childNodes;
```


*ndList* — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, *ndList* пуст.

*ndList* — переменная, хранящая список дочерних элементов. Тип этого списка — `NodeList`.

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


```js
// parg -- ссылка на элемент <p>

if (parg.hasChildNodes()) {
  // Таким образом, сначала мы проверяем, не пуст ли объект, есть ли у него дети
  var children = parg.childNodes;

  for (var i = 0; i < children.length; ++i) {
    // сделать что-то с каждым внутренним элементом через children[i]
    // ПРИМЕЧАНИЕ: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
  }
}
```


---


```js
// Это один из способов удалить все дочерние элементы из элемента
// box -- ссылка на элемент с детьми

while (box.firstChild) {
  //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
  box.removeChild(box.firstChild);
}
```

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

Элементы в коллекции — объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, `elementNodeReference.childNodes[1].nodeName` чтобы получить имя, и т. д.).

Объект `document` обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как `documentElement`. (В (X)HTML документах это HTML-элемент.)

`childNodes` также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте `ParentNode.children` (en-US) взамен.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-childnodes① |

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

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

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

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `ParentNode.children` (en-US)
Node.cloneNode()
================

Метод **`Node.cloneNode()`** возвращает дубликат узла, из которого этот метод был вызван.

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

var dupNode = node.cloneNode(deep);
```


*node*

Узел, который будет клонирован.

*dupNode*

Новый узел, который будет клоном `node`

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

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


**Примечание:** в спецификации DOM4 (как реализовано в Gecko 13.0), `deep` необязательный аргумент. Если он опущен, метод действует как если бы значение `deep` было **`true`**, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, `deep` должен быть установлен как `false`.

Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы `deep` было **`false`**. Хотя, это все ещё не обязательно, вы всегда должны обеспечить аргументом `deep`, для прямой и обратной совместимости. С Gecko 28.0), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0), поверхностный клон, по умолчанию, вместо глубокого клона.

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


```js
var p = document.getElementById("para1");
var p_prime = p.cloneNode(true);
```

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

Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует перехватчики событий, добавленных используя `addEventListener()` (en-US) или тех что назначены через свойства элемента (т.е `node.onclick = fn`).

Дубликат узла, возвращённого `cloneNode()` не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя `Node.appendChild()` или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.

`Если deep` установлен как `false`, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле `Text`.

Если `deep` установлено как `true`, все поддеревья (включая текст, который может быть потомком узла `Text`) копируется тоже. Для пустых узлов (т.е `<img>` и `<input>` элементов) это не имеет значения установлен ли `deep` как `true` или `false`.

**Предупреждение:** **Внимание:** `cloneNode()` может привести к дублированию идентификаторов элементов в документе.

Если исходный узел имеет идентификатор и клон размещён в том же документе, идентификатор должен быть изменён, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, в зависимости от будущего имени дубликата.

Чтобы клонировать узел для добавления к другому документу используйте `Document.importNode()` вместо этого.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-clonenode① |

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

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

Свойство **`Node.nodeName`** только для чтения, возвращающие имя текущего узла в виде строки.

Возвращаемое значение для различных типов узлов:

| Интерфейс | значение nodeName |
| --- | --- |
| `Attr` | Значение `Attr.name` (en-US) |
| `CDATASection` | `"#cdata-section"` |
| `Comment` | `"#comment"` |
| `Document` | `"#document"` |
| `DocumentFragment` | `"#document-fragment"` |
| `DocumentType` (en-US) | Значение `DocumentType.name` (en-US) |
| `Element` | Значение `Element.tagName` |
| `Entity` | имя сущности |
| `EntityReference` | Имя сущности ссылки |
| `Notation` | Название обозначения |
| `ProcessingInstruction` (en-US) | Значение `ProcessingInstruction.target` (en-US) |
| `Text` | `"#text"` |

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

var str = node.nodeName;
```

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

Учитывая следующую разметку:


```html
<div id="d1">hello world</div>
<input type="text" id="t" />
```


и следующий скрипт:


```js
var div1 = document.getElementById("d1");
var text_field = document.getElementById("t");

text_field.value = div1.nodeName;
```


В XHTML (или любых других форматов XML), значение `text_field` будет прочитано как "div". Тем не менее, в HTML, значение `text_field` будет прочитано как "DIV", потому что `nodeName` и `tagName` возвращают в верхнем регистре элементы HTML в DOM помеченном как HTML документ. Узнайте больше деталей о чувствительности регистра nodeName в различных браузерах.

Обратите внимание, что свойство `tagName` (en-US) можно было бы использовать вместо него, поскольку `nodeName` имеет тоже значение что и `tagName` для элемента. Однако имейте в виду, что `nodeName` будет возвращать `#text` для текстово узла, в то время как `tagName` будет возвращать `undefined`.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodename① |

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

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

Метод **`Node.lookupNamespaceURI()`** берёт префикс и возвращает пространство имён URI связанное с ним в данном узле, если найден (и `null` если нет). Устанавливает `null` для префикса который возвращает пространство имён по умолчанию.

Из-за ошибки bug 312019, этот метод не работает с динамическим назначением пространства имён (т.е., с уставленным тем же Node.prefix).

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

* http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI
Node.lastChild
==============

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

**lastChild** возвращает последнего потомка в узле.

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

var last_child = element.lastChild
```

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

Возвращаемый элемент `last_child` является узлом. Если его родитель является элементом, то возвращаемый узел является узлом типа Элемент, Текст, или же узлом комментария. Если в опрашиваемом узле нет дочерних элементов, **lastChild** возвращает `null` .

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


```js
var tr = document.getElementById("row1");
var corner_td = tr.lastChild;
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |

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

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

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

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

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

var text = element.textContent;
element.textContent = "Это просто текст";
```

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

* `textContent` возвращает `null,` *если узел является документом (en-US), типом документа, или его описанием*. Для получения *всего* текста и CDATA-данных во всём документе можно использовать `document.documentElement.textContent`.
* Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, `textContent` возвращает текст внутри узла в виде строки (т.н. nodeValue (en-US)).
* Для узлов других типов `textContent` возвращает конкатенацию свойств `textContent` всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
* Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.
### Отличие от `innerText`

`element.innerText` был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

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

`innerHTML`, как можно понять из его названия, возвращает HTML. Довольно часто `innerHTML` используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать `textContent`: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

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


```js
// Дан следующий фрагмент:
// <div id="block">Это — <span>просто</span> текст</div>

// Достаём текстовое содержимое:
var text = document.getElementById("block").textContent;
// В переменной |text| находится: "Это — просто текст".

// Меняем текст:
document.getElementById("block").textContent = "Это — просто текст";
// Теперь наш фрагмент выглядит так:
// <div id="block">Это — просто текст</div>
```

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

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

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

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

* Подробнее о различиях `innerText` и `textContent` (пост в блоге)
Node.hasChildNodes()
====================

Метод **`Node.hasChildNodes()`** возвращает `Boolean` значение показывающее имеет ли текущий `Node` дочерние узлы (en-US) или нет.

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

node.hasChildNodes()
```

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

Следующий пример удаляет первый дочерний узел внутри элемента с id `"foo"`, если foo имеет дочерние узлы.


```js
var foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-haschildnodes① |

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

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

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

* `Node.childNodes`
* `Node.hasAttributes`
Node.nodeType
=============

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

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

var type = node.nodeType;
```


`type` – беззнаковое короткое целочисленное значение с одним из следующих значений:

| Name | Value |
| --- | --- |
| `ELEMENT_NODE` | `1` |
| `ATTRIBUTE_NODE` 
Устарело
 | `2` |
| `TEXT_NODE` | `3` |
| `CDATA_SECTION_NODE` 
Устарело
 | `4` |
| `ENTITY_REFERENCE_NODE` 
Устарело
 | `5` |
| `ENTITY_NODE` 
Устарело
 | `6` |
| `PROCESSING_INSTRUCTION_NODE` (en-US) | `7` |
| `COMMENT_NODE` | `8` |
| `DOCUMENT_NODE` | `9` |
| `DOCUMENT_TYPE_NODE` (en-US) | `10` |
| `DOCUMENT_FRAGMENT_NODE` | `11` |
| `NOTATION_NODE` 
Устарело
 | `12` |

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

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


```js
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT\_NODE)
  console.log("You should comment your code well!");
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodetype① |

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

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

Свойство **`Node.ownerDocument`** только для чтения, возвращающее объект документа верхнего уровня для этого узла.

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

document = element.ownerDocument
```


* `document` это объект `document` (en-US) родитель текущего элемента.
Пример
------


```js
// given a node "p", get the top-level HTML child
// of the document object

var d = p.ownerDocument;
var html = d.documentElement;
```

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

Объект `document`, возвращаемый этим свойством, это основной объект с которым все дочерние узлы в настоящем HTML документе созданы. Если это свойство используется для узла самого документа, результат будет `null`.

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

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

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

* DOM Level 2 Core: Node.ownerDocument
Node.isSameNode()
=================

The **`Node.isSameNode()`** проверяет ссылаются ли два узла на один и тот же объект.

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


```js
// Instead of using
node1.isSameNode(node2);

// use
node1 === node2; // or
node1 == node2;
```


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

var isSameNode = node.isSameNode(other);
```


* `other` узел для проверки.
Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-issamenode |

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

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

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

* `Node.isEqualNode()`
Node.parentElement
==================

Свойство **`Node.parentElement`** только для чтения, возвращает родителя узла DOM `Element`, или `null` если узел не имеет родителя, или его родитель не DOM `Element`.

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

parentElement = node.parentElement
```


`parentElement` это родительский элемент текущего узла. Это всегда объект DOM `Element`, или `null`.

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


```js
if (node.parentElement) {
  node.parentElement.style.color = "red";
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentelement① |

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

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

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

* `Node.parentNode`
Node.replaceChild
=================

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

Заменяет дочерний элемент на выбранный. Возвращает заменённый элемент.

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

replacedNode = parentNode.replaceChild(newChild, oldChild);
```


* `newChild` элемент на который будет заменён `oldChild`. В случает если он уже есть в DOM, то сначала он будет удалён.
* `oldChild` элемент который будет заменён.
* `replacedNode` заменённый элемент. Тоже самое что и `oldChild`.
Пример
------


```js
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// Создаём новый пустой элемент
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// Присваиваем ему id 'newSpan'
sp1.setAttribute("id", "newSpan");

// Создаём строку.
var sp1_content = document.createTextNode("new replacement span element.");

// Добавляем контент в созданный нами узел
sp1.appendChild(sp1_content);

// создаём ссылку на существующий элемент который будем заменять
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// заменяем существующий элемент sp2 на созданный нами sp1
parentDiv.replaceChild(sp1, sp2);

// Результат:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
```

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

| Specification |
| --- |
| DOM Standard # dom-node-replacechild |

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

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

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

* `Node.removeChild`
Node.previousSibling
====================

Свойство **`Node.previousSibling`** используется только для чтения, оно возвращает узел предшествующий указанному в родительском элементе `childNodes`, или `null`, если указанный узел первый в своём родителе.

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

previousNode = node.previousSibling;
```

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


```js
// <a><b1 id="b1"/><b2 id="b2"/></a>

alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
```

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

 Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
 Поэтому узел, полученный, например, при использовании `Node.firstChild` или `Node.previousSibling` может относиться к
 пробелу, а не к тому элементу, который автор хотел получить.

 Смотрите Пробел в DOM (en-US) и
 W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?
 для дополнительной информации.

Для навигации через список дочерних узлов в обратном порядке используйте Node.nextSibling (en-US).

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

* DOM Level 1 Core: previousSibling
* DOM Level 2 Core: previousSibling
* DOM Level 3 Core: previousSibling