JavaScript DOM-samlingar


Innehållsförteckning

    Visa innehållsförteckning


HTMLCollection-objektet

Metoden getElementsByTagName() returnerar ett HTMLCollection-objekt.

Ett HTMLCollection-objekt är en arrayliknande lista (samling) av HTML-element.

Följande kod väljer alla ><p>-element i ett dokument:

Exempel

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

Elementen i samlingen kan nås med ett indexnummer.

För att komma åt andra <p> element du kan skriva:

myCollection[1]

Prova själv →

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

Obs! Indexet börjar på 0.


HTML HTML Collection Längd

Egenskapen length definierar antalet element i en HTMLCollection:

Exempel

myCollection.length

Prova själv →

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

Egenskapen length är användbar när du vill gå igenom elementen i en samling:

Exempel

Ändra textfärgen för alla <p>-element:

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

Prova själv →

<!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 är INTE en array!

En HTMLCollection kan se ut som en array, men det är det inte.

Du kan gå igenom listan och referera till elementen med ett nummer (precis som en array).

Du kan dock inte använda array-metoder som valueOf(), pop(), push(), eller join() på en HTMLCollection.