Узел

Интерфейс DOM Node является абстрактным базовым классом, на основе которого создано множество других объектов API DOM, что позволяет использовать эти типы объектов схожим образом и часто взаимозаменяемо. Как абстрактный класс, нет такого понятия, как обычный Node объект. Все объекты, которые реализуют функциональность Node, основаны на одном из его подклассов. Наиболее заметными являются Document, Element и DocumentFragment.

Кроме того, каждый тип узла DOM представлен интерфейсом, основанным на Node. К ним относятся Attr, CharacterData (на котором основаны Text, Comment, CDATASection и ProcessingInstruction) и DocumentType.

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

Помимо перечисленных ниже свойств, Node наследует свойства от своего родителя, EventTarget.

Node.baseURI Только для чтения

Возвращает строку, представляющую базовый URL документа, содержащего Node.

Node.childNodes Только для чтения

Возвращает живой NodeList, содержащий всех потомков этого узла (включая элементы, текст и комментарии). NodeList является живым, что означает, что если потомки Node изменятся, объект NodeList автоматически обновится.

Node.firstChild Только для чтения

Возвращает Node, представляющий первый непосредственный дочерний узел узла, или null если у узла нет потомков.

Node.isConnected Только для чтения

Булево значение, указывающее, подключен ли узел (прямо или косвенно) к объекту контекста, например, к объекту Document в случае обычного DOM или к объекту ShadowRoot в случае тени DOM.

Node.lastChild Только для чтения

Возвращает Node, представляющий последний непосредственный дочерний узел узла, или null если у узла нет потомков.

Node.nextSibling Только для чтения

Возвращает Node, представляющий следующий узел в дереве, или null если такого узла нет.

Node.nodeName Только для чтения

Возвращает строку, содержащую имя Node. Структура имени будет отличаться в зависимости от типа узла. Например, HTMLElement будет содержать имя соответствующего тега, например 'AUDIO' для HTMLAudioElement, узел Text будет иметь строку '#text', а узел Document — строку '#document'.

Node.nodeType Только для чтения

Возвращает unsigned short, представляющий тип узла. Возможные значения:

Имя	Значение
ELEMENT_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11

Node.nodeValue

Возвращает/устанавливает значение текущего узла.

Node.ownerDocument Только для чтения

Возвращает Document, к которому принадлежит этот узел. Если узел сам является документом, возвращает null.

Node.parentNode Только для чтения

Возвращает Node, являющийся родителем этого узла. Если такого узла нет, например, если этот узел находится вверху дерева или если он не участвует в дереве, это свойство возвращает null.

Node.parentElement Только для чтения

Возвращает Element, являющийся родителем этого узла. Если узел не имеет родителя или родитель не является Element, это свойство возвращает null.

Node.previousSibling Только для чтения

Возвращает Node, представляющий предыдущий узел в дереве, или null если такого узла нет.

Node.textContent

Возвращает/устанавливает текстовое содержимое элемента и всех его потомков.

В дополнение к методам ниже, Node наследует методы от своего родителя, EventTarget.

Node.appendChild()

Добавляет указанный childNode аргумент в качестве последнего дочернего элемента текущего узла. Если аргумент ссылался на существующий узел в дереве DOM, узел будет откреплён от своего текущего положения и прикреплён в новом.

Node.cloneNode()

Клонирует Node, а также, по желанию, все его содержимое. По умолчанию, клонируется содержимое узла.

Node.compareDocumentPosition()

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

Node.contains()

Возвращает значение true или false, указывающее, является ли узел потомком вызывающего узла.

Node.getRootNode()

Возвращает корневой объект контекста, который по желанию включает теневой корень, если он доступен.

Node.hasChildNodes()

Возвращает булево значение, указывающее, имеет ли элемент дочерние узлы.

Node.insertBefore()

Вставляет Node перед узлом-ссылкой в качестве дочернего элемента указанного родительского узла.

Node.isDefaultNamespace()

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

Node.isEqualNode()

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

Node.isSameNode()

Возвращает булево значение, указывающее, являются ли два узла одинаковыми (то есть, ссылаются ли они на один и тот же объект).

Node.lookupPrefix()

Возвращает строку, содержащую префикс для заданного URI пространства имён, если он есть, и null в противном случае. При наличии нескольких префиксов результат зависит от реализации.

Node.lookupNamespaceURI()

Принимает префикс и возвращает URI пространства имён, связанного с ним в данном узле, если он найден (и null если нет). Передача null в качестве префикса вернёт стандартное пространство имён.

Node.normalize()

Очистить все текстовые узлы под этим элементом (объединить смежные, удалить пустые).

Node.removeChild()

Удаляет дочерний узел из текущего элемента, который должен быть дочерним элементом текущего узла.

Node.replaceChild()

Заменяет один дочерний Node текущего узла вторым, переданным в параметре.

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

function removeAllChildren(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
}

Использование этой функции выполняется в одном вызове. Здесь мы очищаем тело документа:

removeAllChildren(document.body);

Альтернативой может быть установка textContent на пустую строку: document.body.textContent = "".

Следующая функция рекурсивно вызывает функцию обратного вызова для каждого узла, содержащегося в корневом узле (включая сам корень):

function eachNode(rootNode, callback) {
  if (!callback) {
    const nodes = [];
    eachNode(rootNode, (node) => {
      nodes.push(node);
    });
    return nodes;
  }

  if (callback(rootNode) === false) {
    return false;
  }

  if (rootNode.hasChildNodes()) {
    for (const node of rootNode.childNodes) {
      if (eachNode(node, callback) === false) {
        return;
      }
    }
  }
}

Функция рекурсивно вызывает функцию для каждого дочернего узла rootNode (включая сам корень).

Если callback опущено, функция возвращает Array вместо этого, который содержит rootNode и все узлы, содержащиеся в нём.

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

Функция имеет два параметра:

rootNode

Объект Node, по потомкам которого будет выполнен рекурсивный проход.

callback Необязательно

Необязательная функция обратного вызова function, которая получает Node в качестве единственного аргумента. Если опущено, eachNode возвращает Array всех узлов, содержащихся в rootNode (включая сам корень).

Следующий пример демонстрирует реальное применение функции eachNode(): поиск текста на веб-странице.

Мы используем функцию-обёртку с именем grep для выполнения поиска:

function grep(parentNode, pattern) {
  let matches = [];
  let endScan = false;

  eachNode(parentNode, (node) => {
    if (endScan) {
      return false;
    }

    // Ignore anything which isn't a text node
    if (node.nodeType !== Node.TEXT_NODE) {
      return;
    }

    if (typeof pattern === "string" && node.textContent.includes(pattern)) {
      matches.push(node);
    } else if (pattern.test(node.textContent)) {
      if (!pattern.global) {
        endScan = true;
        matches = node;
      } else {
        matches.push(node);
      }
    }
  });

  return matches;
}