Преглед садржаја
- Шта је својство „парентЕлемент“ у ЈаваСцрипт-у?
- Како приступити/позвати родитељски елемент преко ХТМЛ ДОМ својства парентЕлемент?
- Коришћене уобичајене методе и својства
- Пример 1: Приступ родитељском елементу преко својства „парентЕлемент“ у ЈаваСцрипт-у
- Пример 2: Приступ и родитељским и подређеним елементима преко својстава „парентЕлемент“ и „цхилдрен“ у ЈаваСцрипт-у
- Пример 3: Приступ родитељском елементу помоћу својства „парентНоде“.
- Закључак
Шта је својство „парентЕлемент“ у ЈаваСцрипт-у?
„ парентЕлемент ” својство у ЈаваСцрипт-у преузима елемент који је родитељ циљног елемента.
Како приступити/позвати родитељски елемент преко ХТМЛ ДОМ својства парентЕлемент?
Родитељском елементу се може приступити помоћу ХТМЛ ДОМ-а “ парентЕлемент “ имовина са “ нодеНаме ” или преузимање чвора родитељског елемента уместо тога преко „ парентНоде ' имовина.
Синтакса
чвор. парентЕлемент
Повратна вредност
Ово својство преузима објекат елемента који представља чвор родитељског елемента чвора и даје „ нула ” ако чвор не садржи родитељ.
Коришћене уобичајене методе и својства
доцумент.куериСелецтор() : Овај метод добија први елемент који одговара ЦСС селектору.
Синтакса
документ. куериСелецтор ( ово )У овој синтакси, „ ово ” се односи на један или више ЦСС селектора.
доцумент.гетЕлементБиИд() : Враћа елемент који има наведени ИД.
Синтакса
документ. гетЕлементБиИд ( ид )Овде, „ ид ” означава ИД циљног елемента који треба преузети.
селецтедИндек : Ово својство преузима индекс изабране опције са падајуће листе. Тхе '-1' опција поништава избор свих опција.
нодеНаме : Ово својство преузима име чвора.
деца : Ово својство враћа подређене елементе елемента као колекцију.
оутерХТМЛ : Ово својство додељује или преузима ХТМЛ елемент, као и његове атрибуте и почетне и крајње ознаке.
парентНоде : Ово посебно својство преузима родитељски чвор елемента или чвора.
Белешка : Разлика између „ парентЕлемент ' и ' парентНоде ” својство је да претходно својство, тј. „парентЕлемент” даје „ нула ” ако родитељски чвор не одражава чвор елемента.
Пример 1: Приступ родитељском елементу преко својства „парентЕлемент“ у ЈаваСцрипт-у
Овај пример позива родитељски елемент елемента и приказује име његовог (родитељског) чвора након клика на дугме.
ХТМЛ код
< хтмл >
< тело >
< х1 > Својство парентЕлемент у ЈаваСцрипт-у < / х1 >
< х2 > Изаберите језик: < / х2 >
< изаберите класа = 'елемент' >
< опција > Питхон < / опција >
< опција > Јава < / опција >
< опција > ЈаваСцрипт < / опција >
< / изаберите >
< дугме онцлицк = 'дисплаиПарент()' класа = 'дугме' > Прикажите родитељски елемент елемента 'оптион'. < / дугме >
< див класа = 'темп' >< / див >< / тело >
< хтмл >
У овом коду:
- Наведите дато “<х1>” и “<х2>” елементе који обухватају наслове првог и другог нивоа, респективно.
- Након тога, креирајте а “<изабери>” елемент представљен датом класом која садржи даље подређене елементе, тј. “<опција>” .
- Сада креирајте дугме повезано са „ онцлицк ” догађај који преусмерава на “дисплаиПарент()” функција након клика на дугме.
- На крају, наведите “<див>” елемент у коме треба да се прикаже резултат, тј. родитељски елемент којем се приступа.
ЦСС код
<стиле >тело {
Поравнање текста : центар ;
боја : #ффф ;
боја позадине : сива ;
висина : 100% ;
}
.дугме {
висина : 2рем ;
граница-радијус : 2пк ;
ширина : 35% ;
маргина : 2рем ауто ;
приказ : блокирати ;
боја : #ба0б0б ;
курсор : показивач ;
}
.темп {
фонт-сизе : 1.5рем ;
фонт-веигхт : одважан ;
}
>
У горњем ЦСС коду:
- Стилизирајте целокупну веб страницу са примењеним својствима „тект-алигн“, „бацкгроунд-цолор“ итд.
- Исто тако, примените стил на креирано дугме преко његове класе подешавањем његове висине, ширине, приказа, боје итд.
- Коначно, стилизујте „ див ” упућивањем на име његове класе у којој ће се приказати родитељски елемент којем се приступа.
ЈаваСцрипт код
< скрипта >функција дисплаиПарент ( ) {
био добити = документ. куериСелецтор ( '.елемент' ) ;
био ово = добити . Опције [ добити . селецтедИндек ] ;
био додати = документ. куериСелецтор ( '.темп' ) ;
додати. иннерХТМЛ = 'Надређени елемент елемента опције је -> ' + ово. парентЕлемент . нодеНаме ;
}
скрипта >
Према овим редовима кода:
- Дефинишите функцију “дисплаиПарент()” који приступа елементу “<селецт>” упућивањем на његову класу преко “доцумент.куериСелецтор()” методом.
- „ Опције ” колекција добија колекцију свих елемената „<оптион>” у падајућој листи и „ селецтедИндек ” својство преузима индекс изабране опције за падајућу листу.
- На крају, користите “доцумент.куериСелецтор()” поново приступите елементу „<див>” и додајте га родитељским елементом елемента „<оптион>” преко примењеног „ парентЕлемент ' и ' нодеНаме ” (приказује име родитељског чвора) својства.
Цео код
< хтмл >
< тело >
< х1 > Својство парентЕлемент у ЈаваСцрипт-у < / х1 >
< х2 > Изаберите језик: < / х2 >
< изаберите класа = 'елемент' >
< опција > Питхон < / опција >
< опција > Јава < / опција >
< опција > ЈаваСцрипт < / опција >
< / изаберите >
< дугме онцлицк = 'дисплаиПарент()' класа = 'дугме' > Прикажите родитељски елемент елемента 'оптион'. < / дугме >
< див класа = 'темп' >< / див >< / тело >
< стил >
тело{
тект-алигн:центер;
боја:#ффф;
боја позадине: сива;
висина:100%;
}
.буттон{
висина:2рем;
бордер-радиус:2пк;
ширина:35%;
маргин:2рем ауто;
дисплеј блок;
боја:#ба0б0б;
курсор: показивач;
}
.темп{
фонт-сизе:1.5рем;
фонт-веигхт:болд;
}
< / стил >
< скрипта >
функција дисплаиПарент() {
вар гет = доцумент.куериСелецтор('.елем');
вар сел=гет.оптионс[гет.селецтедИндек];
вар аппенд = доцумент.куериСелецтор('.темп');
аппенд.иннерХТМЛ='Родитељски елемент опције Елемент је -> ' + сел.парентЕлемент.нодеНаме;
}
< / скрипта >
Излаз
Овде се може видети да је родитељски елемент свих подређених чворова, односно изабрана опција из падајућег менија у “<опција>” елемент се враћа, тј. „ СЕЛЕЦТ ”.
Пример 2: Приступ и родитељским и подређеним елементима преко својстава „парентЕлемент“ и „цхилдрен“ у ЈаваСцрипт-у
Следећи пример кода приступа и родитељском и подређеном елементу одређеног елемента.
ХТМЛ код
< хтмл >< тело >
< див ид = 'родитељ' >
< див ид = 'дете' >
< х1 >Први подређени елемент< / х1 >
< х1 >Други подређени елемент< / х1 >
< / див >
< / див >
< / тело >
< / хтмл >
У овом блоку кода креирајте два елемента „<див>” и два елемента „<х1>” који се односе на подређене елементе последњег елемента „<див>”.
ЈаваСцрипт код
< скрипта >дозволити добити = документ. гетЕлементБиИд ( 'дете' ) ;
нека родитељ = добити . парентЕлемент ;
конзола. Пријава ( 'Надређени елемент -> ' , родитељ. оутерХТМЛ ) ;
конзола. Пријава ( 'Назив чвора родитељског елемента -> ' , родитељ. нодеНаме ) ;
нека деца = добити . деца ;
за ( Пустио сам = 0 ; и < деца. дужина ; и ++ ) {
конзола. Пријава ( `Подређени елемент $ { и } : ` , деца [ и ] . оутерХТМЛ ) ;
}
за ( Пустио сам = 0 ; и < деца. дужина ; и ++ ) {
конзола. Пријава ( `Назив чвора подређеног елемента $ { и } : ` , деца [ и ] . нодеНаме ) ;
}
скрипта >
Објашњење горњег кода је следеће:
- Приступите последњем елементу „<див>” помоћу његовог „ид” користећи “доцумент.гетЕлементБиИд()” метод и дохвати његов родитељски елемент преко „ парентЕлемент ' имовина.
- Сада прикажите родитељски елемент са атрибутима и почетне и крајње ознаке преко примењеног „ оутерХТМЛ ' имовина.
- Такође, вратите име родитељског елемента, тј. име чвора користећи „ нодеНаме ' имовина.
- Након тога, приступите деци елемента користећи својство „деца“.
- Примените „ за ” петља да понови све подређене елементе и врати их са ознакама преко разматраног својства „оутерХТМЛ“.
- Исто тако, поново користите петљу „фор“ да бисте вратили и имена чворова подређених елемената.
Цео код
< хтмл >< тело >
< див ид = 'родитељ' >
< див ид = 'дете' >
< х1 > Фирст Цхилд Елемент < / х1 >
< х1 > Други подређени елемент < / х1 >
< / див >
< / див >
< / тело >
< / хтмл >
< скрипта >
лет гет = доцумент.гетЕлементБиИд('цхилд');
нека парент = гет.парентЕлемент;
цонсоле.лог('Родитељски елемент -> ', парент.оутерХТМЛ);
цонсоле.лог('Назив чвора родитељског елемента -> ', име парент.ноде);
нека деца = гет.цхилдрен;
фор(нека је и =0; и < цхилдрен.ленгтх; и++ ) {
цонсоле.лог ( `Подређени елемент $ { и } : `, деца [ и ] .оутерХТМЛ ) ;
}
за ( Пустио сам = 0 ; и < цхилдрен.ленгтх; и++ ) {
цонсоле.лог ( `Чвор подређеног елемента Име $ { и } : `, деца [ и ] .нодеНаме ) ;
}
< / скрипта >
Излаз
Овај исход имплицира да су родитељски и подређени елементи циљног елемента приказани детаљно (заједно са именима чворова) у складу са тим.
Пример 3: Приступ родитељском елементу помоћу својства „парентНоде“.
У овој демонстрацији, родитељски елемент одређеног елемента се може позвати и тада ће родитељски елемент овог елемента такође бити дохваћен, што ће резултирати угнежђеним понашањем. Ово се може постићи путем „ парентНоде ” својство уместо тога које преузима родитељски чвор елемента.
ХТМЛ код
< хтмл >< тело >
< див ид = 'родитељ' >
< ол ид = 'темп' >
< то ид = 'темпцхилд' >Питхон< / то >
< то >Јава< / то >
< то >ЈаваСцрипт< / то >
< / ол >
< / див > < / тело >
< / хтмл >
Овде направите елемент „<див>” који даље садржи елементе „<ол>(уређена листа)” и „<ли>(ставке листе)” који имају дате ИД-ове.
ЈаваСцрипт код
< скрипта >дозволити добити = документ. гетЕлементБиИд ( 'темпцхилд' ) ;
нека родитељ = добити . парентНоде ;
конзола. Пријава ( „Чвор родитељског елемента 'ли'->” , родитељ ) ;
нека добије2 = документ. гетЕлементБиИд ( 'темп' ) ;
нека родитељ2 = гет2. парентНоде ;
конзола. Пријава ( „Чвор родитељског елемента 'ол'->” , родитељ2 ) ;
скрипта >
На основу овог исечка кода, извршите доле наведене кораке:
- Позовите елемент „<ли>” преко „ гетЕлементБиИд() ”, приступите чвору његовог родитељског елемента користећи „ парентНоде ” и прикажите родитељски чвор.
- Исто тако, сада позовите приказани родитељски чвор, тј. „<ол>“ родитељ понављањем исте методологије.
Цео код
< хтмл >< тело >
< див ид = 'родитељ' >
< ол ид = 'темп' >
< то ид = 'темпцхилд' > Питхон < / то >
< то > Јава < / то >
< то > ЈаваСцрипт < / то >
< / ол >
< / див >
< скрипта >
лет гет = доцумент.гетЕлементБиИд('темпцхилд');
нека парент = гет.парентНоде;
цонсоле.лог('Чвор родитељског елемента од 'ли'-> ', родитељ);
нека гет2 = доцумент.гетЕлементБиИд('темп');
нека парент2 = гет2.парентНоде;
цонсоле.лог('Чвор родитељског елемента 'ол'-> ', парент2);
< / скрипта >
< / тело >
< / хтмл >
Излаз
Овај исход означава да су родитељски чворови у оба случаја приказани у складу са тим.
Закључак
Родитељском елементу се може приступити коришћењем ХТМЛ ДОМ-а “ парентЕлемент “ својство у комбинацији са “ нодеНаме ” или преузимање родитељског чвора преко својства „парентНоде”. Међутим, да бисте приступили подређеном елементу, користите „ дете ' имовина.