Denna handledning kommer att visa de olika metoderna för att välja DOM-element i JavaScript.
Vilka är de olika sätten att välja DOM-element i JavaScript?
Använd följande metoder för att välja DOM-element i JavaScript:
- getElementById() metod
- getElementsByClassName() metod
- getElementsByTagName() metod
- querySelector() metod
- querySelectorAll() metod
Metod 1: Välj DOM-element med metoden 'getElementById()'.
För att välja DOM-element använd ' getElementById() ”-metod baserad på elementets tilldelade id. Denna metod väljer ett enstaka element genom dess unika ' id ' attribut. Det ger en referens till elementet med det angivna id och returnerar ' null ” om inget matchande element hittas.
Syntax
Använd nedanstående syntax för metoden getElementById():
dokumentera. getElementById ( 'idName' )
Här, ' idName ” är namnet på ett id-attribut som tilldelats ett element.
Exempel
I en HTML-fil skapar du två rubriker i ett div-element med hjälp av ' h4 '-tagg. Tilldela id till div-elementet och rubrikerna 'h4'-element med namnet ' div ' och ' rubrik ”, respektive. Lägg till stilattributet till div-elementet för att justera det i mitten. Tilldela också en klass ' sektion ” till den andra rubriken som ändrar färg:
< div id = 'div' stil = 'text-align:center;' >< h4 id = 'rubrik' > Få åtkomst till DOM-element med hjälp av olika metoder < / h4 >
< h4 klass = 'sektion' id = 'rubrik' > Välj DOM-element i JavaScript med 'getElementById()'-metoden
< / h4 >
< / div >
Nu ska vi få ' div ' element som använder sitt tilldelade id med hjälp av ' getElementById() ' metod:
var getById = dokumentera. getElementById ( 'div' ) ;Skriv ut elementet mot id ' div ” på konsolen:
trösta. logga ( getById ) ;Det kan ses att det nödvändiga HTML-elementet har hämtats:
Metod 2: Välj DOM-element med metoden 'getElementsByClassName()'.
Du kan också välja DOM-elementet med dess tilldelade klass med hjälp av ' getElementsByClassName() 'metoden. Den väljer en lista med element efter deras klassnamn. Den matar ut ett levande HTMLCollection-objekt, ett arrayliknande objekt som innehåller alla element med det angivna klassnamnet.
Syntax
Följande syntax används för metoden 'getElementsByClassName()':
dokumentera. getElementsByClassName ( 'klassnamn' )Exempel
Här kommer vi att få elementet som innehåller klassen ' sektion ” och skriv ut på konsolen:
var getByClass = dokumentera. getElementsByClassName ( 'sektion' ) ;trösta. logga ( getByClass ) ;
Som du kan se i utdata returnerade en array med längd 1 som innehåller ett element ' h4 ' vem som tillhör klassen ' sektion ”:
Metod 3: Välj DOM-element med metoden 'getElementsByTagName()'.
Om det inte finns något id eller klass tilldelad till ett element, använd ' getElementsByTagName() ”-metoden för att få elementet efter deras taggnamn. Den returnerar också ett levande HTMLCollection-objekt, som är ett arrayliknande objekt som innehåller alla element som har det angivna taggnamnet.
Syntax
Följ den givna syntaxen för att välja element baserat på taggnamn:
getElementsByTagName ( taggnamn )Exempel
Anropa metoden 'getElementsByTagName()' genom att skicka taggnamnet ' h4 ”. Skriv sedan ut listan med element som matchar det angivna taggnamnet på konsolen:
var getByTag = dokumentera. getElementsByTagName ( 'h4' ) ;trösta. logga ( getByTag ) ;
Produktion
Metod 4: Välj DOM-element med metoden 'querySelector()'.
Använd ' querySelector() ” metod för att hämta DOM-elementet. Den väljer ett enskilt element som matchar en specificerad CSS-väljare. Det returnerar det första matchande elementet som finns i dokumentet. Om inget element matchas ger det ' null ”.
Syntax
Den nedan nämnda syntaxen används för metoden 'querySelector()':
dokumentera. querySelector ( attribut )Här är attributet en CSS-väljare, till exempel ett id eller en klass som ' #mitt ID ” “ .min klass '.
Exempel
Anropa metoden 'querySelector()' och skicka id:t ' #rubrik ' för att få de element som innehåller samma id:
var getByquery = dokumentera. querySelector ( '#rubrik' ) ;trösta. logga ( getByquery ) ;
Det ger det första matchade elementet som en utdata:
Metod 5: Välj DOM-element med metoden 'querySelectorAll()'.
Om du vill välja alla element som innehåller det angivna attributet (id eller klass), använd ' querySelectorAll() 'metoden. Den väljer en lista med element som matchar en viss definierad CSS-väljare. Det ger ett NodeList-objekt som innehåller alla element i dokumentet som matchade den specifika CSS-väljaren.
Syntax
Använd följande syntax för att få listan med element:
dokumentera. querySelectorAll ( attribut )Exempel
För att få listan över det matchade elementet som innehåller id ' rubrik ' med ' querySelectorAll() ” metod och skriv ut på element på konsolen:
var getByqueryAll = dokumentera. querySelectorAll ( '#rubrik' ) ;trösta. logga ( getByqueryAll ) ;
Produktion
Det handlar om att välja DOM-element i JavaScript.
Slutsats
För att välja DOM-element i JavaScript, använd ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', eller den ' querySelectorAll() 'metoden. Dessa metoder ger olika sätt att välja element från DOM baserat på deras unika identifierare, klassnamn, taggnamn eller CSS-väljare. Denna handledning demonstrerade de olika metoderna för att välja DOM-element i JavaScript.