Objektový model dokumentu (DOM) je strukturální reprezentace dokumentu HTML. DOM je strom uzlů, který prohlížeč vytváří pro každou webovou stránku na internetu.
DOM je objektově orientovaný. Každý prvek v DOM má svou vlastní sadu atributů a metod, ke kterým máte přístup pomocí JavaScriptu.
V tomto výukovém článku se dozvíte, jak používat funkce selektoru DOM pro přístup k prvkům webové stránky.
Jak získat přístup k prvkům DOM
K prvku DOM nejvyšší úrovně webové stránky můžete přistupovat prostřednictvím objektu globálního dokumentu. Pokud máte například webovou stránku, jako je tato:
Dokument
Vítejte
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.
články
Článek Hlava první
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.
Přečtěte si více
Hlava článku druhá
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.
Přečtěte si více
Název článku třetí
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.
Přečtěte si více
Hlava článku čtvrtá
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.
Přečtěte si více
Psaní na stroji dokument v konzole prohlížeče a stisknutím klávesy Enter vytvoříte následující výstup:
Výstup ve vaší konzoli je interaktivní. Můžete kliknout na hlava a tělo prvky k jejich rozšíření. Pokud tak učiníte, vytvoří se následující výstup:
Každý prvek sekce v tag je také rozšiřitelný. V závislosti na struktuře webové stránky se budou prvky neustále rozšiřovat, aby odkryly další prvky. To by vám mělo poskytnout jasnější pochopení struktury DOM.
Příbuzný: Skrytý hrdina webových stránek: Porozumění DOM
Objekt dokumentu má speciální vlastnost, tělo, představující prvek těla. Pro přístup k prvku body tedy můžete do konzoly zadat následující:
dokument.tělo
Tím vznikne následující výstup:
Ale to je tak daleko, jak můžete pomocí vlastností objektu zajít. Každá stránka má hlavu a tělo, ale jinak je jedinečná. Takže psaní dokument.tělo.část nebo něco podobného prostě nebude fungovat tak, jak byste si přáli. Místo toho existují metody, které můžete volat na objekt dokumentu, abyste získali přístup ke konkrétním prvkům.
Co jsou selektory prvků DOM?
Selektory prvků DOM jsou skupinou metod JavaScriptu, které můžete použít na objektu dokumentu pro přístup k prvkům na webové stránce. Selektory prvků DOM mají dvě kategorie – jednoduché a vícenásobné selektory.
Tyto funkce fungují podobně jako selektory CSS. Umožňují vám načíst prvky na základě jejich názvu tagu nebo jejich atributů id a class. Prvky můžete dokonce načíst pomocí libovolného selektoru CSS.
Příbuzný: Jak cílit na část webové stránky pomocí selektorů CSS
Selektory jednotlivých prvků jsou:
- getElementById()
- querySelector()
Voliče více prvků jsou:
- getElementsByTagName()
- getElementsByClassName()
- querySelectorAll()
Volič prvků DOM, který použijete, bude záviset na prvku (prvcích), ke kterému se pokoušíte získat přístup.
Použití selektorů jednoho prvku DOM
Selektory většinou uvidíte v aplikacích JavaScript. Pojďme tedy pryč od konzole. Vytvořte soubor JavaScript a propojte jej se svým souborem HTML pomocí následující značky skriptu:
Kde hodnota src je název vašeho souboru JavaScript. Umístěte tuto značku skriptu těsně před závěrečnou značku těla, .
The getElementById() metoda poskytuje přístup k jednomu prvku na webové stránce pomocí hodnoty jeho ID. V dokumentu HTML výše je několik prvků s ID. Zacílit na div prvek s ID „článek-3“ můžete do souboru JavaScript přidat následující kód:
value = document.getElementById('článek-3')
Nyní prvek div s článek-3 ID a všechny jeho odpovídající vlastnosti jsou přístupné z hodnota variabilní. Můžete vytisknout hodnota proměnnou do konzoly pomocí následujícího řádku kódu:
console.log (hodnota)
Uvidíte název třídy, který je přiřazen k prvku div, a také další důležité atributy, jako je vnitřní HTML.
Druhým selektorem jednotlivých prvků je querySelector(). Tato funkce je všestrannější, protože jí můžete předat libovolný řetězec selektoru CSS. Stále jej však můžete použít pouze k výběru jednoho prvku najednou.
V rozložení HTML výše je například jedna třída – články. Čtyři prvky div používají tuto třídu, ale querySelector() funkce vrátí pouze první prvek, který má třídu "articles".
Použití querySelector() s třídou
Na konec skriptu přidejte následující kód:
hodnota = document.querySelector('.articles')
console.log (hodnota)
Tím se vrátí pouze první div prvek s třídou „články“. Všimněte si, že selektor zadáváte ve stejném formátu jako selektor CSS. V CSS úvodní období určuje název třídy.
Použití querySelector() s ID
value = document.querySelector('#article-3')
console.log (hodnota)
Tento kód vrátí jediný prvek s ID „článek-3“, třetí div prvek s třídou „články“. Řetězec selektoru opět používá standardní syntaxi CSS s a # symbol určující ID.
Použití více selektorů prvků DOM
Zbývající selektorové funkce načítají skupiny prvků. Oni jsou getElementsByTagName(), getElementsByClassName(), a querySelectorAll().
Použití getElementsByTagName()
The getElementsByTagName() selector načte skupinu prvků se stejným názvem tagu. Například, pokud chcete vybrat všechny h2 prvků na webové stránce, můžete použít následující kód:
value = document.getElementsByTagName('h2')
console.log (hodnota)To ukládá všechny prvky h2 do kolekce HTML s názvem value.
Použití getElementsByClassName()
The getElementsByClassName() Selektor vrací kolekci prvků se stejným názvem třídy.
value = document.getElementsByClassName('články')
console.log (hodnota)
Vložením výše uvedeného kódu do souboru JavaScript se v konzole prohlížeče vrátí čtyři prvky div s názvem třídy „articles“.
Použití querySelectorAll()
The querySelectorAll() metoda vrací seznam uzlů všech prvků, které odpovídají danému selektoru. Pro přístup ke všem prvkům odstavce v sekci blogu můžete použít následující kód:
value = document.querySelectorAll('#blog p')
console.log (hodnota)Do řetězce můžete dokonce zahrnout několik selektorů a každý oddělit čárkou, stejně jako v CSS:
hodnota = document.querySelectorAll('h2, .articles')
console.log (hodnota)K vytváření dynamických webových stránek použijte selektory DOM
V tomto okamžiku byste měli jasně rozumět DOM a tomu, jak funguje. Měli byste také znát různé jednoduché a vícenásobné selektory a také způsob, jak je používat.
Získání přístupu k prvkům HTML je však pouze prvním krokem v tom, co můžete pomocí selektorů DOM dělat. Selektory DOM vám pomohou vyvinout funkční aspekty vašeho webu, jako je zpracování událostí onclick a onscroll.
Nastavili jste svůj web pomocí HTML a CSS, ale nyní potřebujete přidat logiku. Zde je to, co dělat.
Přečtěte si další
- Programování
- HTML
- JavaScript
- Vývoj webu
Kadeisha Kean je vývojář úplného softwaru a technický/technologický autor. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; vyrábět materiál, který může snadno pochopit každý technologický nováček. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).
Přihlaste se k odběru našeho newsletteru
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné e-knihy a exkluzivní nabídky!
Chcete-li se přihlásit k odběru, klikněte sem
