JavaScript HTML prvky DOM
Tato stránka vás naučí, jak najít a přistupovat k prvkům HTML na stránce HTML.
Hledání prvků HTML
Pomocí JavaScriptu často chcete manipulovat s prvky HTML.
Chcete-li to provést, musíte nejprve najít prvky. Existuje několik způsobů, jak to provést:
- Hledání prvků HTML podle id
- Hledání prvků HTML podle názvu značky
- Hledání prvků HTML podle názvu třídy
- Hledání prvků HTML pomocí selektorů CSS
- Hledání prvků HTML pomocí kolekcí objektů HTML
Hledání prvku HTML podle ID
Nejjednodušší způsob, jak najít prvek HTML v DOM, je pomocí id prvku.
Tento příklad najde prvek s id="intro"
:
Příklad
const element = document.getElementById("intro");
Pokud je prvek nalezen, metoda vrátí prvek jako objekt (v prvku).
Pokud prvek není nalezen, prvek bude obsahovat null
.
Hledání prvků HTML podle názvu značky
Tento příklad najde všechny <p>
prvky:
Příklad
const element = document.getElementsByTagName("p");
Tento příklad najde prvek s id="main"
a poté najde všechny <p>
prvky uvnitř "main"
:
Příklad
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
Hledání prvků HTML podle názvu třídy
Pokud chcete najít všechny prvky HTML se stejným názvem třídy, použijte
getElementsByClassName()
.
Tento příklad vrátí seznam všech prvků s class="intro"
.
Příklad
const x = document.getElementsByClassName("intro");
Hledání prvků HTML pomocí selektorů CSS
Pokud chcete najít všechny prvky HTML, které odpovídají zadanému selektoru CSS (id, názvy tříd, typy, atributy, hodnoty atributů atd.), použijte querySelectorAll()
metodu.
Tento příklad vrátí seznam všech <p>
prvků s class="intro"
.
Příklad
const x = document.querySelectorAll("p.intro");
Hledání prvků HTML pomocí kolekcí objektů HTML
Tento příklad najde prvek formuláře s id="frm1"
, v kolekci formulářů a zobrazí všechny hodnoty prvků:
Příklad
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Přístupné jsou také následující objekty HTML (a kolekce objektů):