У ЈаваСцрипт-у, ДОМ стабло прати хијерархијску структуру која садржи велику листу чворова. Структура почиње од основног чвора (Документ), а затим се додаје родитељским и подређеним чворовима. Да би приступио овим подређеним чворовима, ЈаваСцрипт нуди „ цхилдНодес ' имовина. Ово својство помаже корисницима да приступе целом или одређеном подређеном чвору повезаног родитељског елемента.
Овај пост елаборира циљ и рад својства ХТМЛ ДОМ елемента „цхилдНодес“ у ЈаваСцрипт-у.
Шта је својство ХТМЛ ДОМ елемента „цхилдНодес“ у ЈаваСцрипт-у?
„ цхилдНодес ” је својство само за читање које враћа листу свих подређених чворова елемента у облику објекта НодеЛист. Ово посебно својство се такође може користити за приступ специфичном подређеном чвору родитељског елемента. Подређени чвор почиње од индекса „0 (нула)”. Штавише, размаци, коментари и текстуални чворови се такође сматрају подређеним чворовима.
Синтакса
елемент.цхилдНодес
Горе генерализована синтакса враћа НодеЛист објекат који садржи подређене чворове циљаног елемента.
Хајде да практично користимо горе дефинисане синтаксе.
ХТМЛ код
Прво погледајте наведени ХТМЛ код:
< див ид = 'Див' стил = 'ивица: 2пк пуна црна; висина: 200пк; ширина: 250пк; допуна: 10пк' >< х2 > Први наслов х2 >
< х3 > Други наслов х3 >
< стр > Први параграф стр >
< стр > Други параграф стр >
див >
< стр ид = 'за' > стр >
У горњим редовима кода:
- Додајте „ <див> ” елемент са ИД-ом „Див“, стилизован уз помоћ наведених (ивица, висина и ширина) својстава.
- Унутар елемента “<див>” дефинишите два наслова и два пасуса, респективно.
- На крају, „ <п> ” ознака уграђује празан пасус са ИД-ом “пара”.
Белешка: Наведени ХТМЛ код се разматра у овом посту.
Пример 1: Примена својства „цхилдНодес“ да бисте добили укупан број подређених чворова одређеног елемента
Овај пример користи својства „цхилдНодес“ и „ленгтх“ да би се добио укупан број подређених чворова присутних у одређеном родитељском елементу.
ЈаваСцрипт код
Пратимо дати код:
< скрипта >цонст елем = доцумент.гетЕлементБиИд ( 'Див' ) ;
дозволити број = елем.цхилдНодес.ленгтх;
доцумент.гетЕлементБиИд ( 'за' ) .иннерХТМЛ = 'Вредност: ' + нум;
скрипта >
У горњим редовима кода:
- Променљива „елем“ користи „ гетЕлементБиИд() ” за приступ родитељском елементу чији је ИД „Див“.
- Променљива „нум“ користи „ цхилдНодес ' и ' дужина ” својства да бисте добили број подређених чворова присутних у елементу „<див>” којем се приступа.
- На крају, метода „гетЕлементБиИд()“ дохваћа уграђени празан пасус преко његовог ИД-а „пара“ да би му додала вредност променљиве „нум“.
Излаз
Излаз имплицира да постоји укупно „ 9 ” подређени чворови у датом елементу „<див>”, укључујући размаке између елемената.
Пример 2: Примена својства „цхилдНодес“ за добијање имена одређеног подређеног чвора
Својство „цхилдНодес“ се такође може користити са својством „нодеНаме“ за добијање имена подређеног(их) чвора. Да видимо то практично.
ЈаваСцрипт код
Прођите кроз следећи код:
< скрипта >цонст елем = доцумент.гетЕлементБиИд ( 'Див' ) ;
дозволити број = елем.цхилдНодес [ 1 ] .нодеНаме;
доцумент.гетЕлементБиИд ( 'за' ) .иннерХТМЛ = 'Елемент: ' +нум;
скрипта >
Овде, „ цхилдНодес ” својство је повезано са „ нодеНаме ” да бисте добили наведено име подређеног чвора на основу индекса којем се приступа, тј. „1“.
Излаз
Излаз приказује име подређеног чвора, тј. елемент „Х2“ наспрам наведеног индекса.
Пример 3: Примена својства „цхилдНодес“ за промену боје текста одређеног подређеног чвора
Овај пример користи разматрано својство да промени боју циљног индексираног детета.
ЈаваСцрипт код
Размотрите следећи код:
< скрипта >доцумент.гетЕлементБиИд ( 'Див' ) .цхилдНодес [ 3 ] .стиле.цолор = 'зелен' ;
скрипта >
Овде, „ гетЕлементБиИд() ” метода дохваћа родитељски елемент „<див>” преко његовог ИД-а „Див” и његовог подређеног чвора постављеног на наведени индекс преко „ цхилдНодес ” имовине, респективно. Након тога, користите „ стил.боја ” да бисте променили боју текста подређеног чвора којем се приступа.
Излаз
Излаз потврђује да је боја текста наведеног подређеног чвора промењена на одговарајући начин.
Закључак
У ЈаваСцрипт-у, „ цхилдНодес ” својство преузима објекат нодеЛист који садржи подређене чворове циљног ХТМЛ елемента. Подређеним чворовима се може приступити одједном или жељеном тако што ћете навести број индекса са својством „цхилдНодес“. Ово својство омогућава извршавање ЈаваСцрипт функције за обављање посебних задатака на подређеним чворовима којима се приступа. Овај чланак је разрадио примену својства „цхилдНодес“ у ЈаваСцрипт-у.