Dokumento objekto modelis (DOM) yra struktūrinis HTML dokumento vaizdas. DOM yra mazgų medis, kurį naršyklė sukuria kiekvienam interneto tinklalapiui.

DOM yra orientuotas į objektą. Kiekvienas DOM elementas turi savo atributų ir metodų rinkinį, kurį galite pasiekti naudodami „JavaScript“.

Šiame mokymo straipsnyje sužinosite, kaip naudoti DOM parinkiklio funkcijas, kad pasiektumėte tinklalapio elementus.

Kaip pasiekti DOM elementus

Tinklalapio aukščiausio lygio DOM elementą galite pasiekti naudodami visuotinį dokumento objektą. Pavyzdžiui, jei turite tokį tinklalapį kaip šis:

Sveiki


 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.




Apie


 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.







instagram viewer



Straipsniai



Pirmoji straipsnio antraštė


 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.


 Skaityti daugiau 





Antroji straipsnio antraštinė dalis


 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.


 Skaityti daugiau 





Trečioji straipsnio antraštinė dalis


 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.


 Skaityti daugiau 





Ketvirta straipsnio antraštinė dalis


 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.


 Skaityti daugiau 

Rašymas dokumentas naršyklės konsolėje ir paspaudus Enter bus pateikta tokia išvestis:

Jūsų konsolės išvestis yra interaktyvi. Galite spustelėti galva ir kūnas elementai juos išplėsti. Taip bus gauta tokia produkcija:

Kiekvienas skyriaus elementas žyma taip pat išplečiama. Atsižvelgiant į tinklalapio struktūrą, elementai vis plečiasi, kad atskleistų daugiau elementų. Tai turėtų suteikti jums aiškesnį supratimą apie DOM struktūrą.

Susijęs: Paslėptas svetainių herojus: DOM supratimas

Dokumento objektas turi ypatingą savybę, kūnas, vaizduojantis kūno elementą. Taigi, norėdami pasiekti kūno elementą, konsolėje galite įvesti:

dokumentas.kūnas

Taip bus gauta tokia produkcija:

Bet tai yra tiek, kiek galite pasiekti naudodami objekto savybes. Kiekvienas puslapis turi galvą ir korpusą, tačiau yra unikalus. Taigi spausdinimas dokumento.kūno.skyrius arba kažkas panašaus tiesiog neveiks taip, kaip norėtumėte. Vietoj to, yra būdų, kuriais galite iškviesti dokumento objektą, kad pasiektumėte konkrečius elementus.

Kas yra DOM elementų selektoriai?

DOM elementų parinkikliai yra „JavaScript“ metodų grupė, kurią galite naudoti dokumento objekte norėdami pasiekti tinklalapio elementus. DOM elementų parinkikliai turi dvi kategorijas – vieną ir kelis parinkiklius.

Šios funkcijos veikia panašiai kaip CSS selektoriai. Jie leidžia gauti elementus pagal jų žymos pavadinimą arba jų ID ir klasės atributus. Jūs netgi galite gauti elementus naudodami bet kurį CSS parinkiklį.

Susijęs: Kaip nukreipti tinklalapio dalį naudojant CSS parinkiklius

Vieno elemento parinkikliai yra šie:

• getElementById()
• querySelector()

Kelių elementų parinkikliai yra šie:

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

Naudojamas DOM elemento parinkiklis priklausys nuo elemento (-ų), prie kurio (-ių) bandote pasiekti prieigą.

Vieno DOM elemento selektorių naudojimas

Dažniausiai parinkiklius matysite „JavaScript“ programose. Taigi, atsitraukime nuo konsolės. Sukurkite „JavaScript“ failą ir susiekite jį su HTML failu naudodami šią scenarijaus žymą:

Kur src reikšmė yra jūsų „JavaScript“ failo pavadinimas. Įdėkite šią scenarijaus žymą prieš pat uždarymo turinio žymą, .

The getElementById() metodas suteikia prieigą prie vieno tinklalapio elemento naudojant jo ID reikšmę. Aukščiau esančiame HTML dokumente yra keletas elementų su ID. Norėdami nukreipti į div elementą su "straipsnio-3" ID galite pridėti šį kodą į savo "JavaScript" failą:

vertė = document.getElementById('article-3')

Dabar elementas div su straipsnis-3 ID ir visas atitinkamas jo savybes galima pasiekti iš vertė kintamasis. Galite atsispausdinti vertė kintamasis į konsolę, naudojant šią kodo eilutę:

console.log (vertė)

Pamatysite klasės pavadinimą, priskirtą div elementui, ir kitus svarbius atributus, pvz., vidinį HTML.

Kitas vieno elemento parinkiklis yra querySelector(). Ši funkcija yra universalesnė, nes jai galite perduoti bet kurią CSS parinkiklio eilutę. Tačiau vis tiek galite jį naudoti norėdami pasirinkti vieną elementą vienu metu.

Pavyzdžiui, aukščiau esančiame HTML išdėstyme yra viena klasė – straipsniai. Šią klasę naudoja keturi div elementai, tačiau querySelector() funkcija grąžins tik pirmąjį elementą, turintį klasę "straipsniai".

querySelector() naudojimas su klase

Scenarijaus pabaigoje pridėkite šį kodą:

vertė = document.querySelector('.straipsniai')
console.log (vertė)

Tai grąžins tik pirmąjį div elementas su „straipsnių“ klase. Atkreipkite dėmesį, kad parinkiklį nurodote tokiu pačiu formatu kaip ir CSS parinkiklį. CSS pagrindinis taškas nurodo klasės pavadinimą.

Naudojant querySelector() su ID

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

Šis kodas grąžins vienintelį elementą su „straipsnio 3“ ID, trečią div elementas su „straipsnių“ klase. Vėlgi, parinkiklio eilutė naudoja standartinę CSS sintaksę su a # simbolis, nurodantis ID.

Kelių DOM elementų selektorių naudojimas

Likusios parinkiklio funkcijos nuskaito elementų grupes. Jie yra getElementsByTagName(), getElementsByClassName(), ir querySelectorAll().

Naudojant getElementsByTagName()

The getElementsByTagName() parinkiklis gauna elementų grupę su tuo pačiu žymos pavadinimu. Pavyzdžiui, jei norite pasirinkti visus h2 tinklalapio elementus, galite naudoti šį kodą:

vertė = document.getElementsByTagName('h2')
console.log (vertė)

Tai saugo visus h2 elementus HTML kolekcijoje, vadinamoje vertė.

Naudojant getElementsByClassName()

The getElementsByClassName() parinkiklis grąžina elementų rinkinį su tuo pačiu klasės pavadinimu.

value = document.getElementsByClassName('straipsniai')
console.log (vertė)

Įdėjus anksčiau pateiktą kodą į „JavaScript“ failą, naršyklės konsolėje bus pateikti keturi „div“ elementai su klasės pavadinimu „straipsniai“.

Naudojant querySelectorAll()

The querySelectorAll() metodas grąžina visų elementų, atitinkančių nurodytą parinkiklį, mazgų sąrašą. Norėdami pasiekti visus tinklaraščio skilties pastraipos elementus, galite naudoti šį kodą:

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

Jūs netgi galite įtraukti kelis parinkiklius į eilutę, atskirdami kiekvieną kableliu, kaip ir CSS:

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

Naudokite DOM parinkiklius, kad sukurtumėte dinaminius tinklalapius

Šiuo metu turėtumėte aiškiai suprasti DOM ir kaip jis veikia. Taip pat turėtumėte žinoti skirtingus pavienius ir kelis parinkiklius, taip pat kaip juos naudoti.

Vis dėlto prieigos prie HTML elementų gavimas yra tik pirmas žingsnis to, ką galite padaryti naudodami DOM parinkiklius. DOM parinkikliai labai padės plėtoti funkcinius svetainės aspektus, pvz., tvarkyti onclick ir onscroll įvykius.

Kaip padaryti, kad jūsų svetainė būtų jautri ir interaktyvi naudojant CSS ir JavaScript

Nustatėte savo svetainę naudodami HTML ir CSS, bet dabar turite pridėti logikos. Štai ką daryti.

Skaitykite toliau

Apie autorių