JavaScript - Нavigacija po DOM

Здравствуйте, будущие маги JavaScript! ? Готовы ли вы отправиться в увлекательное путешествие по магическому миру навигации по DOM? Как ваш добрый сосед по компьютерным наукам, я рад помочь вам в этом приключении. Так что возьмите свой виртуальный компас и начнем исследовать!

JavaScript - DOM Navigation

Что такое DOM-узлы?

Представьте DOM (Document Object Model) как генеалогическое древо вашей веб-страницы. Каждый элемент в этом дереве называется узлом. Как и в реальной семье, эти узлы имеют взаимоотношения друг с другом - родители, дети и siblings. Круто, правда?

Давайте рассмотрим простой пример:

<html>
<head>
<title>Моя классная страница</title>
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Это абзац.</p>
</body>
</html>

В этой "семье" элемент <html> является прапрадедом, <head> и <body> - его детьми, и так далее. Каждый из этих элементов является узлом в нашем DOM-дереве.

Взаимоотношения между узлами HTML DOM

Теперь, когда мы понимаем, что такое узлы, давайте рассмотрим, как они связаны друг с другом. В нашем DOM-семейном древе:

Родительские узлы имеют детей
Дети имеют родителей
Siblings - это узлы с одним и тем же родителем

Например, в нашем предыдущем HTML:

<html> является родителем <head> и <body>
<head> и <body> являются siblings
<h1> и <p> являются детьми <body>

Нavigacija po uzlom koristeći JavaScript

Время надеть наши шляпы искателей! ? JavaScript предоставляет нам несколько полезных инструментов для навигации между этими узлами. Давайте окунемся в это!

Доступ к первому элементу- ребенку

Чтобы получить первого ребенка элемента, мы используем свойство firstElementChild. Вот как:

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // Вывод: H1

В этом примере мы находим первого ребенка тега <body>, который является是我们的 <h1> элемент.

Доступ к последнему элементу- ребенку

Аналогично, мы можем найти последнего ребенка с помощью lastElementChild:

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // Вывод: P

Здесь мы получаем последнего ребенка <body>, который является нашим <p> элементом.

Доступ ко всем детям HTML элемента

Хотите увидеть всех детей? Используйте children:

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// Вывод:
// H1
// P

Этот код循环 по всем детям <body> и выводит их теговые имена.

Доступ к родительскому узлу HTML элемента

Чтобы найти родителя узла, мы используем parentNode:

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // Вывод: BODY

Здесь мы находим родителя нашего <h1> элемента, который является <body>.

Доступ к следующему兄弟 узлу

Чтобы найти следующего兄弟, используйте nextElementSibling:

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // Вывод: P

Этот код находит兄弟, следующий за нашим <h1>, который является <p> элементом.

Доступ к предыдущему兄弟 узлу

А для предыдущего兄弟, используйте previousElementSibling:

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // Вывод: H1

Здесь мы находим兄弟 перед нашим <p>, который является <h1>.

Credits: Image by storyset

Предыдущий учебник:

JavaScript - Анимация DOM

Следующий учебник:

JavaScript - DOM-коллекции