Šajā apmācībā tiks parādītas dažādas metodes DOM elementu atlasei JavaScript.
Kādi ir dažādi veidi, kā atlasīt DOM elementus JavaScript?
Izmantojiet šādas metodes, lai atlasītu DOM elementus JavaScript:
- getElementById() metode
- getElementsByClassName() metode
- getElementsByTagName() metode
- querySelector() metode
- querySelectorAll() metode
1. metode: atlasiet DOM elementus, izmantojot metodi “getElementById()”.
Lai atlasītu DOM elementus, izmantojiet ' getElementById() ” metode, kuras pamatā ir elementam piešķirtais ID. Šī metode atlasa vienu elementu pēc tā unikālā ' id ” atribūts. Tas sniedz atsauci uz elementu ar norādīto ID un atgriež ' null ” ja nav atrasts neviens atbilstošs elements.
Sintakse
Izmantojiet tālāk norādīto sintaksi getElementById() metodei:
dokumentu. getElementById ( 'idName' )
Šeit “ idName ” ir elementam piešķirtā id atribūta nosaukums.
Piemērs
HTML failā div elementā izveidojiet divus virsrakstus, izmantojot ' h4 ” tagu. Piešķiriet ID div elementam un virsrakstu “h4” elementiem ar nosaukumu “ div ' un ' virsraksts ”, attiecīgi. Pievienojiet stila atribūtu div elementam, lai līdzinātu to centrā. Piešķiriet arī klasi ' sadaļā ” uz otro virsrakstu, kas maina krāsu:
< div id = 'div' stils = 'text-align:center;' >< h4 id = 'virsraksts' > Piekļūstiet DOM elementiem, izmantojot dažādas metodes < / h4 >
< h4 klasē = 'sadaļa' id = 'virsraksts' > Programmā JavaScript atlasiet DOM elementus, izmantojot metodi getElementById()
< / h4 >
< / div >
Tagad mēs iegūsim ' div ” elementu, izmantojot tam piešķirto ID, izmantojot “ getElementById() ” metode:
bija getById = dokumentu. getElementById ( 'div' ) ;Drukājiet elementu pret ID ' div ” konsolē:
konsole. žurnāls ( getById ) ;Redzams, ka nepieciešamais HTML elements ir veiksmīgi izgūts:
2. metode: atlasiet DOM elementus, izmantojot metodi “getElementsByClassName()”
Varat arī atlasīt DOM elementu, izmantojot tam piešķirto klasi, izmantojot “ getElementsByClassName() ” metode. Tas atlasa elementu sarakstu pēc to klases nosaukuma. Tas izvada dzīvu HTMLCollection objektu, masīvam līdzīgu objektu, kas satur visus elementus ar norādīto klases nosaukumu.
Sintakse
Metodei “getElementsByClassName()” tiek izmantota šāda sintakse:
dokumentu. getElementsByClassName ( 'klases nosaukums' )Piemērs
Šeit mēs iegūsim elementu, kas satur klasi ' sadaļā ” un drukāt uz konsoles:
bija getByClass = dokumentu. getElementsByClassName ( 'sadaļa' ) ;konsole. žurnāls ( getByClass ) ;
Kā redzat izvadē, tika atgriezts masīvs ar garumu 1, kas satur elementu ' h4 'kas pieder klasei' sadaļā ”:
3. metode: atlasiet DOM elementus, izmantojot metodi “getElementsByTagName()”
Ja elementam nav piešķirts ID vai klase, izmantojiet ' getElementsByTagName() ” metodi, lai iegūtu elementu pēc tā taga nosaukuma. Tas arī atgriež dzīvu HTMLCollection objektu, kas ir masīvam līdzīgs objekts, kas satur visus elementus, kuriem ir norādītais taga nosaukums.
Sintakse
Ievērojiet norādīto sintaksi, lai atlasītu elementus, pamatojoties uz taga nosaukumu:
getElementsByTagName ( tagName )Piemērs
Izsauciet metodi “getElementsByTagName()”, nododot taga nosaukumu “ h4 ”. Pēc tam izdrukājiet to elementu sarakstu, kas atbilst norādītajam taga nosaukumam konsolē:
bija getByTag = dokumentu. getElementsByTagName ( 'h4' ) ;konsole. žurnāls ( getByTag ) ;
Izvade
4. metode: atlasiet DOM elementus, izmantojot metodi “querySelector()”.
Izmantojiet ' querySelector() ” metodi, lai iegūtu DOM elementu. Tas atlasa vienu elementu, kas atbilst norādītajam CSS atlasītājam. Tas atgriež pirmo dokumentā atrasto atbilstošo elementu. Ja neviens elements nav saskaņots, tas dod ' null ”.
Sintakse
Metodei “querySelector()” tiek izmantota tālāk minētā sintakse:
dokumentu. querySelector ( atribūts )Šeit atribūts ir CSS atlasītājs, piemēram, ID vai klase kā “ #mansId '' .mana klase “.
Piemērs
Izsauciet metodi “querySelector()” un nododiet ID “ #virsraksts ”, lai iegūtu elementus, kas satur vienu un to pašu ID:
bija getByquery = dokumentu. querySelector ( '#virsraksts' ) ;konsole. žurnāls ( getByquery ) ;
Tas dod pirmo saskaņoto elementu kā izvadi:
5. metode: atlasiet DOM elementus, izmantojot metodi “querySelectorAll()”.
Ja vēlaties atlasīt visus elementus, kas satur norādīto atribūtu (id vai klasi), izmantojiet ' querySelectorAll() ” metode. Tas atlasa to elementu sarakstu, kas atbilst noteiktam definētajam CSS atlasītājam. Tas dod NodeList objektu, kurā ir visi dokumenta elementi, kas atbilst konkrētajam CSS atlasītājam.
Sintakse
Izmantojiet šādu sintaksi, lai iegūtu elementu sarakstu:
dokumentu. querySelectorAll ( atribūts )Piemērs
Lai iegūtu atbilstošā elementa sarakstu, kurā ir ID ' virsraksts ' Ar ' querySelectorAll() ” metodi un drukāt uz elementiem konsolē:
bija getByqueryAll = dokumentu. querySelectorAll ( '#virsraksts' ) ;konsole. žurnāls ( getByqueryAll ) ;
Izvade
Tas viss attiecas uz DOM elementu atlasi JavaScript.
Secinājums
Lai izvēlētos DOM elementus JavaScript, izmantojiet ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', vai ' querySelectorAll() ” metode. Šīs metodes nodrošina dažādus veidus, kā atlasīt elementus no DOM, pamatojoties uz to unikālajiem identifikatoriem, klašu nosaukumiem, tagu nosaukumiem vai CSS atlasītājiem. Šajā apmācībā tika parādītas dažādas metodes DOM elementu atlasei JavaScript.