Как пройти DOM

DOM является основой почти всего, что работает JavaScript с браузером и веб-документами. Это интерфейс, который позволяет нам взаимодействовать с контентом веб-страницы, и важно понять, как обойти эту модель. Прохождение DOM означает «перемещение», которые используются для «поиска» HTML-элементов (DOM Node) на основе их отношения к другим элементам. Начните с одного выбора и пройдите этот выбор, пока не достигнете желаемых элементов.

Объект документа является корнем каждого узла в DOM. DOM представляет HTML-страницу как дерево, во многом аналогично тому, как вы могли бы представлять свою родословную как «семейное дерево». Изучение того, как перемещаться вверх и вниз по дереву DOM и переходить от ветки к ветке, необходимо для понимания того, как работать с JavaScript и HTML. Корневым объектом в древовидной структуре является объект документа, который может иметь родителей, детей и братьев и сестер, и это определяется его положением в древовидной структуре. Каждый элемент в древовидной структуре называется узлом.

Узлы DOM

Каждый узел в дереве DOM представляет собой объект, представляющий один элемент на странице. Узлы понимают свою связь с другими узлами в их непосредственной близости и содержат много информации о себе. Родитель любого узла - это узел, который находится на одном уровне выше или ближе к документу в иерархии DOM. Дети узла - это узлы, которые находятся на одном уровне ниже. Братья и сестры узла - это любой узел на одном уровне дерева в DOM. Все свойства, кроме childNodes, содержат ссылку на другой объект узла. Свойство childNodes содержит ссылку на массив узлов. Существует несколько стандартных методов, которые можно использовать для выбора одного или нескольких узлов из HTML-документа. Три самых популярных:

  1. getElementById
  2. getElementsByClassName
  3. getElementsByTagName

пример

Детский узел возвращает коллекцию дочерних узлов узла и свойство length для определения количества дочерних узлов. Вы можете прокручивать все дочерние узлы для получения информации о дочерних узлах.

Источник: http://net-informations.com/js/dom/traverses.htm

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)

Add a Comment

Ваш e-mail не будет опубликован. Обязательные поля помечены *