Document Object Model (DOM) on HTML-dokumentin rakenteellinen esitys. DOM on solmupuu, jonka selain luo jokaiselle Internetin verkkosivulle.

DOM on oliosuuntautunut. Jokaisella DOM: n elementillä on omat attribuutit ja menetelmät, joita voit käyttää JavaScriptin avulla.

Tässä opetusartikkelissa opit käyttämään DOM-valitsintoimintoja verkkosivun elementtien käyttämiseen.

Kuinka käyttää DOM-elementtejä

Voit käyttää verkkosivun ylimmän tason DOM-elementtiä maailmanlaajuisen asiakirjaobjektin kautta. Jos sinulla on esimerkiksi seuraavanlainen verkkosivu:

Tervetuloa


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Noin


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Artikkelit



Artikkelin ensimmäinen otsikko





instagram viewer



 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lue lisää 





Artikkelin otsikko 2


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lue lisää 





Artiklan osasto 3


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lue lisää 





Artikkelin otsikko 4


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lue lisää 

Kirjoittaminen asiakirja selainkonsolissa ja enterin painaminen tuottaa seuraavan tuloksen:

Konsolin tulos on interaktiivinen. Voit napsauttaa pää ja kehon elementtejä niiden laajentamiseksi. Tämä tuottaa seuraavan tuloksen:

Jokainen osion elementti tunniste on myös laajennettavissa. Verkkosivun rakenteesta riippuen elementit laajenevat paljastaen lisää elementtejä. Tämän pitäisi antaa sinulle selkeämpi käsitys DOM: n rakenteesta.

Aiheeseen liittyvä: Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

Dokumenttiobjektilla on erityinen ominaisuus, kehon, joka edustaa kehon elementtiä. Joten päästäksesi body-elementtiin, voit kirjoittaa konsoliin seuraavan:

document.body

Tämä tuottaa seuraavan tulosteen:

Mutta tämä on niin pitkälle kuin voit mennä objektin ominaisuuksien avulla. Jokaisella sivulla on pää ja runko, mutta se on muuten ainutlaatuinen. Siis kirjoittamalla document.body.section tai mikään vastaava ei yksinkertaisesti toimi niin kuin haluaisit. Sen sijaan on olemassa menetelmiä, joilla voit kutsua dokumenttiobjektia käyttämään tiettyjä elementtejä.

Mitä ovat DOM-elementtien valitsimet?

DOM-elementtivalitsimet ovat joukko JavaScript-menetelmiä, joita voit käyttää asiakirjaobjektissa verkkosivun elementtien käyttämiseen. DOM-elementtivalitsimilla on kaksi luokkaa: yksi- ja monivalitsimet.

Nämä toiminnot toimivat samalla tavalla kuin CSS-valitsimet. Niiden avulla voit noutaa elementtejä niiden tunnisteen nimen tai id- ja luokkaattribuuttien perusteella. Voit jopa noutaa elementtejä millä tahansa CSS-valitsimella.

Aiheeseen liittyvä: Web-sivun osan kohdistaminen CSS-valitsimien avulla

Yksittäisen elementin valitsimet ovat:

• getElementById()
• querySelector()

Useiden elementtien valitsimet ovat:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Käyttämäsi DOM-elementin valitsin riippuu elementeistä, joihin yrität päästä.

Yksittäisten DOM-elementtien valitsimien käyttäminen

Näet enimmäkseen valitsimia JavaScript-sovelluksissa. Joten siirrytään pois konsolista. Luo JavaScript-tiedosto ja linkitä se HTML-tiedostoosi käyttämällä seuraavaa komentosarjatunnistetta:

Missä src-arvo on JavaScript-tiedostosi nimi. Sijoita tämä komentosarjatunniste juuri ennen sulkevaa body-tagia, .

The getElementById() -menetelmä tarjoaa pääsyn yhteen web-sivun elementtiin käyttämällä sen tunnuksen arvoa. Yllä olevassa HTML-dokumentissa on useita elementtejä, joissa on tunnus. Kohdistaaksesi div elementti "article-3" ID: llä voit lisätä seuraavan koodin JavaScript-tiedostoosi:

arvo = document.getElementById('artikkeli-3')

Nyt div-elementin kanssa artikla-3 ID ja kaikki sitä vastaavat ominaisuudet ovat käytettävissä osoitteesta arvo muuttuja. Voit tulostaa arvo muuttuja konsoliin käyttämällä seuraavaa koodiriviä:

console.log (arvo)

Näet div-elementille määritetyn luokan nimen sekä muut tärkeät attribuutit, kuten sisäisen HTML-koodin.

Toinen yksittäisen elementin valitsin on querySelector(). Tämä toiminto on monipuolisempi, koska voit välittää sen minkä tahansa CSS-valintajonon. Voit kuitenkin käyttää sitä vain yhden elementin valitsemiseen kerrallaan.

Esimerkiksi yllä olevassa HTML-asettelussa on yksi luokka – artikkelit. Neljä div-elementtiä käyttää tätä luokkaa, mutta querySelector() funktio palauttaa vain ensimmäisen elementin, jolla on "artikkelit"-luokka.

querySelector():n käyttäminen luokan kanssa

Lisää seuraava koodi skriptin loppuun:

arvo = document.querySelector('.artikkelit')
console.log (arvo)

Tämä palauttaa vain ensimmäisen div elementti "artikkelit"-luokan kanssa. Huomaa, että määrität valitsimen samassa muodossa kuin CSS-valitsin. CSS: ssä alkupiste määrittää luokan nimen.

querySelector():n käyttäminen tunnuksella

arvo = document.querySelector('#article-3')
console.log (arvo)

Tämä koodi palauttaa ainoan elementin, jolla on "artikkeli-3" tunnus, kolmannen div elementti "artikkelit"-luokan kanssa. Jälleen valintamerkkijono käyttää standardia CSS-syntaksia, jossa a # symboli, joka määrittää tunnuksen.

Useiden DOM-elementtivalitsinten käyttäminen

Loput valitsintoiminnot hakevat elementtiryhmiä. He ovat getElementsByTagName(), getElementsByClassName(), ja querySelectorAll().

Käytä getElementsByTagName()

The getElementsByTagName() valitsin hakee ryhmän elementtejä, joilla on sama nimiö. Jos esimerkiksi haluat valita kaikki h2 Web-sivun elementtejä, voit käyttää seuraavaa koodia:

arvo = document.getElementsByTagName('h2')
console.log (arvo)

Tämä tallentaa kaikki h2-elementit HTML-kokoelmaan nimeltä value.

Käytä getElementsByClassName()

The getElementsByClassName() valitsin palauttaa kokoelman elementtejä, joilla on sama luokkanimi.

arvo = document.getElementsByClassName('artikkelit')
console.log (arvo)

Yllä olevan koodin lisääminen JavaScript-tiedostoon palauttaa neljä div-elementtiä "articles"-luokan nimellä selainkonsolissa.

querySelectorAll()

The querySelectorAll() menetelmä palauttaa solmuluettelon kaikista elementeistä, jotka vastaavat annettua valitsinta. Voit käyttää kaikkia blogiosion kappaleelementtejä käyttämällä seuraavaa koodia:

arvo = document.querySelectorAll('#blog p')
console.log (arvo)

Voit jopa sisällyttää merkkijonoon useita valitsimia erottamalla ne toisistaan ​​pilkulla, aivan kuten CSS: ssä:

arvo = document.querySelectorAll('h2, .articles')
console.log (arvo)

Käytä DOM-valitsimia dynaamisten Web-sivujen luomiseen

Tässä vaiheessa sinulla pitäisi olla selkeä käsitys DOM: sta ja sen toiminnasta. Sinun tulisi myös tuntea erilaiset yksittäis- ja monivalitsimet sekä niiden käyttö.

Silti HTML-elementtien käyttö on vain ensimmäinen askel siinä, mitä voit tehdä DOM-valitsimilla. DOM-valitsimet auttavat sinua kehittämään verkkosivustosi toiminnallisia puolia, kuten onclick- ja onscroll-tapahtumien käsittelyä.

Kuinka tehdä sivustostasi reagoiva ja interaktiivinen CSS: n ja JavaScriptin avulla

Olet määrittänyt verkkosivustosi HTML: n ja CSS: n avulla, mutta nyt sinun on lisättävä logiikkaa. Tässä on mitä tehdä.

Lue Seuraava

Kirjailijasta