Навигация по DOM элементам
Обход DOM или, проще говоря, навигация по DOM элементам — это работа со свойствами родительских, дочерних и соседних DOM элементов с помощью JavaScript.
В качестве примера мы будем использовать следующий код:
В браузере файл будет выглядеть следующим образом:
Корневые узлы
Объект document — это корень каждого узла в DOM. Следующий уровень — это объект window , который включает в себя закладки браузера, тулбары, функции promt и alert. Мы будем работать с DOM и, таким образом, с объектом document , который включает в себя все, что находится внутри window .
По умолчанию каждый документ содержит html , head , и body .
Проверить содержимое каждого элемента можно, набрав в консоли:
Родительские узлы
Как упоминалось ранее, узлы в DOM делятся на родительские, дочерние и соседние в зависимости от их связи с другими узлами. Родитель конкретного узла — это узел, который находится на уровень выше в иерархии DOM.
В нашем примере:
- html является родителем head , body , и script
- body является родителем h1 , h2 , p и ul , но не li , так как li на два уровня ниже body
Мы можем проверить родителя p элемента с помощью parentNode свойства. Так как мы присвоили p переменной, необходимо просто ввести:
Можно даже подняться на два уровня выше:
Дочерние узлы
Дочерние элементы узла — это узлы, которые находятся на уровень ниже. Если узлы находятся ниже еще на один уровень вложенности, они называются предками.
В данной статье мы будем работать со следующими свойствами: childNodes , firstChild , lastChild , children , firstElementChild и lastElementChild .
Начнем со свойства childNodes , которое вернет список каждого дочернего элемента данного узла:
Возможно, вы ожидали, что вернется только три элемента li ? Текстовые узлы на самом деле пробелы, вызванные отступами между элементами, которые DOM воспринимает как узлы. Их не будет видно во вкладке Elements, так как консоль разработчика удаляет эти узлы автоматически.
По этой причине, если мы попытаемся изменить цвет фона первого дочернего узла, возникнет ошибка, так как первый дочерний элемент — это текст.
Когда нам необходимо работать только с узлами элементов, можно использовать children , firstElement и lastElementChild .
ul.children вернет только три li элемента.
Для того, чтобы изменить только первый элемент li , используйте:
Так выглядит обновленная страница:
Если необходимо изменить все четыре дочерних элемента, вы можете использовать for .. of цикл следующим образом:
Теперь все дочерние элементы изменили цвет фона:
Если посмотреть на элемент p , мы увидим, что он содержит как текст, так и другой элемент (тег strong ).
Свойство childNodes полезно, когда необходимо получить доступ к информации.
Как childNodes , так и children возвращают не стандартный JavaScript массив (со всеми методами и свойствами), а объект, подобный массиву. Однако, как и с массивом, доступ к узлам можно получить через номер индекса или даже найти свойство length .
В этом коде мы получаем доступ к последнему дочернему элементу li из четырех элементов ul в body и применяем стили.
Используя свойства дочерних и родительских элементов, можно вернуть любой узел из DOM!
Соседние элементы
Подробнее рассмотрим соседние элементы. Соседние элементы узла — это узлы, находящиеся на одном и том же уровне в DOM. Это не обязательно узлы одного типа — текстовые узлы, узлы элементов или комментариев. Свойства, с которыми часто работают в такой ситуации — это nextSibling , previousSibling , nextElementSibling и previousElementSibling .
Свойства соседних элементов работают таким же образом, как и дочерних: previousSibling и nextSibling вернет следующий узел, который сразу же предшествует или следует за определенным узлом; и previousElementSibling , и nextElementSibling получат только узлы элемента.
Получим средний элемент списка ul :
Также воспользуемся свойствами соседнего элемента для получения доступа к следующему и предыдущему элементам (избегая текстовых пробелов).
Изменения будут выглядеть следующим образом:
В следующей финальной части мы рассмотрим, как изменять DOM, управлять узлами, удалять узлы из DOM. Также мы подробнее коснемся изменения классов, атрибутов и стилей.
Node.childNodes
ndList — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, ndList пуст.
ndList — переменная, хранящая список дочерних элементов. Тип этого списка — NodeList .
Пример
Примечания
Элементы в коллекции — объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, elementNodeReference.childNodes[1].nodeName чтобы получить имя, и т. д.).
Объект document обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как documentElement . (В (X)HTML документах это HTML-элемент.)
Навигация по DOM-элементам
DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.
Все операции с DOM начинаются с объекта document . Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.
Так выглядят основные ссылки, по которым можно переходить между узлами DOM:
Поговорим об этом подробнее.
Сверху: documentElement и body
Самые верхние элементы дерева доступны как свойства объекта document :
<html> = document.documentElement Самый верхний узел документа: document.documentElement . В DOM он соответствует тегу <html> . <body> = document.body Другой часто используемый DOM-узел – узел тега <body> : document.body . <head> = document.head Тег <head> доступен как document.head .
Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.