Како да филтрирате и пређете ДОМ Трее помоћу ЈаваСцрипт-а

Да ли сте знали да постоји ЈаваСцрипт АПИ чија је једина мисија филтрирајте и понављајте кроз чворове желимо од ДОМ стабла? У ствари, не један, али постоје два таква АПИ-ја: НодеИтератор и ТрееВалкер. Они су прилично слични једни другима, са неким корисним разликама. Оба могу врати листу чворова који су присутни под датим коренским чвором док се придржавају било која унапред дефинисана и / или прилагођена правила филтрирања на њих.

Предефинисани филтери који су доступни у АПИ-ју могу нам помоћи циљајте различите врсте чворова као што су чворови текста или чворови елемената, и прилагођени филтери (додани од нас) могу даље филтрирати гомилу, на пример тражењем чворова са специфичним садржајем. Враћена листа чворова су итерабле, они могу бити кроз петљу, и можемо радити са свим појединачним чворовима на листи.

Како користити НодеИтератор АПИ

А НодеИтератор објекат се може креирати помоћу цреатеНодеИтератор () метода доцумент интерфејс. Овај метод узима три аргумента. Први је обавезан; то”с тхе роот ноде која држи све чворове које желимо филтрирати.

Други и трећи аргумент су опционо. Они су унапред дефинисани и прилагођени филтери, редом. Предефинисани филтери су доступни за употребу као константе НодеФилтер објекат.

На пример, ако је НодеФилтер.СХОВ_ТЕКСТ као други параметар додаје се итератор за а листа свих текстуалних чворова испод коријенског чвора. НодеФилтер.СХОВ_ЕЛЕМЕНТ ће се вратити само чворови елемената. Погледајте комплетну листу све доступне константе.

Трећи аргумент (прилагођени филтер) је а функција која имплементира филтер.

Ево га пример исјечка кода:

        
титле
 
 ово је страница омот 
Здраво
 
Како си?
 
 ткт неки линк    

Под претпоставком да желимо издвојите садржај свих текстуалних чворова који се налазе унутар #враппер див, то је начин на који то користимо НодеИтератор:

 вар див = доцумент.куериСелецтор ('# враппер'); вар нодеИтератор = доцумент.цреатеНодеИтератор (див, НодеФилтер.СХОВ_ТЕКСТ); (нодеИтератор.нектНоде ()) цонсоле.лог (нодеИтератор.референцеНоде.нодеВалуе.трим ());  / * конзолни излаз [Лог] ово је страница омотница [Лог] Хелло [Лог] [Лог] Како сте? [Пријава] */ 

Тхе нектНоде () метода НодеИтератор АПИ враћа следећи чвор у листи итерабилних текстуалних чворова. Када га користимо у а док петља за приступ сваком чвору у листи, пријављујемо обрезани садржај сваког чвора текста у конзолу. Тхе референцеНоде имовина НодеИтератор враћа чвор којем је тренутно прикључен итератор.

Као што можете видети у излазу, постоје неки текстуални чворови са само празним простором за њихов садржај. Ми Можемо избегавајте приказивање ових празних садржаја помоћу прилагођеног филтера:

 вар див = доцумент.куериСелецтор ('# враппер'); вар нодеИтератор = доцумент.цреатеНодеИтератор (див, НодеФилтер.СХОВ_ТЕКСТ, функција (чвор) ретурн (ноде.нодеВалуе.трим ()! == "")? НодеФилтер.ФИЛТЕР_АЦЦЕПТ: НодеФилтер.ФИЛТЕР_РЕЈЕЦТ;); (нодеИтератор.нектНоде ()) цонсоле.лог (нодеИтератор.референцеНоде.нодеВалуе.трим ());  / * излаз конзоле [Лог] ово је страница омотница [Лог] Хелло [Лог] Како сте? * / \ Т 

Функција прилагођеног филтера враћа константу НодеФилтер.ФИЛТЕР_АЦЦЕПТако текстуални чвор није празан, што доводи до укључивања тог чвора у листу чворова које ће итератор прелазити. Напротив, НодеФилтер.ФИЛТЕР_РЕЈЕЦТ константа се враћа да би искључити празне текстуалне чворове из итерабилне листе чворова.

Како користити ТрееВалкер АПИ

Као што сам споменуо раније НодеИтератор и ТрееВалкер АПИ-ји су сличне једна другој.

ТрееВалкер може се креирати помоћу цреатеТрееВалкер () метода доцумент интерфејс. Овај метод, баш као цреатеНодеФилтер (), узима три аргумента: коријенски чвор, унапред дефинисани филтер и прилагођени филтер.

Ако смо ми користити ТрееВалкер АПИ уместо НодеИтератор претходни исјечак кода изгледа овако:

 вар див = доцумент.куериСелецтор ('# враппер'); вар трееВалкер = доцумент.цреатеТрееВалкер (див, НодеФилтер.СХОВ_ТЕКСТ, функција (чвор) ретурн (ноде.нодеВалуе.трим ()! == "")? НодеФилтер.ФИЛТЕР_АЦЦЕПТ: НодеФилтер.ФИЛТЕР_РЕЈЕЦТ;); (трееВалкер.нектНоде ()) цонсоле.лог (трееВалкер.цуррентНоде.нодеВалуе.трим ());  / * оутпут [Лог] ово је страница омотница [Лог] Хелло [Лог] Како сте? * / \ Т 

Уместо референцеНоде, тхе цуррентНоде имовине ТрееВалкер АПИ је навикнут приступите чвору на који је тренутно прикључен итератор. Поред већ нектНоде () метода, Треевалкер има друге корисне методе. Тхе превиоусНоде () метода (такође присутна у НодеИтератор) враћа претходни чвор чвора на којем је итератор тренутно усидрен.

Сличну функционалност обавља и парентНоде (), прво дете(), ластЦхилд (), превиоусСиблинг (), и нектСиблинг () методе. Ове методе су доступно само у ТрееВалкер АПИ.

Ево примера кода излази задње дијете чвора итератор је усидрен у:

 вар див = доцумент.куериСелецтор ('# враппер'); вар трееВалкер = доцумент.цреатеТрееВалкер (див, НодеФилтер.СХОВ_ЕЛЕМЕНТ); цонсоле.лог (трееВалкер.ластЦхилд ()); / * оутпут [Лог] 
Како си?
 * / \ Т 

Који АПИ одабрати

Изабрати НодеИтератор АПИ, када треба само једноставан итератор за филтрирање и кружење кроз изабране чворове. И, изаберите ТрееВалкер АПИ, када треба да приступите породици филтрираних чворова, као што су њихови брати и сестре.