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:
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.
Egenskapen length
definierar antalet element i en HTMLCollection
:
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:
Ä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.