Denne tutorial vil demonstrere de forskellige metoder til at vælge DOM-elementer i JavaScript.
Hvad er de forskellige måder at vælge DOM-elementer på i JavaScript?
Brug følgende metoder til at vælge DOM-elementer i JavaScript:
- getElementById() metode
- getElementsByClassName() metode
- getElementsByTagName() metode
- querySelector() metode
- querySelectorAll() metode
Metode 1: Vælg DOM-elementer ved hjælp af 'getElementById()'-metoden
For at vælge DOM-elementer, brug ' getElementById() ” metode baseret på elementets tildelte id. Denne metode vælger et enkelt element ved dets unikke ' id ' attribut. Det giver en reference til elementet med det angivne id og returnerer ' nul ” hvis der ikke findes noget matchende element.
Syntaks
Brug nedenstående syntaks til getElementById() metoden:
dokument. getElementById ( 'idName' )
Her er ' idNavn ” er navnet på en id-attribut, der er tildelt et element.
Eksempel
I en HTML-fil skal du oprette to overskrifter i et div-element ved hjælp af ' h4 ” tag. Tildel id'er til div-elementet og overskrifterne 'h4'-elementer med navnet ' div ' og ' overskrift ', henholdsvis. Tilføj stilattributten til div-elementet for at justere det i midten. Tildel også en klasse ' afsnit ” til den anden overskrift, der skifter farve:
< div id = 'div' stil = 'text-align:center;' >< h4 id = 'overskrift' > Få adgang til DOM-elementer ved hjælp af forskellige metoder < / h4 >
< h4 klasse = 'afsnit' id = 'overskrift' > Vælg DOM-elementer i JavaScript ved hjælp af 'getElementById()'-metoden
< / h4 >
< / div >
Nu får vi ' div ' element ved hjælp af dets tildelte id ved hjælp af ' getElementById() ” metode:
var getById = dokument. getElementById ( 'div' ) ;Udskriv elementet mod id ' div ' på konsollen:
konsol. log ( getById ) ;Det kan ses, at det nødvendige HTML-element er blevet hentet med succes:
Metode 2: Vælg DOM-elementer ved hjælp af metoden 'getElementsByClassName()'.
Du kan også vælge DOM-elementet ved hjælp af dets tildelte klasse ved hjælp af ' getElementsByClassName() ” metode. Den vælger en liste over elementer efter deres klassenavn. Det udsender et levende HTMLCollection-objekt, et array-lignende objekt, der indeholder alle elementerne med det angivne klassenavn.
Syntaks
Følgende syntaks bruges til metoden 'getElementsByClassName()':
dokument. getElementsByClassName ( 'klassenavn' )Eksempel
Her får vi det element, der indeholder klassen ' afsnit ” og print på konsollen:
var getByClass = dokument. getElementsByClassName ( 'afsnit' ) ;konsol. log ( getByClass ) ;
Som du kan se i outputtet, returnerede en matrix med længde 1, som indeholder et element ' h4 'hvem tilhører klassen' afsnit ”:
Metode 3: Vælg DOM-elementer ved hjælp af metoden 'getElementsByTagName()'.
Hvis der ikke er tildelt et id eller en klasse til et element, skal du bruge ' getElementsByTagName() ” metode til at få elementet efter deres tagnavn. Det returnerer også et levende HTMLCollection-objekt, som er et array-lignende objekt, der indeholder alle de elementer, der har det angivne tagnavn.
Syntaks
Følg den givne syntaks for at vælge elementer baseret på tagnavn:
getElementsByTagName ( tagnavn )Eksempel
Kald 'getElementsByTagName()' metoden ved at sende tagnavnet ' h4 ”. Udskriv derefter listen over elementer, der matcher det angivne tagnavn på konsollen:
var getByTag = dokument. getElementsByTagName ( 'h4' ) ;konsol. log ( getByTag ) ;
Produktion
Metode 4: Vælg DOM-elementer ved hjælp af metoden 'querySelector()'.
Brug ' querySelector() ” metode til at hente DOM-elementet. Den vælger et enkelt element, der matcher en specificeret CSS-vælger. Det returnerer det første matchende element fundet i dokumentet. Hvis intet element matches, giver det ' nul ”.
Syntaks
Nedenstående syntaks bruges til 'querySelector()'-metoden:
dokument. querySelector ( attribut )Her er attributten en CSS-vælger, såsom et id eller en klasse som ' #mit ID ' ' .min klasse “.
Eksempel
Kald metoden 'querySelector()' og send id'et ' #overskrift ' for at få de elementer, der indeholder det samme id:
var getByquery = dokument. querySelector ( '#overskrift' ) ;konsol. log ( getByquery ) ;
Det giver det første matchede element som et output:
Metode 5: Vælg DOM-elementer ved hjælp af metoden 'querySelectorAll()'.
Hvis du vil vælge alle de elementer, der indeholder den angivne attribut (id eller klasse), skal du bruge ' querySelectorAll() ” metode. Den vælger en liste over elementer, der matcher en bestemt defineret CSS-vælger. Det giver et NodeList-objekt, der indeholder alle de elementer i dokumentet, der matchede den bestemte CSS-vælger.
Syntaks
Brug følgende syntaks til at få listen over elementer:
dokument. querySelectorAll ( attribut )Eksempel
For at få listen over det matchede element, der indeholder id'et ' overskrift ' med ' querySelectorAll() ” metode og print på elementer på konsollen:
var getByqueryAll = dokument. querySelectorAll ( '#overskrift' ) ;konsol. log ( getByqueryAll ) ;
Produktion
Det handler om at vælge DOM-elementer i JavaScript.
Konklusion
For at vælge DOM-elementerne i JavaScript skal du bruge ' getElementById() ', ' getElementsByClassName() ', ' getElementsByTagName() ', ' querySelector() ', eller den ' querySelectorAll() ” metode. Disse metoder giver forskellige måder at vælge elementer fra DOM på baseret på deres unikke identifikatorer, klassenavne, tagnavne eller CSS-vælgere. Denne vejledning demonstrerede de forskellige metoder til at vælge DOM-elementer i JavaScript.