Objektový model dokumentu (DOM) je štrukturálna reprezentácia dokumentu HTML. DOM je strom uzlov, ktorý prehliadač vytvára pre každú webovú stránku na internete.

DOM je objektovo orientovaný. Každý prvok v DOM má svoj vlastný súbor atribútov a metód, ku ktorým máte prístup pomocou JavaScriptu.

V tomto článku s návodom sa dozviete, ako používať funkcie selektora DOM na prístup k prvkom webovej stránky.

Ako získať prístup k prvkom DOM

K prvku DOM najvyššej úrovne webovej stránky môžete pristupovať prostredníctvom objektu globálneho dokumentu. Ak máte napríklad webovú stránku, ako je táto:

Vitajte


 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.




O


 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



články



Hlava článku prvý


 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.


 Čítaj viac 





Hlava článku dva


 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.


 Čítaj viac 





Hlava článku tri


 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.


 Čítaj viac 





Štvrtá hlava článku


 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.


 Čítaj viac 

Písanie dokument v konzole prehliadača a stlačením klávesu Enter vytvoríte nasledujúci výstup:

Výstup vo vašej konzole je interaktívny. Môžete kliknúť na hlavu a telo prvky na ich rozšírenie. Ak tak urobíte, vytvorí sa nasledujúci výstup:

Každý prvok sekcie v tag je tiež rozšíriteľný. V závislosti od štruktúry webovej stránky sa prvky budú neustále rozširovať, aby odhalili viac prvkov. To by vám malo poskytnúť jasnejšie pochopenie štruktúry DOM.

Súvisiace: Skrytý hrdina webových stránok: Pochopenie DOM

Objekt dokumentu má špeciálnu vlastnosť, telo, predstavujúci prvok tela. Ak chcete získať prístup k prvku tela, môžete do konzoly zadať nasledovné:

dokument.telo

Výsledkom bude nasledujúci výstup:

Ale je to tak ďaleko, ako môžete pomocou vlastností objektu zájsť. Každá stránka má hlavu a telo, ale inak je jedinečná. Takže písanie dokument.telo.časť alebo niečo podobné jednoducho nebude fungovať tak, ako by ste chceli. Namiesto toho existujú metódy, ktoré môžete zavolať na objekt dokumentu, aby ste získali prístup k špecifickým prvkom.

Čo sú selektory prvkov DOM?

Selektory prvkov DOM sú skupinou metód JavaScriptu, ktoré môžete použiť na objekte dokumentu na prístup k prvkom na webovej stránke. Selektor prvkov DOM má dve kategórie – jednoduché a viacnásobné selektory.

Tieto funkcie fungujú podobne ako selektory CSS. Umožňujú vám získať prvky na základe ich názvu značky alebo ich atribútov id a class. Môžete dokonca načítať prvky pomocou ľubovoľného selektora CSS.

Súvisiace: Ako zacieliť na časť webovej stránky pomocou selektorov CSS

Selektory jednotlivých prvkov sú:

• getElementById()
• querySelector()

Výbery viacerých prvkov sú:

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

Výber prvkov DOM, ktorý použijete, bude závisieť od prvkov, ku ktorým sa pokúšate získať prístup.

Používanie selektorov jedného prvku DOM

Selektory väčšinou uvidíte v aplikáciách JavaScript. Poďme teda preč od konzoly. Vytvorte súbor JavaScript a prepojte ho so súborom HTML pomocou nasledujúcej značky skriptu:

Kde hodnota src je názov vášho súboru JavaScript. Umiestnite túto značku skriptu tesne pred záverečnú značku tela, .

The getElementById() poskytuje prístup k jednému prvku na webovej stránke pomocou hodnoty jeho ID. Vo vyššie uvedenom dokumente HTML je niekoľko prvkov s ID. Zacieliť na div prvku s ID „článok-3“ môžete do súboru JavaScript pridať nasledujúci kód:

hodnota = document.getElementById('článok-3')

Teraz prvok div s článok-3 ID a všetky jeho zodpovedajúce vlastnosti sú dostupné z hodnotu premenlivý. Môžete si vytlačiť hodnotu premennej do konzoly pomocou nasledujúceho riadku kódu:

console.log (hodnota)

Uvidíte názov triedy, ktorý je priradený k prvku div, ako aj ďalšie dôležité atribúty, ako napríklad vnútorné HTML.

Ďalším selektorom jednotlivých prvkov je querySelector(). Táto funkcia je všestrannejšia, pretože jej môžete odovzdať ľubovoľný reťazec selektora CSS. Stále ho však môžete použiť len na výber jedného prvku naraz.

Napríklad v rozložení HTML vyššie je jedna trieda – články. Štyri prvky div používajú túto triedu, ale querySelector() funkcia vráti iba prvý prvok, ktorý má triedu "články".

Použitie querySelector() s triedou

Na koniec skriptu pridajte nasledujúci kód:

hodnota = document.querySelector('.articles')
console.log (hodnota)

Toto vráti iba to prvé div prvok s triedou „článkov“. Všimnite si, že selektor zadávate v rovnakom formáte ako selektor CSS. V CSS úvodná bodka určuje názov triedy.

Použitie querySelector() s ID

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

Tento kód vráti jediný prvok s ID „článku-3“, tretí div prvok s triedou „článkov“. Reťazec selektora opäť používa štandardnú syntax CSS s a # symbol označujúci ID.

Používanie viacerých selektorov prvkov DOM

Zostávajúce funkcie selektora načítajú skupiny prvkov. Oni sú getElementsByTagName(), getElementsByClassName()a querySelectorAll().

Použitie getElementsByTagName()

The getElementsByTagName() Selektor načíta skupinu prvkov s rovnakým názvom značky. Napríklad, ak chcete vybrať všetky h2 prvkov na webovej stránke, môžete použiť nasledujúci kód:

value = document.getElementsByTagName('h2')
console.log (hodnota)

Toto ukladá všetky prvky h2 do kolekcie HTML s názvom value.

Použitie getElementsByClassName()

The getElementsByClassName() Selektor vráti kolekciu prvkov s rovnakým názvom triedy.

value = document.getElementsByClassName('články')
console.log (hodnota)

Vložením vyššie uvedeného kódu do súboru JavaScript sa v konzole prehliadača vrátia štyri prvky div s názvom triedy „articles“.

Použitie querySelectorAll()

The querySelectorAll() metóda vráti zoznam uzlov všetkých prvkov, ktoré zodpovedajú danému selektoru. Na prístup ku všetkým prvkom odseku v sekcii blogu môžete použiť nasledujúci kód:

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

Do reťazca môžete dokonca zahrnúť niekoľko selektorov, pričom každý oddelíte čiarkou, rovnako ako v CSS:

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

Použite selektory DOM na vytváranie dynamických webových stránok

V tomto bode by ste mali jasne pochopiť DOM a ako funguje. Mali by ste tiež poznať rôzne jednoduché a viacnásobné selektory, ako aj ich používanie.

Napriek tomu je získanie prístupu k prvkom HTML len prvým krokom v tom, čo môžete robiť so selektormi DOM. Selektor DOM vám pomôže pri vývoji funkčných aspektov vášho webu, ako je napríklad spracovanie udalostí onclick a onscroll.

Ako zabezpečiť, aby bol váš web responzívny a interaktívny pomocou CSS a JavaScriptu

Nastavili ste svoj web pomocou HTML a CSS, ale teraz musíte pridať logiku. Tu je to, čo robiť.

Prečítajte si ďalej

O autorovi