Dažādās situācijās programmētājiem ir jāiegūst HTML elements pēc nosaukuma atribūta. Pieņemsim, ka izstrādātājs vēlas piekļūt veidlapas vadīklai, piemēram, radio pogai vai izvēles rūtiņai, lai nolasītu vai manipulētu ar tās vērtību. Konkrētāk, “ nosaukums ” atribūts tiek izmantots, lai grupētu saistītās veidlapas vadīklas, un vienu un to pašu nosaukumu var nodrošināt daudzām vadīklām, ļaujot tām piekļūt kā vienai grupai.
Šī ziņa ilustrēs metodes, kā JavaScript izgūt HTML elementu pēc nosaukuma.
Kā iegūt elementus pēc nosaukuma JavaScript?
Programmā JavaScript varat piekļūt HTML elementam, izmantojot tā nosaukuma atribūtu, izmantojot šādas iepriekš definētas JavaScript metodes:
-
- getElementsByName() metode
- querySelectorAll() metode
1. metode: iegūstiet elementu pēc nosaukuma, izmantojot metodi “getElementsByName()”
Lai iegūtu HTML elementu pēc nosaukuma, izmantojiet ' getElementsByName() ” metode. Šī metode nodrošina elementu kolekciju, kam ir norādītais nosaukuma atribūts.
Sintakse
Metodei getElementsByName() tiek izmantota šāda sintakse:
document.getElementsByName ( 'vārds' )
Piemērs
Pirmkārt, izveidojiet sešas pogas. Piecām no tām ir “ nosaukums 'atribūts, kas tiek izmantots, lai iegūtu HTML elementu' pogu ”. Pievienojiet onclick notikumu ar sesto pogu, kas izsauks ' pieteiktiesStyle() ” funkcija, lai pielāgotu piecu pogu stilu:
< pogu nosaukums = 'btn' > Poga pogu >< pogu nosaukums = 'btn' > Poga pogu >
< pogu nosaukums = 'btn' > Poga pogu >
< pogu nosaukums = 'btn' > Poga pogu >
< pogu nosaukums = 'btn' > Poga pogu > < br >< br >
< poga onclick = 'applyStyle()' > Noklikšķiniet šeit pogu >
Definējiet funkciju ' pieteiktiesStyle() ”, kas aktivizēs pogas klikšķi un mainīs visu pogu fona krāsu. Lai to izdarītu, vispirms iegūstiet visus pogu ” elementi kā grupa, izsaucot “ getElementsByName() ” metode:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadetzils' ;
} ) ;
}
Kā redzat izvadē, noklikšķinot uz pogas, piecu pogu fona krāsa tiks mainīta:
2. metode: iegūstiet elementu pēc nosaukuma, izmantojot metodi “querySelectorAll()”.
Varat arī izmantot ' querySelectorAll() ' metode elementu iegūšanai, izmantojot ' nosaukums ” atribūts JavaScript. Šo metodi izmanto, lai izgūtu visus dokumenta elementus, kas atbilst noteiktam atlasītājam/atribūtam, piemēram, CSS klasei, id vai nosaukumam.
Sintakse
Dotā sintakse tiek izmantota elementa iegūšanai pēc nosaukuma, izmantojot ' querySelectorAll()” metode:
document.querySelectorAll ( '[]' ) ;
Piemērs
Nākamajā piemērā mēs mainīsim tikai to pogu krāsu, kuru nosaukums ir “ btn1 ”:
< div >< pogas nosaukums = 'btn' > Poga pogu >
< pogas nosaukums = 'btn1' > Poga pogu >
< pogas nosaukums = 'btn' > Poga pogu >
< pogas nosaukums = 'btn1' > Poga pogu >
< pogas nosaukums = 'btn' > Poga pogu > < br >< br >
< poga onclick = 'applyStyle()' > Noklikšķiniet šeit pogu >
div >
Definētajā funkcijā mēs vispirms izsauksim piekļuvi visiem pogas elementiem, kuru nosaukums ir “ btn1 ” un pēc tam uzklājiet tai stilu:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'kadetzils' ;
} ) ;
}
Dotā izvade nozīmē, ka tikai divas pogas ir mainījušas fona krāsu, kuru nosaukums ir “btn1”:
Piezīme: Ja vēlaties iegūt vienu elementu, ir ieteicams izmantot document.querySelector, nevis document.querySelectorAll.
Secinājums
Lai iegūtu vai izgūtu elementu pēc nosaukuma, izmantojiet ' getElementsByName() ' vai ' querySelectorAll() ' metodes. Visbiežāk un efektīvāk izmantotā metode elementa iegūšanai pēc nosaukuma ir metode “getElementsByName()”. Šī ziņa ilustrē metodes, kā JavaScript izgūt HTML elementu pēc nosaukuma.