JavaScript DOM-samlinger

Indholdsfortegnelse

HTMLCollection-objektet

Metoden getElementsByTagName() returnerer et HTMLCollection-objekt.

Et HTMLCollection-objekt er en array-lignende liste (samling) af HTML-elementer.

Følgende kode vælger alle ><p>-elementer i et dokument:

Eksempel

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

Elementerne i samlingen kan tilgås med et indeksnummer.

For at få adgang til andet <p> element kan du skrive:

myCollection[1]

Prøv det selv →

<!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>

Bemærk: Indekset starter ved 0.

HTML HTML-samlingens længde

Egenskaben length definerer antallet af elementer i en HTMLCollection:

Eksempel

myCollection.length

Prøv det selv →

<!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>

Egenskaben length er nyttig, når du ønsker at gå gennem elementerne i en kollektion:

Eksempel

Skift tekstfarven for alle <p>-elementer:

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

Prøv det selv →

<!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>

En HTMLCollection er IKKE en matrix!

En HTMLCollection kan se ud som et array, men det er det ikke.

Du kan gå gennem listen og henvise til elementerne med et tal (ligesom en matrix).

Du kan dog ikke bruge array-metoder som valueOf(), pop(), push(), eller join() på en HTMLCollection.