Tämä opetusohjelma esittelee erilaisia menetelmiä DOM-elementtien valitsemiseksi JavaScriptissä.
Mitä eri tapoja valita DOM-elementit JavaScriptissä?
Valitse DOM-elementit JavaScriptissä seuraavilla tavoilla:
- getElementById() -menetelmä
- getElementsByClassName() -menetelmä
- getElementsByTagName() -menetelmä
- querySelector()-metodi
- querySelectorAll()-metodi
Tapa 1: Valitse DOM-elementit käyttämällä 'getElementById()' -menetelmää
DOM-elementtien valitsemiseen käytä ' getElementById() ”-menetelmä, joka perustuu elementille määritettyyn tunnukseen. Tämä menetelmä valitsee yhden elementin sen ainutlaatuisen ' id ”-attribuutti. Se antaa viitteen elementtiin määritetyllä tunnuksella ja palauttaa ' tyhjä ', jos vastaavaa elementtiä ei löydy.
Syntaksi
Käytä alla annettua syntaksia getElementById()-menetelmälle:
asiakirja. getElementById ( 'idName' )
Täällä ' idName ” on elementille määritetyn id-attribuutin nimi.
Esimerkki
Luo HTML-tiedostossa kaksi otsikkoa div-elementtiin käyttämällä ' h4 ' -tunniste. Määritä tunnukset div-elementille ja otsikko 'h4' -elementeille nimeltä ' div ' ja ' otsikko ”, vastaavasti. Lisää Div-elementtiin style-attribuutti tasataksesi sen keskelle. Määritä myös luokka ' osio ” toiseen otsikkoon, joka muuttaa väriään:
< div id = 'div' tyyli = 'text-align:center;' >< h4 id = 'otsikko' > Käytä DOM-elementtejä eri menetelmillä < / h4 >
< h4 luokkaa = 'osasto' id = 'otsikko' > Valitse DOM-elementit JavaScriptissä käyttämällä getElementById()-menetelmää
< / h4 >
< / div >
Nyt saamme ' div '-elementti käyttämällä sille määritettyä tunnusta '' getElementById() 'menetelmä:
oli getById = asiakirja. getElementById ( 'div' ) ;Tulosta elementti tunnuksen mukaan ' div ' konsolissa:
konsoli. Hirsi ( getById ) ;Voidaan nähdä, että vaadittu HTML-elementti on haettu onnistuneesti:
Tapa 2: Valitse DOM-elementit käyttämällä 'getElementsByClassName()' -menetelmää
Voit myös valita DOM-elementin käyttämällä sille määritettyä luokkaa '' getElementsByClassName() ”menetelmä. Se valitsee luettelon elementeistä niiden luokan nimen mukaan. Se tulostaa elävän HTMLCollection-objektin, taulukon kaltaisen objektin, joka sisältää kaikki elementit määritetyllä luokan nimellä.
Syntaksi
Seuraavaa syntaksia käytetään 'getElementsByClassName()' -menetelmässä:
asiakirja. getElementsByClassName ( 'luokan nimi' )Esimerkki
Täältä saamme elementin, joka sisältää luokan ' osio ” ja tulosta konsoliin:
oli getByClass = asiakirja. getElementsByClassName ( 'osasto' ) ;konsoli. Hirsi ( getByClass ) ;
Kuten tulosteessa näkyy, palautti taulukon, jonka pituus oli 1, joka sisältää elementin ' h4 'joka kuuluu luokkaan' osio ':
Tapa 3: Valitse DOM-elementit käyttämällä 'getElementsByTagName()' -menetelmää
Jos elementille ei ole määritetty tunnusta tai luokkaa, käytä ' getElementsByTagName() ' -menetelmää saadakseen elementin tunnisteen nimen mukaan. Se palauttaa myös elävän HTMLCollection-objektin, joka on taulukkomainen objekti, joka sisältää kaikki elementit, joilla on määritetty tunnisteen nimi.
Syntaksi
Noudata annettua syntaksia valitaksesi elementtejä tunnisteen nimen perusteella:
getElementsByTagName ( merkin nimi )Esimerkki
Kutsu 'getElementsByTagName()' -menetelmä välittämällä tunnisteen nimi ' h4 ”. Tulosta sitten luettelo elementeistä, jotka vastaavat määritettyä tunnisteen nimeä konsolissa:
oli getByTag = asiakirja. getElementsByTagName ( 'h4' ) ;konsoli. Hirsi ( getByTag ) ;
Lähtö
Tapa 4: Valitse DOM-elementit käyttämällä “querySelector()”-menetelmää
Käytä ' querySelector() ' -menetelmää DOM-elementin saamiseksi. Se valitsee yksittäisen elementin, joka vastaa määritettyä CSS-valitsinta. Se palauttaa ensimmäisen asiakirjasta löytyneen vastaavan elementin. Jos mikään elementti ei täsmää, se antaa ' tyhjä ”.
Syntaksi
Alla mainittua syntaksia käytetään 'querySelector()'-menetelmässä:
asiakirja. querySelector ( attribuutti )Tässä attribuutti on CSS-valitsin, kuten tunnus tai luokka kuten ' #minun henkilötietoni ” ” .luokkani '.
Esimerkki
Kutsu 'querySelector()' -menetelmä ja anna tunnus ' #otsikko ' saadaksesi elementit, jotka sisältävät saman tunnuksen:
oli getByquery = asiakirja. querySelector ( '#otsikko' ) ;konsoli. Hirsi ( getByquery ) ;
Se antaa ensimmäisen vastaavan elementin ulostulona:
Tapa 5: Valitse DOM-elementit käyttämällä 'querySelectorAll()' -menetelmää
Jos haluat valita kaikki elementit, jotka sisältävät määritetyn attribuutin (id tai class), käytä ' querySelectorAll() ”menetelmä. Se valitsee luettelon elementeistä, jotka vastaavat tiettyä määritettyä CSS-valitsinta. Se antaa NodeList-objektin, joka sisältää kaikki asiakirjan elementit, jotka vastasivat tiettyä CSS-valitsinta.
Syntaksi
Käytä seuraavaa syntaksia saadaksesi elementtiluettelon:
asiakirja. querySelectorAll ( attribuutti )Esimerkki
Saadaksesi luettelon vastaavasta elementistä, joka sisältää tunnuksen ' otsikko ' kanssa ' querySelectorAll() ” -menetelmä ja tulosta konsolin elementteihin:
oli getByqueryAll = asiakirja. querySelectorAll ( '#otsikko' ) ;konsoli. Hirsi ( getByqueryAll ) ;
Lähtö
Siinä on kyse DOM-elementtien valitsemisesta JavaScriptissä.
Johtopäätös
Valitse DOM-elementit JavaScriptissä käyttämällä ' getElementById() ”, “ getElementsByClassName() ”, “ getElementsByTagName() ”, “ querySelector() ', tai ' querySelectorAll() ” menetelmällä. Nämä menetelmät tarjoavat erilaisia tapoja valita elementtejä DOM:sta niiden yksilöllisten tunnisteiden, luokkanimien, tunnisteiden nimien tai CSS-valitsimien perusteella. Tämä opetusohjelma esitteli erilaisia menetelmiä DOM-elementtien valitsemiseksi JavaScriptissä.