Šajā apmācībā tiks aprakstīta procedūra DOM elementa atrašanai, pamatojoties uz jebkuru atribūta vērtību.
Kā atrast/izgūt elementu DOM, pamatojoties uz atribūta vērtību?
Lai atrastu elementu DOM, pamatojoties uz atribūta vērtību, izmantojiet ' querySelector() ” metode. Tas dod pirmo dokumentā atrasto elementu, kas atbilst norādītajai CSS atlasītāja vērtībai.
Piezīme : lai iegūtu visus elementus, kas atbilst norādītajai atlasītāja vērtībai, izmantojiet ' querySelectorAll() ” metode.
Sintakse
Lai izmantotu metodi “querySelector()”, izmantojiet šādu sintaksi:
dokumentu. querySelector ( atlasītājs ) ;
Šeit atlasītājs būs ID vai klase kā “ #id ”, “ .klase ”:
Varat arī izmantot norādīto sintaksi, lai atrastu elementu, pamatojoties uz atribūta vērtību:
dokumentu. querySelector ( '[selector='value']' ) ;
Iepriekš minētajā sintaksē ' atlasītājs ' būs ' id ” vai “ klasē ', vai ' vērtību ' būs ' idName ” vai “ klasesNosaukums ”.
Piemērs
HTML failā izveidojiet div elementu, kas satur virsrakstu, izmantojot elementu h4, vienkāršu tekstu, izmantojot tagu , un div ziņojumu ziņojumam ar piešķirtu ID ' ziņa ”:
< div id = 'div' stils = 'text-align:center;' >< h4 klasē = 'sek' id = 'virsraksts' > Atrodi an Elements in DOM Pamatojoties uz an Atribūts Vērtība h4 >
< span id = 'sveicināti' > Laipni lūdzam Linuxhint span >
< div id = 'ziņa' >
< p id = 'ziņa' > Sveiki puiši ! Laipni lūdzam Linuxhint JavaScript apmācībās lpp >
div >
div >
Lapa izskatīsies šādi:
Tagad mēs iegūsim elementu, kurā ID ' ziņa ” tiek piešķirts, izmantojot querySelector() ” metode:
katrs elements = dokumentu. querySelector ( '#ziņa' )Visbeidzot izdrukājiet elementu konsolē:
konsole. žurnāls ( elements ) ;Izvadē “ div 'elements tiek parādīts ar tam piešķirto ID' ziņa ”, kas norāda, ka nepieciešamais elements ir veiksmīgi izgūts:
Varat arī iegūt elementu, izmantojot norādīto sintaksi. Šeit mēs iegūsim elementu, kura ID ir ' ziņa ”:
katrs elements = dokumentu. querySelector ( '[id='ziņa']' ) ;Izvade
Tagad atjauniniet tā krāsu, izmantojot ' stils ” īpašums:
elements. stils . krāsa = 'zils' ;Kā redzat, teksts bija ' zaļš ” krāsu, un tagad tā ir atjaunināta uz “ zils ”:
Tas viss attiecas uz elementa atrašanu DOM, pamatojoties uz atribūta vērtību.
Secinājums
Lai atrastu elementu DOM, pamatojoties uz atribūta vērtību, izmantojiet ' querySelector() ” metode, kas dod pirmo elementu dokumentā, kas atbilst norādītajai CSS atlasītāja vērtībai. Turklāt, lai iegūtu visus elementus, kas atbilst norādītajai atlasītāja vērtībai, izmantojiet ' querySelectorAll() ” metode. Šajā apmācībā tika aprakstīta procedūra DOM elementa atrašanai, pamatojoties uz jebkuru atribūta vērtību.