Ilalarawan ng tutorial na ito ang pamamaraan para sa paghahanap ng elemento ng DOM batay sa anumang value ng attribute.
Paano Maghanap/Kunin ang isang Elemento sa DOM Batay sa isang Halaga ng Katangian?
Upang mahanap ang elemento sa DOM batay sa isang attribute value, gamitin ang ' querySelector() ” paraan. Ibinibigay nito ang unang elementong makikita sa dokumentong tumutugma sa ibinigay na halaga ng tagapili ng CSS.
Tandaan : Para sa pagkuha ng lahat ng elementong tumutugma sa tinukoy na halaga ng selector, gamitin ang “ querySelectorAll() ” paraan.
Syntax
Para sa paggamit ng pamamaraang 'querySelector()', gamitin ang sumusunod na syntax:
dokumento. querySelector ( tagapili ) ;
Dito, ang selector ay magiging isang id o klase bilang “ #id ”, “ .klase ”:
Maaari mo ring gamitin ang ibinigay na syntax para sa paghahanap ng elemento batay sa halaga ng katangian:
dokumento. querySelector ( '[selector='value']' ) ;
Sa syntax sa itaas, ' tagapili ' magiging ' id 'o' klase ', o ang ' halaga ' magiging ' idName 'o' pangalan ng klase ”.
Halimbawa
Sa HTML file, gumawa ng div element na naglalaman ng heading gamit ang h4 element, plain text gamit ang tag, at div para sa mensaheng may nakatalagang id na ' mensahe ”:
< div id = 'div' istilo = 'text-align:center;' >< h4 klase = 'seg' id = 'heading' > Maghanap ng isang Elemento sa DOM Batay sa isang Katangian Halaga h4 >
< span id = 'maligayang pagdating' > Maligayang pagdating sa Linuxhint span >
< div id = 'mensahe' >
< p id = 'msg' > Hello Guys ! Maligayang pagdating sa Linuxhint JavaScript Tutorials p >
div >
div >
Ang pahina ay magiging ganito ang hitsura:
Ngayon, makukuha natin ang elemento kung saan ang id ' mensahe ' ay itinalaga gamit ang ' querySelector() 'paraan:
bawat elemento = dokumento. querySelector ( '#message' )Panghuli, i-print ang elemento sa console:
console. log ( elemento ) ;Sa output, ang ' div 'Ang elemento ay ipinapakita kasama ang nakatalagang id nito' mensahe ”, na nagpapahiwatig na ang kinakailangang elemento ay matagumpay na nakuha:
Maaari mo ring makuha ang elemento gamit ang ibinigay na syntax. Dito, makukuha natin ang elemento na ang id ay ' msg ”:
bawat elemento = dokumento. querySelector ( '[id='msg']' ) ;Output
Ngayon, i-update ang kulay nito gamit ang “ istilo ” ari-arian:
elemento. istilo . kulay = 'asul' ;Tulad ng nakikita mo, ang teksto ay nasa ' berde ” kulay, at ngayon ay na-update na ito sa “ asul ”:
Iyon lang ang tungkol sa paghahanap ng elemento sa isang DOM batay sa isang value ng attribute.
Konklusyon
Para sa paghahanap ng elemento sa DOM batay sa isang attribute value, gamitin ang ' querySelector() ” paraan na nagbibigay ng unang elemento sa dokumentong tumutugma sa tinukoy na halaga ng tagapili ng CSS. Bukod dito, para makuha ang lahat ng elementong tumutugma sa tinukoy na halaga ng selector, gamitin ang “ querySelectorAll() ” paraan. Inilarawan ng tutorial na ito ang pamamaraan para sa paghahanap ng elemento ng DOM batay sa anumang value ng attribute.