Denne opplæringen vil demonstrere de forskjellige metodene for å velge DOM-elementer i JavaScript.
Hva er de forskjellige måtene å velge DOM-elementer på i JavaScript?
Bruk følgende metoder for å velge DOM-elementer i JavaScript:
- getElementById()-metoden
- getElementsByClassName()-metoden
- getElementsByTagName()-metoden
- querySelector()-metoden
- querySelectorAll()-metoden
Metode 1: Velg DOM-elementer ved å bruke 'getElementById()'-metoden
For å velge DOM-elementer, bruk ' getElementById() ”-metode basert på elementets tildelte id. Denne metoden velger et enkelt element ved sin unike ' id ' Egenskap. Den gir en referanse til elementet med den spesifiserte id-en og returnerer ' null ' hvis ingen samsvarende element er funnet.
Syntaks
Bruk den nedenfor gitte syntaksen for getElementById()-metoden:
dokument. getElementById ( 'idName' )
Her er ' idName ” er navnet på et id-attributt som er tildelt et element.
Eksempel
I en HTML-fil oppretter du to overskrifter i et div-element ved å bruke ' h4 ' stikkord. Tildel IDer til div-elementet og overskriftene 'h4'-elementer kalt ' div ' og ' overskrift ', henholdsvis. Legg til stilattributtet til div-elementet for å justere det i midten. Tildel også en klasse ' seksjon ' til den andre overskriften som endrer farge:
< div id = 'div' stil = 'text-align:center;' >< h4 id = 'overskrift' > Få tilgang til DOM-elementer ved hjelp av forskjellige metoder < / h4 >
< h4 klasse = 'seksjon' id = 'overskrift' > Velg DOM-elementer i JavaScript ved å bruke 'getElementById()'-metoden
< / h4 >
< / div >
Nå vil vi få ' div element ved hjelp av den tildelte id-en ved hjelp av ' getElementById() ' metode:
var getById = dokument. getElementById ( 'div' ) ;Skriv ut elementet mot id ' div ' på konsollen:
konsoll. Logg ( getById ) ;Det kan sees at det nødvendige HTML-elementet har blitt hentet:
Metode 2: Velg DOM-elementer ved å bruke 'getElementsByClassName()'-metoden
Du kan også velge DOM-elementet ved å bruke den tildelte klassen ved hjelp av ' getElementsByClassName() 'metoden. Den velger en liste over elementer etter klassenavnet deres. Den sender ut et levende HTMLCollection-objekt, et array-lignende objekt som inneholder alle elementene med det angitte klassenavnet.
Syntaks
Følgende syntaks brukes for 'getElementsByClassName()'-metoden:
dokument. getElementsByClassName ( 'klassenavn' )Eksempel
Her vil vi få elementet som inneholder klassen ' seksjon ' og skriv ut på konsollen:
var getByClass = dokument. getElementsByClassName ( 'seksjon' ) ;konsoll. Logg ( getByClass ) ;
Som du kan se i utdataene, returnerte en matrise med lengde 1 som inneholder et element ' h4 'hvem tilhører klassen' seksjon ':
Metode 3: Velg DOM-elementer ved å bruke 'getElementsByTagName()'-metoden
Hvis det ikke er noen id eller klasse tilordnet til et element, bruk ' getElementsByTagName() ”-metoden for å få elementet etter tagnavnet. Den returnerer også et levende HTMLCollection-objekt, som er et array-lignende objekt som inneholder alle elementene som har det angitte tagnavnet.
Syntaks
Følg den gitte syntaksen for å velge elementer basert på tagnavn:
getElementsByTagName ( tagnavn )Eksempel
Påkall 'getElementsByTagName()'-metoden ved å sende kodenavnet ' h4 '. Skriv deretter ut listen over elementer som samsvarer med det angitte merkenavnet på konsollen:
var getByTag = dokument. getElementsByTagName ( 'h4' ) ;konsoll. Logg ( getByTag ) ;
Produksjon
Metode 4: Velg DOM-elementer ved å bruke 'querySelector()'-metoden
Bruke ' querySelector() '-metoden for å få DOM-elementet. Den velger et enkelt element som samsvarer med en spesifisert CSS-velger. Den returnerer det første samsvarende elementet funnet i dokumentet. Hvis ingen elementer samsvarer, gir det ' null '.
Syntaks
Den nedenfor nevnte syntaksen brukes for 'querySelector()'-metoden:
dokument. querySelector ( Egenskap )Her er attributtet en CSS-velger, for eksempel en id eller klasse som ' #mitt ID ' ' .klassen min '.
Eksempel
Kall opp 'querySelector()'-metoden og send id-en ' #overskrift ' for å få elementene som inneholder samme ID:
var getByquery = dokument. querySelector ( '#overskrift' ) ;konsoll. Logg ( getByquery ) ;
Det gir det første matchede elementet som en utgang:
Metode 5: Velg DOM-elementer ved å bruke 'querySelectorAll()'-metoden
Hvis du vil velge alle elementene som inneholder det spesifiserte attributtet (id eller klasse), bruk ' querySelectorAll() 'metoden. Den velger en liste over elementer som samsvarer med en bestemt definert CSS-velger. Det gir et NodeList-objekt som inneholder alle elementene i dokumentet som matchet den bestemte CSS-velgeren.
Syntaks
Bruk følgende syntaks for å få listen over elementer:
dokument. querySelectorAll ( Egenskap )Eksempel
For å få listen over det samsvarende elementet som inneholder id ' overskrift ' med ' querySelectorAll() ” metode og skriv ut på elementer på konsollen:
var getByqueryAll = dokument. querySelectorAll ( '#overskrift' ) ;konsoll. Logg ( getByqueryAll ) ;
Produksjon
Det handler om å velge DOM-elementer i JavaScript.
Konklusjon
For å velge DOM-elementene i JavaScript, bruk ' getElementById() ', ' getElementsByClassName() ', ' getElementsByTagName() ', ' querySelector() ', eller ' querySelectorAll() 'metoden. Disse metodene gir forskjellige måter å velge elementer fra DOM basert på deres unike identifikatorer, klassenavn, tagnavn eller CSS-velgere. Denne opplæringen demonstrerte de forskjellige metodene for å velge DOM-elementer i JavaScript.