JavaScript-DOM-Sammlungen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Das HTMLCollection-Objekt

Die Methode getElementsByTagName() gibt ein HTMLCollection-Objekt zurück.

Ein HTMLCollection-Objekt ist eine arrayartige Liste (Sammlung) von HTML-Elementen.

Der folgende Code wählt alle <p>-Elemente in einem Dokument aus:

Beispiel

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

Auf die Elemente in der Sammlung kann über eine Indexnummer zugegriffen werden.

Um auf die zuzugreifen zweites <p>-Element, das Sie schreiben können:

myCollection[1]

Probieren Sie es selbst aus →

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

Hinweis: Der Index beginnt bei 0.


HTML HTMLCollection-Länge

Die Eigenschaft length definiert die Anzahl der Elemente in einer HTMLCollection:

Beispiel

myCollection.length

Probieren Sie es selbst aus →

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

Die Eigenschaft length ist nützlich, wenn Sie die Elemente in a durchlaufen möchten Sammlung:

Beispiel

Ändern Sie die Textfarbe aller <p>-Elemente:

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

Probieren Sie es selbst aus →

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

Eine HTMLCollection ist KEIN Array!

Eine HTMLCollection könnte aussehen wie ein Array, ist es aber nicht.

Sie können die Liste durchgehen und darauf verweisen die Elemente mit einer Zahl (genau wie ein Array).

Sie können jedoch keine Array-Methoden wie valueOf(), pop(), push() verwenden. oder join() für eine HTMLCollection.