Разумевање ДОМ-а је од суштинског значаја у вашој каријери веб развоја. Требало би да знате како да изаберете различите елементе у ДОМ-у, тако да можете да прочитате њихов садржај или да их измените.

Прелазак преко ДОМ-а описује како се кретати структуром налик стаблу коју генеришу ХТМЛ документи. Ево комплетног водича о томе како да пређете преко ДОМ-а помоћу ЈаваСцрипт-а.

Шта је ДОМ траверсинг?

Тхе Модел објекта документа, или скраћено ДОМ, је репрезентација ХТМЛ документа у облику дрвета. Он пружа ан АПИ који вам омогућава, као веб програмеру, да комуницирате са веб-сајтом користећи ЈаваСцрипт.

Свака ставка у ДОМ-у је позната као чвор. Само преко ДОМ-а можете манипулисати структуром, садржајем и стилом ХТМЛ документа.

ДОМ обилазак (који се такође назива ходање или навигација ДОМ-ом) је чин одабира чворова у ДОМ стаблу из других чворова. Вероватно сте већ упознати са неколико метода за приступ елементима у ДОМ стаблу према њиховом ИД-у, класи или називу ознаке. Можете користити методе као што су доцумент.куериСелецтор() и доцумент.гетЕлементБиИд() урадити тако.

instagram viewer

Постоје и друге методе које можете користити заједно, за навигацију ДОМ-ом на ефикасније и робусније начине. Као што можете замислити, боље је претраживати са већ познате тачке на мапи него вршити потпуну претрагу.

На пример, одабир подређеног елемента од његовог надређеног је лакши и ефикаснији него да га тражите по целом стаблу.

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

Једном када имате приступ датом чвору у ДОМ стаблу, можете приступити његовим повезаним чворовима на различите начине. Можете да се померате надоле, нагоре или у страну у ДОМ стаблу од изабраног чвора.

Први метод укључује тражење елемента почевши од највишег чвора (као што је чвор документа) и померајући се наниже.

Други начин је супротан: крећете се од унутрашњег елемента навише по стаблу, тражећи спољашњи елемент. Последњи метод је када тражите елемент из другог елемента на истом нивоу (што значи да су два елемента браћа и сестре) у стаблу документа.

Да бисте демонстрирали, размотрите овај пример ХТМЛ документа:

<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="УТФ-8" />
<мета хттп-екуив="Кс-УА-Цомпатибле" цонтент="ИЕ=ивица" />
<мета наме="виевпорт" цонтент="видтх=девице-видтх, инитиал-сцале=1.0" />
<наслов>Пример странице</title>
</head>
<тело>
<главни>
<х1>Наслов моје странице</h1>
<стр>Леп натпис иде овде</п>


<чланак класа="први__чланак">
<х2>Листа невероватних плодова</h2>
<стр>Обавезно јести воће</п>


<див цласс="омотач-1">
<ул цласс="аппле-лист">
<ли цласс="јабука">јабуке</li>
<ли цласс="наранџаста">Наранџе</li>
<ли цласс="авокадо">Авокадо</li>
<ли цласс="грожђа">
 Грожђе


<ул>
<ли цласс="тип-1">Месец пада</li>
<ли>Султана</li>
<ли>Цонцорд</li>
<ли>Цримсон Сеедлесс</li>
</ul>
</li>
<ли цласс="банана">банане</li>
</ul>


<дугме цласс="бтн-1">Прочитајте целу листу</button>
</div>
</article>


<чланак класа="други__чланак">
<х2>Невероватна места у Кенији</h2>
<стр>Обавезно посетити места у Кенији</п>


<див цласс="омотач-2">
<ул цласс="места-лист">
<ли>Масаи Мара</li>
<ли>Диани Беацх</li>
<ли>Плажа Ватаму</li>
<ли>Национални парк Амбосели</li>
<ли>Лаке Накуру</li>
</ul>


<дугме цласс="бтн-2">Прочитајте целу листу</button>
</div>
</article>
</main>
</body>
</html>

Прелазак ДОМ-а надоле

Можете прећи ДОМ надоле користећи један од два метода. Први је метод заједничког селектора (елемент.куериСелецтор или елемент.куериСелецторАлл). Друго, можете користити деца или цхилдНодес имовина. Постоје и још две посебне особине, и то ластЦхилд и прво дете.

Коришћење селекторских метода

Методе куериСелецтор() вам омогућавају да тражите један или више елемената који одговарају датом селектору. На пример, можете тражити први елемент са класом "први чланак" користећи доцумент.куериСелецтор('.фирст-артицле'). И да понесем све х2 елементе у документу, можете користити куериСелецторАлл метод: доцумент.куериСелецторАлл('х2'). Тхе куериСелецторАлл метода враћа листу чворова одговарајућих елемената; можете изабрати сваку ставку користећи нотацију заграда:

конст наслови = документ.куериСелецторАлл('х2');
конст фирстХеадинг = наслови[0]; // избор првог х2 елемента
конст сецондХеадинг = наслови[1]; // избор другог елемента х2

Главна зачкољица када користите методе селектора је да морате користити одговарајуће симболе, где је применљиво, пре селектора као што то радите у ЦСС-у. На пример, ".цласснаме" за класе и "#ид" за ИД-ове.

Запамтите да ће резултат бити ХТМЛ елемент, а не само унутрашњи садржај изабраног елемента. За приступ садржају можете користити чворове иннерХТМЛ имовина:

документ.куериСелецтор('.оранге').иннерХТМЛ

Коришћење својстава деце или дечијих чворова

Тхе деца својство бира све подређене елементе који се налазе директно испод датог елемента. Ево примера за деца имовина у акцији:

конст апплеЛист = документ.куериСелецтор('.аппле-лист');
конст јабуке = апплеЛист.цхилдрен; 
конзола.лог (јабуке);

Логгинг јабуке на конзоли ће приказати скуп свих ставки листе директно испод елемента са класом "аппле-лист" као ХТМЛ колекцију. ХТМЛ колекција је објекат сличан низу, тако да можете да користите нотацију заграда за одабир ставки, као што је случај са куериСелецторАлл.

за разлику од деца имовина, цхилдНодес враћа све директне подређене чворове (не само подређене елементе). Ако вас занимају само подређени елементи, рецимо само ставке листе, користите деца имовина.

Коришћење посебних ластЦхилд и фирстЦхилд својстава

Ове две методе нису тако робусне као прве две. Као што њихова имена сугеришу, ластЦхилд и прво дете својства враћају последњи и први подређени чвор елемента.

конст апплеЛист = документ.куериСелецтор('.аппле-лист');
конст фирстЦхилд = апплеЛист.фирстЦхилд;
конст ластЦхилд = апплеЛист.ластЦхилд;

Прелазак ДОМ-а нагоре

Можете се кретати према ДОМ-у користећи парентЕлемент (или парентНоде) и најближи својства.

Коришћење парентЕлемент или парентНоде

И једно и друго парентЕлемент или парентНоде својства вам омогућавају да изаберете родитељски чвор изабраног елемента један ниво навише. Критична разлика је у томе парентЕлемент бира само родитељски чвор који је елемент. С друге стране, парентНоде може изабрати родитеља без обзира да ли је у питању елемент или други тип чвора.

У доњем примеру кода користимо парентЕлемент да изаберете див са класом "враппер-1" са "аппле-лист":

конст апплеЛист = документ.куериСелецтор('.аппле-лист');
конст парентДив = апплеЛист.парентЕлемент; 
конзола.лог (парентДив); // приказује див елемент са омотачем класе-1

Коришћење најближег својства

Тхе најближи својство бира први родитељски елемент који одговара наведеном селектору. Омогућава вам да изаберете више нивоа уместо једног. На пример, ако већ имамо дугме са изабраном класом "бтн-1", можемо изабрати главни елемент користећи најближи имовине како следи:

конст бтн1 = документ.куериСелецтор('.бтн-1');
цонст маинЕл = бтн1.цлосест('главни');
конзола.лог (маинЕл); // приказује главни елемент

Као куериСелецтор и куериСелецторАлл, користите одговарајуће бираче у најближи методом.

Прелазак ДОМ-а бочно

Постоје две доступне методе за бочно ходање ДОМ-ом. Можете користити нектЕлементСиблинг или превиоусЕлементСиблинг. Користите нектЕлементСиблинг да бисте изабрали следећи братски елемент и превиоусЕлементСиблинг да бисте изабрали претходног брата или сестру.

конст наранџаста = документ.куериСелецтор('.оранге');
конст јабука = оранге.превиоусЕлементСиблинг;
конст авокадо = оранге.нектЕлементСиблинг;

Постоје и еквиваленти нектСиблинг и претходниСиблинг својства која такође бирају све типове чворова, а не само елементе.

Урадите више ланчавањем својстава и метода преласка ДОМ-а

Све горе наведене методе и својства могу вам омогућити да изаберете било који чвор у ДОМ-у. Међутим, у неким случајевима, можда ћете желети да се померите прво нагоре, а затим надоле или у страну. У том случају, повезивање различитих својстава заједно ће се показати корисним.