Prvky JavaScriptu DOM

Obsah

    Zobrazit obsah

Tato stránka vás naučí, jak najít prvky HTML a získat k nim přístup stránku 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");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

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 prvky <p>:

Příklad

const element = document.getElementsByTagName("p");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

Tento příklad najde prvek s id="main" a poté najde všechny prvky <p> uvnitř "hlavní":

Příklad

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

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");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

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 metodu querySelectorAll().

Tento příklad vrátí seznam všech prvků <p> s class="intro".

Příklad

const x = document.querySelectorAll("p.intro");

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Hledání prvků HTML pomocí kolekcí objektů HTML

Tento příklad najde prvek formuláře s id="frm1" ve formulářích kolekce a zobrazí všechny prvky hodnoty:

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;

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

<p id="demo"></p>

<script>
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;
</script>

</body>
</html>

Přístupné jsou také následující objekty HTML (a kolekce objektů):

    dokument.kotvy

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.anchors</h2>

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>


</body>
</html>

    dokument.tělo

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

    document.documentElement

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

    dokument.vloží

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

</body>
</html>

    dokument.formuláře

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form> 

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>

</body>
</html>

    dokument.hlava

    <!DOCTYPE html>
<html>

<head>
<title>W3Schools Demo</title>
</head>

<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
document.head;
</script>

</body>
</html>

    dokument.obrázky

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.images</h2>

<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>

</body>
</html>

    dokument.odkazy

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.links</h2>

<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>

</body>
</html>

    dokument.skripty

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.scripts</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>

</body>
</html>

    název dokumentu

    <!DOCTYPE html>
<html>
  <head>
  <title>W3Schools Demo</title>
  </head>
<body>

<h2>Finding HTML Elements Using document.title</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>

</body>
</html>