Šioje pamokoje bus parodyti įvairūs DOM elementų pasirinkimo JavaScript programoje metodai.
Kokie yra skirtingi „JavaScript“ DOM elementų pasirinkimo būdai?
Norėdami pasirinkti „JavaScript“ DOM elementus, naudokite šiuos metodus:
- getElementById() metodas
- getElementsByClassName() metodas
- getElementsByTagName() metodas
- querySelector() metodas
- querySelectorAll() metodas
1 būdas: pasirinkite DOM elementus naudodami „getElementById()“ metodą
Norėdami pasirinkti DOM elementus, naudokite „ getElementById() “ metodas, pagrįstas elementui priskirtu ID. Šis metodas parenka vieną elementą pagal jo unikalų ' id “ atributas. Tai suteikia nuorodą į elementą su nurodytu ID ir grąžina ' nulinis “, jei nerastas atitinkantis elementas.
Sintaksė
Naudokite toliau pateiktą getElementById() metodo sintaksę:
dokumentas. getElementById ( 'idName' )
Čia „ idName “ yra elementui priskirto id atributo pavadinimas.
Pavyzdys
HTML faile sukurkite dvi antraštes div elemente naudodami „ h4 “ žymą. Priskirkite ID div elementui ir antraštėms „h4“ elementus, pavadintus „ div “ ir „ Antraštė “, atitinkamai. Pridėkite stiliaus atributą prie div elemento, kad sulygiuotumėte jį centre. Taip pat priskirkite klasę ' skyrius “ į antrą antraštę, kuri keičia spalvą:
< div id = 'div' stilius = 'text-align:center;' >< h4 id = 'Antraštė' > Pasiekite DOM elementus naudodami skirtingus metodus < / h4 >
< h4 klasė = 'skyrius' id = 'Antraštė' > Pasirinkite DOM elementus „JavaScript“ naudodami „getElementById()“ metodą
< / h4 >
< / div >
Dabar mes gausime „ div “ elementą, naudodami jam priskirtą ID, naudodami „ getElementById() “ metodas:
buvo getById = dokumentas. getElementById ( 'div' ) ;Spausdinkite elementą prieš ID ' div “ konsolėje:
konsolė. žurnalas ( getById ) ;Matyti, kad reikalingas HTML elementas buvo sėkmingai nuskaitytas:
2 būdas: pasirinkite DOM elementus naudodami metodą „getElementsByClassName()“
Taip pat galite pasirinkti DOM elementą naudodami jam priskirtą klasę naudodami „ getElementsByClassName() “ metodas. Jis pasirenka elementų sąrašą pagal jų klasės pavadinimą. Jis išveda tiesioginį HTMLCollection objektą, į masyvą panašų objektą, kuriame yra visi elementai su nurodytu klasės pavadinimu.
Sintaksė
Metodui „getElementsByClassName()“ naudojama ši sintaksė:
dokumentas. getElementsByClassName ( 'klasės pavadinimas' )Pavyzdys
Čia mes gausime elementą, kuriame yra klasė ' skyrius “ ir atsispausdinti konsolėje:
buvo getByClass = dokumentas. getElementsByClassName ( 'skyrius' ) ;konsolė. žurnalas ( getByClass ) ;
Kaip matote išvestyje, grąžintas 1 ilgio masyvas, kuriame yra elementas ' h4 'kas priklauso klasei' skyrius “:
3 būdas: pasirinkite DOM elementus naudodami metodą „getElementsByTagName()“
Jei elementui nėra priskirtas ID ar klasė, naudokite „ getElementsByTagName() “ metodas gauti elementą pagal jų žymos pavadinimą. Jis taip pat grąžina tiesioginį HTMLCollection objektą, kuris yra į masyvą panašus objektas, kuriame yra visi elementai, turintys nurodytą žymos pavadinimą.
Sintaksė
Vykdykite nurodytą sintaksę, kad pasirinktumėte elementus pagal žymos pavadinimą:
getElementsByTagName ( žymos pavadinimas )Pavyzdys
Iškvieskite metodą „getElementsByTagName()“ perduodant žymos pavadinimą „ h4 “. Tada atspausdinkite elementų, atitinkančių nurodytą žymos pavadinimą konsolėje, sąrašą:
buvo getByTag = dokumentas. getElementsByTagName ( 'h4' ) ;konsolė. žurnalas ( getByTag ) ;
Išvestis
4 būdas: pasirinkite DOM elementus naudodami „querySelector()“ metodą
Naudoti ' querySelector() “ būdas gauti DOM elementą. Jis pasirenka vieną elementą, atitinkantį nurodytą CSS parinkiklį. Jis grąžina pirmąjį dokumente rastą atitinkantį elementą. Jei nesutampa nė vienas elementas, jis pateikia „ nulinis “.
Sintaksė
Toliau nurodyta sintaksė naudojama „querySelector()“ metodui:
dokumentas. querySelector ( atributas )Čia atributas yra CSS parinkiklis, pvz., ID arba klasė kaip ' #manoId “ “ .Mano klasė “.
Pavyzdys
Iškvieskite metodą „querySelector()“ ir perduokite ID „ #Antraštė “, kad gautumėte elementus, kuriuose yra tas pats ID:
buvo getByquery = dokumentas. querySelector ( '#Antraštė' ) ;konsolė. žurnalas ( getByquery ) ;
Jis pateikia pirmąjį suderintą elementą kaip išvestį:
5 būdas: pasirinkite DOM elementus naudodami „querySelectorAll()“ metodą
Jei norite pasirinkti visus elementus, kuriuose yra nurodytas atributas (id arba klasė), naudokite „ querySelectorAll() “ metodas. Jis pasirenka elementų, atitinkančių konkretų apibrėžtą CSS parinkiklį, sąrašą. Tai suteikia NodeList objektą, kuriame yra visi dokumento elementai, kurie atitiko konkretų CSS parinkiklį.
Sintaksė
Norėdami gauti elementų sąrašą, naudokite šią sintaksę:
dokumentas. querySelectorAll ( atributas )Pavyzdys
Norėdami gauti atitikusio elemento, kuriame yra ID, sąrašą ' Antraštė ' su ' querySelectorAll() “ metodą ir spausdinti ant elementų konsolėje:
buvo getByqueryAll = dokumentas. querySelectorAll ( '#Antraštė' ) ;konsolė. žurnalas ( getByqueryAll ) ;
Išvestis
Tai viskas apie DOM elementų pasirinkimą „JavaScript“.
Išvada
Norėdami pasirinkti DOM elementus „JavaScript“, naudokite „ getElementById() “, „ getElementsByClassName() “, „ getElementsByTagName() “, „ querySelector() ', arba ' querySelectorAll() “ metodas. Šie metodai suteikia skirtingus būdus, kaip pasirinkti elementus iš DOM, atsižvelgiant į jų unikalius identifikatorius, klasių pavadinimus, žymų pavadinimus arba CSS parinkiklius. Šioje pamokoje buvo parodyti įvairūs DOM elementų pasirinkimo JavaScript programoje metodai.