Понимание DOM необходимо в вашей карьере веб-разработчика. Вы должны знать, как выбирать различные элементы в DOM, чтобы потом читать их содержимое или изменять его.

Обход DOM описывает, как перемещаться по древовидной структуре, которую генерируют HTML-документы. Вот полное руководство по обходу DOM с помощью JavaScript.

Что такое обход DOM?

Объектная модель документа, или сокращенно DOM, представляет собой древовидное представление HTML-документа. Он обеспечивает API который позволяет вам, как веб-разработчику, взаимодействовать с веб-сайтом с помощью JavaScript.

Каждый элемент в DOM известен как узел. Только через DOM вы можете управлять структурой, содержимым и стилем HTML-документа.

Обход DOM (также называемый обходом или навигацией по DOM) — это действие по выбору узлов в дереве DOM из других узлов. Возможно, вы уже знакомы с несколькими методами доступ к элементам в дереве DOM по их идентификатору, классу или имени тега. Вы можете использовать такие методы, как документ.querySelector() и документ.getElementById() сделать это.

instagram viewer

Существуют и другие методы, которые вы можете использовать в сочетании для более эффективной и надежной навигации по DOM. Как вы понимаете, лучше искать с уже известной точки на карте, чем заниматься полным поиском.

Например, выбрать дочерний элемент у его родителя проще и эффективнее, чем искать его по всему дереву.

Образец документа для прохождения

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

Первый метод включает в себя поиск элемента, начиная с самого верхнего узла (например, узел документа) и двигаясь вниз.

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

Чтобы продемонстрировать, рассмотрим этот пример HTML-документа:

<!ДОКТИП HTML>
<html язык="en">
<голова>
<мета кодировка ="UTF-8" />
<мета http-эквивалент="X-UA-совместимый" содержание ="IE=край" />
<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1,0" />
<заголовок>Образец страницы</title>
</head>
<тело>
<основной>
<h1>Название моей страницы</h1>
<п>Хорошая подпись идет сюда</п>


<класс статьи="первая__статья">
<h2>Список удивительных фруктов</h2>
<п>Должен есть фрукты</п>


<раздел класс ="обертка-1">
<ул класс="список яблок">
<ли класс ="яблоко">яблоки</li>
<ли класс ="апельсин">Апельсины</li>
<ли класс ="авокадо">Авокадо</li>
<ли класс ="виноград">
 Виноград


<ул>
<ли класс ="Тип 1">Лунные капли</li>
<ли>Султана</li>
<ли>Конкорд</li>
<ли>Багровый без косточек</li>
</ul>
</li>
<ли класс ="банан">Бананы</li>
</ul>


<класс кнопки ="бтн-1">Читать полный список</button>
</div>
</article>


<класс статьи="вторая__статья">
<h2>Удивительные места в Кении</h2>
<п>Должны посетить места в Кении</п>


<раздел класс ="обертка-2">
<ул класс="список мест">
<ли>Масаи Мара</li>
<ли>Диани Бич</li>
<ли>Пляж Ватаму</li>
<ли>Национальный парк Амбосели</li>
<ли>Озеро Накуру</li>
</ul>


<класс кнопки ="бтн-2">Читать полный список</button>
</div>
</article>
</main>
</body>
</html>

Обход DOM вниз

Вы можете перемещаться по DOM вниз, используя один из двух методов. Первый — это метод общего селектора (элемент.querySelector или элемент.querySelectorAll). Во-вторых, вы можете использовать дети или дочерние узлы свойство. Имеются также два других специальных свойства, а именно: последний ребенок и Первый ребенок.

Использование методов выбора

Методы querySelector() позволяют искать один или несколько элементов, соответствующих заданному селектору. Например, вы можете искать первый элемент с классом «первая статья», используя document.querySelector('.first-article'). И забрать все h2 элементы в документе можно использовать querySelectorAll метод: документ.querySelectorAll('h2'). querySelectorAll метод возвращает список узлов соответствующих элементов; вы можете выбрать каждый элемент, используя скобки:

константа заголовки = документ.querySelectorAll('h2');
константа первый заголовок = заголовки[0]; // выбор первого элемента h2
константа второй заголовок = заголовки[1]; // выбор второго элемента h2

Основная загвоздка при использовании методов селектора заключается в том, что вы должны использовать соответствующие символы, где это применимо, перед селектором, как вы это делаете в CSS. Например, «.classname» для классов и «#id» для идентификаторов.

Помните, что результатом будет элемент HTML, а не только внутреннее содержимое выбранного элемента. Для доступа к содержимому вы можете использовать узел внутреннийHTML свойство:

документ.querySelector('.оранжевый').innerHTML

Использование дочерних свойств или свойств childNodes

дети свойство выбирает все дочерние элементы, которые находятся непосредственно под данным элементом. Вот пример дети имущество в действии:

константа список яблок = документ.querySelector('.яблочный-список');
константа яблоки = список яблок.дети; 
консоль.log (яблоки);

Ведение журнала яблоки на консоль будет отображаться набор всех элементов списка непосредственно под элементом с классом «apple-list» в виде коллекции HTML. Коллекция HTML представляет собой объект, подобный массиву, поэтому для выбора элементов можно использовать скобки, как в случае с querySelectorAll.

в отличие от дети свойство, дочерние узлы возвращает все прямые дочерние узлы (а не только дочерние элементы). Если вас интересуют только дочерние элементы, скажем, только элементы списка, используйте дети свойство.

Использование специальных свойств lastChild и firstChild

Эти два метода не так надежны, как первые два. Как следует из их названий, последний ребенок и Первый ребенок свойства возвращают последний и первый дочерние узлы элемента.

константа список яблок = документ.querySelector('.яблочный-список');
константа первый дочерний элемент = список яблок. первый дочерний элемент;
константа lastChild = appleList.lastChild;

Обход DOM вверх

Вы можете перемещаться вверх по DOM, используя родительский элемент (или родительский узел) и ближайший характеристики.

Использование parentElement или parentNode

Оба родительский элемент или родительский узел свойства позволяют выбрать родительский узел выбранного элемента на один уровень выше. Критическая разница в том, что родительский элемент выбирает только родительский узел, который является элементом. С другой стороны, родительский узел может выбрать родителя независимо от того, является ли он элементом или другим типом узла.

В приведенном ниже примере кода мы используем родительский элемент чтобы выбрать div с классом «обертка-1» из «яблочного списка»:

константа список яблок = документ.querySelector('.яблочный-список');
константа parentDiv = appleList.parentElement; 
консоль.log (родительский раздел); // отображает элемент div с классом-оболочкой-1

Использование ближайшего свойства

ближайший Свойство выбирает первый родительский элемент, соответствующий указанному селектору. Это позволяет вам выбрать несколько уровней вверх вместо одного. Например, если у нас уже есть кнопка с выбранным классом «btn-1», мы можем выбрать основной элемент с помощью ближайший имущество следующим образом:

константа кнопка1 = документ.querySelector('.btn-1');
const mainEl = btn1.closest('основной');
консоль.log (главный); // отображает главный элемент

Нравиться селектор запросов и querySelectorAll, используйте соответствующие селекторы в ближайший метод.

Боковой обход DOM

Есть два метода обхода DOM боком. Вы можете использовать nextElementSibling или предыдущийЭлементСиблинг. Использовать nextElementSibling чтобы выбрать следующий родственный элемент и предыдущийЭлементСиблинг чтобы выбрать предыдущего брата.

константа оранжевый = документ.querySelector('.оранжевый');
константа яблоко = оранжевый.предыдущийЭлементСиблинг;
константа авокадо = оранжевый.nextElementSibling;

Есть и эквивалент следующийРодной брат и предыдущийРодной брат свойства, которые также выбирают из всех типов узлов, а не только из элементов.

Делайте больше, объединяя свойства и методы обхода DOM в цепочку

Все описанные выше методы и свойства могут позволить вам выбрать любой узел в DOM. Однако в некоторых случаях вам может понадобиться сначала двигаться вверх, а затем вниз или вбок. В этом случае объединение различных свойств вместе окажется удобным.