Prezentare generală a conținutului
- Ce este proprietatea „parentElement” în JavaScript?
- Cum se accesează/invocă elementul părinte prin proprietatea HTML DOM parentElement?
- Metode și proprietăți comune utilizate
- Exemplul 1: Accesarea elementului părinte prin proprietatea „parentElement” din JavaScript
- Exemplul 2: Accesarea atât a elementelor părinte, cât și a copilului prin intermediul proprietăților „parentElement” și „children” din JavaScript
- Exemplul 3: Accesarea elementului părinte folosind proprietatea „parentNode”.
- Concluzie
Ce este proprietatea „parentElement” în JavaScript?
„ parentElement ” proprietatea din JavaScript preia elementul care este părintele elementului țintă.
Cum se accesează/invocă elementul părinte prin proprietatea HTML DOM parentElement?
Elementul părinte poate fi accesat folosind HTML DOM „ parentElement ” proprietate cu ” nodeName ” sau preluarea nodului elementului părinte în schimb prin intermediul „ parentNode ” proprietate.
Sintaxă
nodul. parentElement
Valoare returnată
Această proprietate preia un obiect element care reprezintă nodul element părinte al unui nod și oferă „ nul ” dacă nodul nu cuprinde un părinte.
Metode și proprietăți comune utilizate
document.querySelector() : Această metodă primește primul element care se potrivește cu selectorul CSS.
Sintaxă
document. querySelector ( acest )În această sintaxă, „ acest ” se referă la unul sau mai mulți selectori CSS.
document.getElementById() : returnează elementul având id-ul specificat.
Sintaxă
document. getElementById ( id )Aici, ' id ” indică id-ul elementului țintă care urmează să fie preluat.
selectatIndex : Această proprietate preia indexul opțiunii selectate din lista derulantă. The „-1” opțiunea deselectează toate opțiunile.
nodeName : Această proprietate preia numele nodului.
copii : Această proprietate returnează elementele secundare ale elementului ca o colecție.
outerHTML : Această proprietate alocă sau preia elementul HTML, precum și atributele și etichetele de început și de sfârșit.
parentNode : Această proprietate particulară preia nodul părinte al unui element sau al unui nod.
Notă : Diferența dintre „ parentElement ' și ' parentNode ” proprietatea este aceea că fosta proprietate, adică „parentElement” dă „ nul ” dacă nodul părinte nu reflectă un nod element.
Exemplul 1: Accesarea elementului părinte prin proprietatea „parentElement” din JavaScript
Acest exemplu invocă elementul părinte al unui element și afișează numele nodului său (părinte) la clic pe butonul.
Cod HTML
< html >
< corp >
< h1 > Proprietatea parentElement în JavaScript < / h1 >
< h2 > Selectați limba: < / h2 >
< Selectați clasă = 'element' >
< opțiune > Piton < / opțiune >
< opțiune > Java < / opțiune >
< opțiune > JavaScript < / opțiune >
< / Selectați >
< buton onclick = „displayParent()” clasă = 'buton' > Afișați elementul părinte al elementului „opțiune”. < / buton >
< div clasă = 'temp' >< / div >< / corp >
< html >
În acest cod:
- Specificați ceea ce este dat „
”
și „”
elemente care cuprind titlurile de nivelul unu și, respectiv, de nivelul doi. - După aceea, creați un „
- Acum, creați un buton asociat cu un „ onclick ” eveniment care redirecționează către „displayParent()” funcția la clic pe butonul.
- În cele din urmă, specificați „” element în care urmează să fie afișat rezultatul, adică elementul părinte accesat.
Cod CSS
corp {
aliniere text : centru ;
culoare : #fff ;
culoare de fundal : gri ;
înălţime : 100% ;
}
.buton {
înălţime : 2rem ;
hotar-raza : 2px ;
lăţime : 35% ;
marginea : 2rem auto ;
afişa : bloc ;
culoare : #ba0b0b ;
cursor : indicator ;
}
.temp {
marimea fontului : 1,5 rem ;
grosimea fontului : îndrăzneţ ;
}
În codul CSS de mai sus:
- Stilați întreaga pagină web cu proprietățile aplicate „text-align”, „background-color” etc.
- De asemenea, aplicați stilul butonului creat prin intermediul clasei sale ajustând înălțimea, lățimea, afișarea, culoarea etc.
- În cele din urmă, stilați „ div ” prin referire la numele clasei sale în care urmează să fie afișat elementul părinte accesat.
Cod JavaScript
< scenariu >
funcţie displayParent ( ) {
a fost obține = document. querySelector ( '.element' ) ;
a fost acest = obține . Opțiuni [ obține . selectatIndex ] ;
a fost adăuga = document. querySelector ( '.temp' ) ;
adăuga. innerHTML = 'Elementul părinte al elementului opțiunei este -> ' + acest. parentElement . nodeName ;
}
scenariu >Conform acestor linii de cod:
- Definiți funcția „displayParent()” care accesează elementul „
- „ Opțiuni ” colecția primește colecția tuturor elementelor „
- În cele din urmă, utilizați „document.querySelector()” metoda din nou pentru a accesa elementul „” și adăugați-l cu elementul părinte al elementului „
Întregul cod
< html >
< corp >
< h1 > Proprietatea parentElement în JavaScript < / h1 >
< h2 > Selectați limba: < / h2 >
< Selectați clasă = 'element' >
< opțiune > Piton < / opțiune >
< opțiune > Java < / opțiune >
< opțiune > JavaScript < / opțiune >
< / Selectați >
< buton onclick = „displayParent()” clasă = 'buton' > Afișați elementul părinte al elementului „opțiune”. < / buton >
< div clasă = 'temp' >< / div >< / corp >
< stil >
corp{
text-align:center;
culoare:#fff;
culoare de fundal: gri;
inaltime:100%;
}
.buton{
inaltime:2rem;
chenar-raza:2px;
latime:35%;
margin:2rem auto;
display:bloc;
culoare:#ba0b0b;
cursor:pointer;
}
.temp{
dimensiunea fontului: 1,5 rem;
greutate font: bold;
}
< / stil >
< scenariu >
funcția displayParent() {
var get = document.querySelector('.elem');
var sel=get.options[get.selectedIndex];
var append = document.querySelector('.temp');
append.innerHTML='Elementul părinte al opțiunii Element este -> ' + sel.parentElement.nodeName;
}
< / scenariu >Ieșire
Aici, se poate vedea că elementul părinte al tuturor nodurilor copil, adică opțiunea selectată din meniul drop-down din meniul „
Exemplul 2: Accesarea atât a elementelor părinte, cât și a copilului prin intermediul proprietăților „parentElement” și „children” din JavaScript
Următorul exemplu de cod accesează atât elementele părinte, cât și elementele secundare ale unui anumit element.
Cod HTML
< html >
< corp >
< div id = 'mamă' >
< div id = 'copil' >
< h1 >Primul element copil< / h1 >
< h1 >Al doilea element copil< / h1 >
< / div >
< / div >
< / corp >
< / html >În acest bloc de cod, creați două elemente „
” și cele două elemente „” care se referă la elementele copil ale ultimului element „
”.Cod JavaScript
< scenariu >
lăsa obține = document. getElementById ( 'copil' ) ;
lasa parintele = obține . parentElement ;
consolă. Buturuga ( „Element părinte -> „ , mamă. outerHTML ) ;
consolă. Buturuga ( „Numele nodului elementului părinte -> „ , mamă. nodeName ) ;
lasa copiii = obține . copii ;
pentru ( lasă-mă = 0 ; i < copii. lungime ; i ++ ) {
consolă. Buturuga ( `Element copil $ { i } : ` , copii [ i ] . outerHTML ) ;
}
pentru ( lasă-mă = 0 ; i < copii. lungime ; i ++ ) {
consolă. Buturuga ( `Numele nodului elementului secundar $ { i } : ` , copii [ i ] . nodeName ) ;
}
scenariu >Explicația codului de mai sus este următoarea:
- Accesați ultimul element „” prin „id” folosind „document.getElementById()” metoda și preia elementul său părinte prin intermediul „ parentElement ” proprietate.
- Acum, afișați elementul părinte cu atribute și etichetele de început și de sfârșit prin intermediul aplicației „ outerHTML ” proprietate.
- De asemenea, returnați numele elementului părinte, adică numele nodului folosind „ nodeName ” proprietate.
- După aceea, accesați copiii elementului utilizând proprietatea „copii”.
- Aplicați „ pentru ” buclă pentru a repeta toate elementele copil și a le returna cu etichetele prin proprietatea „outerHTML” discutată.
- De asemenea, utilizați din nou bucla „for” pentru a returna și numele nodurilor elementelor copil.
Întregul cod
< html >
< corp >
< div id = 'mamă' >
< div id = 'copil' >
< h1 > Primul element copil < / h1 >
< h1 > Al doilea element copil < / h1 >
< / div >
< / div >
< / corp >
< / html >
< scenariu >
let get = document.getElementById('copil');
let parent = get.parentElement;
console.log('Element părinte -> ', parent.outerHTML);
console.log('Numele nodului elementului părinte -> ', parent.nodeName);
lasa copiii = get.children;
pentru(fie i =0; i < copii.lungime; i++ ) {
console.log ( `Element copil $ { i } : `, copii [ i ] .outerHTML ) ;
}
pentru ( lasă-mă = 0 ; i < copii.lungime; i++ ) {
console.log ( `Child Element Node Nume $ { i } : `, copii [ i ] .nodeName ) ;
}
< / scenariu >Ieșire
Acest rezultat implică faptul că elementele părinte și copil ale elementului țintă sunt afișate în detaliu (împreună cu numele nodurilor) în consecință.
Exemplul 3: Accesarea elementului părinte folosind proprietatea „parentNode”.
În această demonstrație, elementul părinte al unui anumit element poate fi invocat și apoi elementul părinte al acestui element anume va fi, de asemenea, preluat, rezultând astfel un comportament imbricat. Acest lucru poate fi realizat prin intermediul „ parentNode ” proprietate în schimb care preia nodul părinte al elementului.
Cod HTML
< html >
< corp >
< div id = 'mamă' >
< ol id = 'temp' >
< acea id = 'copil templat' >Python< / acea >
< acea >Java< / acea >
< acea >JavaScript< / acea >
< / ol >
< / div > < / corp >
< / html >Aici, creați un element „
” care mai cuprinde elementele „- (listă ordonată)” și „
- (articole din listă)” având ID-urile date.
Cod JavaScript
< scenariu >
lăsa obține = document. getElementById ( 'tempchild' ) ;
lasa parintele = obține . parentNode ;
consolă. Buturuga ( „Nodul element părinte al lui „li”-> „ , mamă ) ;
lasa sa obtina2 = document. getElementById ( 'temp' ) ;
lasa parinte2 = obţine2. parentNode ;
consolă. Buturuga ( „Nodul element părinte al lui „ol”-> „ , părinte2 ) ;
scenariu >Pe baza acestui fragment de cod, efectuați pașii furnizați mai jos:
- Invocați elementul „
- ” prin intermediul „ getElementById() ”, accesați nodul elementului părinte folosind butonul „ parentNode ” și afișați nodul părinte.
- De asemenea, acum invocați nodul părinte afișat, adică „
- ”, repetând aceeași metodologie.
Întregul cod
< html >
< corp >
< div id = 'mamă' >
< ol id = 'temperatură' >
< acea id = 'copil templat' > Piton < / acea >
< acea > Java < / acea >
< acea > JavaScript < / acea >
< / ol >
< / div >
< scenariu >
let get = document.getElementById('tempchild');
let parent = get.parentNode;
console.log('Parent Element Nod of 'li'-> ', parent);
let get2 = document.getElementById('temp');
let parent2 = get2.parentNode;
console.log('Parent Element Nod of 'ol'-> ', parent2);
< / scenariu >
< / corp >
< / html >Ieșire
Acest rezultat înseamnă că nodurile părinte în ambele cazuri sunt afișate în mod corespunzător.
Concluzie
Elementul părinte poate fi accesat utilizând HTML DOM „ parentElement ” proprietate combinată cu ” nodeName ” sau preluarea nodului părinte prin proprietatea “parentNode”. Cu toate acestea, pentru a accesa elementul copil, folosiți „ copil ” proprietate.
- Accesați ultimul element „