JavaScript-DOM-Elemente


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Auf dieser Seite erfahren Sie, wie Sie HTML-Elemente finden und darauf zugreifen eine HTML-Seite.


HTML-Elemente finden

Mit JavaScript möchten Sie häufig HTML-Elemente manipulieren.

Dazu müssen Sie zunächst die Elemente finden. Dafür gibt es mehrere Möglichkeiten:

  • Suchen von HTML-Elementen anhand der ID

  • Suchen von HTML-Elementen anhand des Tag-Namens

  • Suchen von HTML-Elementen anhand des Klassennamens

  • HTML-Elemente mithilfe von CSS-Selektoren finden

  • Suchen von HTML-Elementen anhand von HTML-Objektsammlungen


HTML-Element anhand der ID finden

Der einfachste Weg, ein HTML-Element im DOM zu finden, ist die Verwendung der Element-ID.

In diesem Beispiel wird das Element mit id="intro" gefunden:

Beispiel

const element = document.getElementById("intro");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

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

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

Wenn das Element gefunden wird, gibt die Methode das Element als Objekt (im Element) zurück.

Wenn das Element nicht gefunden wird, enthält das Element null.


Suchen von HTML-Elementen anhand des Tag-Namens

In diesem Beispiel werden alle <p>-Elemente gefunden:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

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

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

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

In diesem Beispiel wird das Element mit id="main" und anschließend alle <p>-Elemente gesucht innerhalb von "main":

Beispiel

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

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

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>


Suchen von HTML-Elementen anhand des Klassennamens

Wenn Sie alle HTML-Elemente mit demselben Klassennamen finden möchten, verwenden Sie getElementsByClassName().

Dieses Beispiel gibt eine Liste aller Elemente mit class="intro" zurück.

Beispiel

const x = document.getElementsByClassName("intro");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

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

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Suchen von HTML-Elementen mithilfe von CSS-Selektoren

Wenn Sie alle HTML-Elemente finden möchten, die einem angegebenen CSS-Selektor entsprechen (ID, Klassennamen, Typen, Attribute, Werte von Attributen usw.) verwenden Sie die Methode querySelectorAll().

Dieses Beispiel gibt eine Liste aller <p>-Elemente mit class="intro" zurück.

Beispiel

const x = document.querySelectorAll("p.intro");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

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

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

Suchen von HTML-Elementen anhand von HTML-Objektsammlungen

In diesem Beispiel wird das Formularelement mit id="frm1" in den Formularen gefunden Sammlung und zeigt alle Elemente an Werte:

Beispiel

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

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

<script>
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length ;i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Auf die folgenden HTML-Objekte (und Objektsammlungen) kann ebenfalls zugegriffen werden:

    document.anker

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Finding HTML Elements Using document.anchors</h2>
    
    <a name="html">HTML Tutorial</a><br>
    <a name="css">CSS Tutorial</a><br>
    <a name="xml">XML Tutorial</a><br>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of anchors are: " + document.anchors.length;
    </script>
    
    
    </body>
    </html>
    

    document.body

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>JavaScript HTMLDOM</h2>
    <p>Displaying document.body</p>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML = document.body.innerHTML;
    </script>
    
    </body>
    </html>
    

    document.documentElement

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>JavaScript HTMLDOM</h2>
    <p>Displaying document.documentElement</p>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
    </script>
    
    </body>
    </html>
    

    document.embeds

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>JavaScript HTMLDOM</h2>
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of embeds: " + document.embeds.length;
    </script>
    
    </body>
    </html>
    

    Dokumentformulare

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Finding HTML Elements Using document.forms</h2>
    
    <form action="">
    First name: <input type="text" name="fname" value="Donald">
    <input type="submit" value="Submit">
    </form> 
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of forms: " + document.forms.length;
    </script>
    
    </body>
    </html>
    

    document.head

    <!DOCTYPE html>
    <html>
    
    <head>
    <title>W3Schools Demo</title>
    </head>
    
    <body>
    
    <h2>JavaScript HTMLDOM</h2>
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    document.head;
    </script>
    
    </body>
    </html>
    

    Dokumentbilder

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Finding HTML Elements Using document.images</h2>
    
    <img src="pic_htmltree.gif" width="486" height="266">
    <img src="pic_navigate.gif" width="362" height="255">
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of images: " + document.images.length;
    </script>
    
    </body>
    </html>
    

    document.links

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Finding HTML Elements Using document.links</h2>
    
    <p>
    <a href="/html/default.asp">HTML</a>
    <br>
    <a href="/css/default.asp">CSS</a>
    </p>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of links: " + document.links.length;
    </script>
    
    </body>
    </html>
    

    document.scripts

    <!DOCTYPE html>
    <html>
    <body>
    
    <h2>Finding HTML Elements Using document.scripts</h2>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "Number of scripts: " + document.scripts.length;
    </script>
    
    </body>
    </html>
    

    Dokumenttitel

    <!DOCTYPE html>
    <html>
      <head>
      <title>W3Schools Demo</title>
      </head>
    <body>
    
    <h2>Finding HTML Elements Using document.title</h2>
    
    <p id="demo"></p>
    
    <script>
    document.getElementById("demo").innerHTML =
    "The title of this document is: " + document.title;
    </script>
    
    </body>
    </html>