Šioje pamokoje bus aprašyta DOM elemento radimo procedūra pagal bet kurią atributo reikšmę.
Kaip rasti / gauti elementą DOM, remiantis atributo verte?
Norėdami rasti elementą DOM pagal atributo reikšmę, naudokite „ querySelector() “ metodas. Pateikiamas pirmasis dokumente rastas elementas, atitinkantis nurodytą CSS parinkiklio reikšmę.
Pastaba : norėdami gauti visus elementus, atitinkančius nurodytą parinkiklio reikšmę, naudokite „ querySelectorAll() “ metodas.
Sintaksė
Norėdami naudoti „querySelector()“ metodą, naudokite šią sintaksę:
dokumentas. querySelector ( parinkiklis ) ;
Čia parinkiklis bus ID arba klasė kaip „ #id “, „ .klasė “:
Taip pat galite naudoti nurodytą sintaksę elementui rasti pagal atributo vertę:
dokumentas. querySelector ( '[selector='value']' ) ;
Aukščiau pateiktoje sintaksėje „ parinkiklis ' bus ' id “ arba „ klasė ', arba ' vertė ' bus ' idName “ arba „ klasės pavadinimas “.
Pavyzdys
HTML faile sukurkite elementą div, kuriame yra antraštė naudojant elementą h4, paprastas tekstas naudojant žymą ir div, skirtas pranešimui su priskirtu ID ' žinutę “:
< dal id = 'div' stilius = 'text-align:center;' >< h4 klasė = 'sek' id = 'Antraštė' > Raskite an Elementas in DOM Remiantis an Atributas Vertė h4 >
< span id = 'Sveiki' > Sveiki atvykę į Linuxhint tarpas >
< dal id = 'žinutė' >
< p id = 'žinutė' > Sveiki bičiuliai ! Sveiki atvykę į „Linuxhint JavaScript“ mokymo programas p >
div >
div >
Puslapis atrodys taip:
Dabar gausime elementą, kuriame ID ' žinutę “ yra priskirtas naudojant „ querySelector() “ metodas:
kiekvienas elementas = dokumentas. querySelector ( '#pranešimas' )Galiausiai atspausdinkite elementą konsolėje:
konsolė. žurnalas ( elementas ) ;Išvestyje „ div ' elementas rodomas su jam priskirtu ID ' žinutę “, kuris rodo, kad reikalingas elementas buvo sėkmingai nuskaitytas:
Taip pat galite gauti elementą naudodami nurodytą sintaksę. Čia mes gausime elementą, kurio ID yra ' žinutė “:
kiekvienas elementas = dokumentas. querySelector ( '[id='žinutė']' ) ;Išvestis
Dabar atnaujinkite jo spalvą naudodami „ stilius ' nuosavybė:
elementas. stilius . spalva = 'mėlyna' ;Kaip matote, tekstas buvo „ žalias “ spalva, o dabar ji buvo atnaujinta į “ mėlyna “:
Tai viskas apie elemento radimą DOM pagal atributo vertę.
Išvada
Norėdami rasti elementą DOM pagal atributo reikšmę, naudokite „ querySelector() “ metodas, suteikiantis pirmąjį dokumento elementą, atitinkantį nurodytą CSS parinkiklio reikšmę. Be to, norėdami gauti visus elementus, atitinkančius nurodytą parinkiklio reikšmę, naudokite „ querySelectorAll() “ metodas. Šioje pamokoje aprašyta DOM elemento radimo procedūra pagal bet kurią atributo reikšmę.