Kolekce JavaScript DOM

Obsah

Objekt HTMLCollection

Metoda getElementsByTagName() vrací objekt HTMLCollection.

Objekt HTMLCollection je seznam (kolekce) prvků HTML podobný poli.

Následující kód vybere všechny prvky <p> v dokumentu:

Příklad

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

K prvkům v kolekci lze přistupovat pomocí indexového čísla.

Pro přístup k druhý prvek <p>, který můžete napsat:

myCollection[1]

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

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

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

document.getElementById("demo").innerHTML = "The innerHTML of the second paragraph is: " + myCollection[1].innerHTML;

</script>

</body>
</html>

Poznámka: Index začíná na 0.

Délka HTML kolekce HTML

Vlastnost length definuje počet prvků v kolekci HTML:

Příklad

myCollection.length

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

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

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

document.getElementById("demo").innerHTML = "This document contains " + myCollection.length + " paragraphs.";

</script>

</body>
</html>

Vlastnost length je užitečná, když chcete procházet prvky v sbírka:

Příklad

Změňte barvu textu všech prvků <p>:

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
  myCollection[i].style.color = "red";
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  const myCollection = document.getElementsByTagName("p");
  for (let i = 0; i < myCollection.length; i++) {
    myCollection[i].style.color = "red";
  }
}
</script>

</body>
</html>

HTMLCollection NENÍ pole!

Může vypadat HTMLCollection jako pole, ale není.

Můžete procházet seznam a odkazovat na něj prvky s číslem (stejně jako pole).

Nemůžete však použít metody pole jako valueOf(), pop(), push(), nebo join() na HTMLCollection.