Разбирането на DOM е от съществено значение за вашата кариера в уеб разработката. Трябва да знаете как да избирате различни елементи в DOM, така че след това да можете да прочетете съдържанието им или да ги промените.

Преминаването на DOM описва как да навигирате в дървовидната структура, която генерират HTML документите. Ето пълно ръководство за това как да преминете през DOM с JavaScript.

Какво е DOM Traversing?

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

Всеки елемент в DOM е известен като възел. Само чрез DOM можете да манипулирате структурата, съдържанието и стила на вашия HTML документ.

Обхождането на DOM (наричано също ходене или навигиране на DOM) е актът на избиране на възли в дървото на DOM от други възли. Вероятно вече сте запознати с няколко метода за достъп до елементи в DOM дървото по техния идентификатор, клас или име на етикет. Можете да използвате методи като

instagram viewer
document.querySelector() и document.getElementById() да го направя.

Има други методи, които можете да използвате заедно, за да навигирате в DOM по по-ефективни и стабилни начини. Както можете да си представите, по-добре е да търсите от вече известна точка на картата, отколкото да правите пълно търсене.

Например избирането на дъщерен елемент от неговия родител е по-лесно и по-ефективно, отколкото търсенето му в цялото дърво.

Примерен документ за преминаване

След като имате достъп до даден възел в DOM дървото, можете да получите достъп до свързаните с него възли по различни начини. Можете да се движите надолу, нагоре или настрани в DOM дървото от избрания от вас възел.

Първият метод включва търсене на елемент, започващ с най-горния възел (като възела на документа) и придвижване надолу.

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

За да демонстрирате, разгледайте този примерен HTML документ:

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="UTF-8" />
<мета http-equiv="X-UA-съвместим" съдържание="IE=ръб" />
<мета име="прозорец за изглед" съдържание="ширина=ширина на устройството, начален мащаб=1.0" />
<заглавие>Примерна страница</title>
</head>
<тяло>
<основен>
<h1>Моето заглавие на страницата</h1>
<стр>Хубав надпис е тук</стр>


<клас на статията="първа__статия">
<h2>Списък с невероятни плодове</h2>
<стр>Трябва да се ядат плодове</стр>


<div клас="обвивка-1">
<ул клас="ябълков списък">
<ли клас="ябълка">Ябълки</li>
<ли клас="оранжево">портокали</li>
<ли клас="авокадо">авокадо</li>
<ли клас="гроздов">
 грозде


<ул>
<ли клас="тип-1">Лунни капки</li>
<ли>Султана</li>
<ли>Конкорд</li>
<ли>Crimson Seedless</li>
</ul>
</li>
<ли клас="банан">Банани</li>
</ul>


<бутон клас="btn-1">Прочетете пълния списък</button>
</div>
</article>


<клас на статията="втора__статия">
<h2>Невероятни места в Кения</h2>
<стр>Трябва да посетите места в Кения</стр>


<div клас="обвивка-2">
<ул клас="места-списък">
<ли>Масай Мара</li>
<ли>Диани Бийч</li>
<ли>Плаж Уатаму</li>
<ли>Национален парк Амбосели</li>
<ли>Езерото Накуру</li>
</ul>


<бутон клас="btn-2">Прочетете пълния списък</button>
</div>
</article>
</main>
</body>
</html>

Преминаване на DOM надолу

Можете да преминете през DOM надолу, като използвате един от двата метода. Първият е общият метод за селектор (element.querySelector или element.querySelectorAll). Второ, можете да използвате деца или childNodes Имот. Има и две други специални свойства, а именно, последно дете и първо дете.

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

Методите querySelector() ви позволяват да търсите един или повече елементи, които съответстват на даден селектор. Например, можете да търсите първия елемент с клас "first-article", като използвате document.querySelector('.first-article'). И да вземеш всичко h2 елементи в документа, можете да използвате querySelectorAll метод: document.querySelectorAll('h2'). The querySelectorAll метод връща списък с възли от съвпадащи елементи; можете да изберете всеки елемент, като използвате нотация в скоби:

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

Основната уловка при използване на методи за селектор е, че трябва да използвате подходящите символи, където е приложимо, преди селектора, както правите в CSS. Например ".classname" за класове и "#id" за идентификатори.

Не забравяйте, че резултатът ще бъде HTML елемент, а не само вътрешното съдържание на избрания елемент. За достъп до съдържанието можете да използвате възела innerHTML Имот:

документ.querySelector('.orange').innerHTML

Използване на свойствата на децата или childNodes

The деца свойство избира всички дъщерни елементи, които са директно под даден елемент. Ето един пример за деца имот в действие:

конст appleList = документ.querySelector('.apple-list');
конст ябълки = appleList.children; 
конзола.log (ябълки);

Сеч ябълки към конзолата ще покаже набор от всички елементи от списък директно под елемента с клас "apple-list" като HTML колекция. HTML колекция е обект, подобен на масив, така че можете да използвате нотация в скоби, за да изберете елементи, както при querySelectorAll.

За разлика от деца Имот, childNodes връща всички директни дъщерни възли (не само дъщерни елементи). Ако се интересувате само от дъщерни елементи, кажете само елементи от списък, използвайте деца Имот.

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

Тези два метода не са толкова надеждни, колкото първите два. Както подсказват имената им, последно дете и първо дете свойствата връщат последния и първия дъщерен възел на елемент.

конст appleList = документ.querySelector('.apple-list');
конст firstChild = appleList.firstChild;
конст lastChild = appleList.lastChild;

Преминаване на DOM нагоре

Можете да навигирате нагоре в DOM, като използвате parentElement (или parentNode) и най-близо Имоти.

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

И двете parentElement или parentNode свойствата ви позволяват да изберете родителския възел на избрания елемент едно ниво нагоре. Критичната разлика е, че parentElement избира само родителския възел, който е елемент. От друга страна, parentNode може да избере родител, независимо дали е елемент или различен тип възел.

В примерния код по-долу използваме parentElement за да изберете div с класа "wrapper-1" от "apple-list":

конст appleList = документ.querySelector('.apple-list');
конст parentDiv = appleList.parentElement; 
конзола.log (parentDiv); // показва div елемент с клас wrapper-1

Използване на най-близкия имот

The най-близо свойство избира първия родителски елемент, който съответства на определен селектор. Позволява ви да изберете няколко нива нагоре вместо едно. Например, ако вече имаме избран бутон с клас "btn-1", можем да изберем основен елемент с помощта на най-близо имот, както следва:

конст btn1 = документ.querySelector('.btn-1');
const mainEl = btn1.closest('основен');
конзола.log (mainEl); // показва главния елемент

като querySelector и querySelectorAll, използвайте подходящи селектори в най-близо метод.

Преминаване на DOM странично

Има два налични метода за ходене на DOM настрани. Можеш да използваш nextElementSibling или previousElementSibling. Използвайте nextElementSibling за да изберете следния братски елемент и previousElementSibling за да изберете предишния брат или сестра.

конст оранжево = документ.querySelector('.orange');
конст ябълка = orange.previousElementSibling;
конст авокадо = orange.nextElementSibling;

Има и еквивалентни nextSibling и предишен брат свойства, които също избират от всички типове възли, а не само елементи.

Направете повече чрез верижно свързване на свойства и методи за преминаване на DOM

Всички методи и свойства по-горе могат да ви позволят да изберете всеки възел в DOM. В някои случаи обаче може да искате да се придвижите първо нагоре, след това надолу или настрани. В такъв случай верижното свързване на различни свойства заедно ще се окаже полезно.