JavaScript миксин ParentNode

Описание миксина

ParentNode — миксин, а не создаваемый конструктором интерфейс. Его собственные методы и свойства доступны экземплярам Document, DocumentFragment и Element.

Миксин ParentNode содержит методы и свойства, которые являются общими для всех типов узлов (Node объекты), которые могут иметь дочерние элементы. Он реализуется такими объектами как Element, Document и DocumentFragment.

Методы интерфейса

Методы ParentNode
Метод	Описание
`querySelector()`	Метод возвращает первый элемент (объект `Element`) с текущим элементом в качестве корневого, соответствующий указанному селектору, или группе селекторов, которые являются потомками объекта, на котором был вызван метод.
`querySelectorAll()`	Метод возвращает список элементов (статичный (не живой) объект типа `NodeList`) с текущим элементом в качестве корневого, соответствующих указанному селектору, или группе селекторов, которые являются потомками объекта, на котором был вызван метод.

Свойства интерфейса

Свойства ParentNode
Свойство	Описание
`childElementCount`	Возвращает количество дочерних элементов конкретного узла.
`children`	Возвращает живую коллекцию (`HTMLCollection`), которая содержит все дочерние элементы узла, на котором он был вызван.
`firstElementChild`	Возвращает первый дочерний элемент (объект `Element`) конкретного узла, или `null`, если дочерних элементов нет.
`lastElementChild`	Возвращает последний дочерний элемент (объект `Element`) конкретного узла, или `null`, если дочерних элементов нет.

Дополнительные методы

Дополнительные методы parentnode
Имя	Назначение и ограничения
`prepend()`	Вставляет узлы и строки перед первым дочерним узлом; строки становятся текстовыми узлами. Возвращает `undefined`.
`append()`	Добавляет узлы и строки после последнего дочернего узла; существующие узлы перемещаются. Возвращает `undefined`.
`replaceChildren()`	Заменяет все дочерние узлы переданными узлами и строками; без аргументов очищает узел. Возвращает `undefined`.
`moveBefore()`	Перемещает уже существующий узел перед указанным дочерним узлом (или в конец при `null`), сохраняя связанное с ним состояние. Требует допустимого общего документа и совместимой подключённости узлов; возвращает `undefined`. Ограниченная поддержка.

Методы миксинов с пометкой Unscopable представлены в Symbol.unscopables прототипа реализующего интерфейса: они исключаются из поиска имён в устаревшей конструкции with. Это служебный объект, не коллекция дочерних узлов.

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

DOM Standard.

Примеры, попробуйте сами

Добавление и замена дочерних узлов

Нажмите ▶, затем кнопки добавления и замены. Сравните append(), prepend() и replaceChildren(): строка становится текстом, а не HTML. Измените строку и повторите запуск.

index.html

HTML

<button id="append" type="button">В конец</button>
<button id="prepend" type="button">В начало</button>
<button id="replace" type="button">Заменить всё</button>
<div id="result">Исходный текст</div>

main.js

JavaScript

const result = document.querySelector('#result')
const text = ' <b>Новый текст</b> '
document.querySelector('#append').onclick = () => result.append(text)
document.querySelector('#prepend').onclick = () => result.prepend(text)
document.querySelector('#replace').onclick = () => result.replaceChildren(text)