Das DOM und der querySelector()

02.12.2016 11:31 Uhr

Document Object Model (Dokumentobjektmodell, DOM)

Das Document Object Model (Dokumentobjektmodell, DOM) ist eine Programmierschnittstelle, die definiert, wie auf die Objekte zugegriffen werden kann, aus denen ein HTML- oder XML-Dokument besteht. Beide verfügen über eine hierarchische Struktur eingebetteter Tags, die im DOM als ein Baum von Objekten dargestellt werden. So lässt sich jedes HTML- und XML-Dokument entweder als (eingerückter) Text oder zur besseren Visualisierung als Baum darstellen:

DOM

<html>
      <head>
              <title>Mein Titel</title>
              <meta charset="UTF-8">
      </head>
      <body>
              <table>
                    <tr>
                            <td>
                                1. Zeile
                                1. Spalte
                            </td>
                    </tr>
                    <tr>
                            <td>
                               2. Zeile
                               1. Spalte
                            </td>
                    </tr>
              </table>
 
      </body>
</html>

 

Das Dokumentobjektmodell repräsentiert ein HTML-oder XML-Dokument als einen Baum von Knotenobjekten in Form von Eltern-Knoten und Kind-Knoten.

 

Mehr zu Objekten, Eigenschaften und Methoden bei SelfHTML.


querySelector()

 

Selektiert das erste Element, das mittels des übergebenen CSS-Selektors gefunden wird.

 

Beispiel (HTML):

...
<body>
 <section id="header">
  <h1>Seitenüberschift</h1>
 </section>
 <section id="content">
  <h2>Content-Überschrift</h2>
   <p>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
 Abgeschieden wohnen Sie in <span class="ort" onmouseover="orten();"> Buchstabenhausen </span> an der Küste des Semantik, eines 
großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit 
den nötigen Regelialien.
   </p>
 </section>
</body>

CSS:

#content p span {
	     color: red;
	}

Javascript:

function orten(){
   var derOrt = document.querySelector('#content p span');
	alert(derOrt.innerHTML);
}

querySelectorAll()

Gibt alle Elemente des Dokuments zurück, auf die die Gruppe der übergebenen CSS Selektoren zutrifft.

HTML:

<body>
<h1>Beispiel: document.querySelectorAll</h1>
<main id="main" role="main">
	<p>Klicken Sie auf den Button, um den ersten Absatz mit der class="beispiel" zu ändern.</p>
	<p>Durch einen Klick auf den rechten Button ändern Sie die Hintergrundfarbe aller Absätze
		mit der Klasse "beispiel".</p>
	<button onclick="Aendern()">Ändern!</button>
	<p id="ausgabe"></p>
	<section>
		<p class="beispiel">Dies ist der erste Absatz mit der class="beispiel".</p>
		<p class="beispiel">Dies ist der zweite Absatz mit der class="beispiel".</p>
		<p class="beispiel">Dies ist der drite Absatz mit der class="beispiel".</p>
	</section>
</main>
</body>

CSS:

html {
	    background: transparent!important
	}
	 
	body {
	    font-family: sans-serif;
	    color: #333333;
	}
	 
	main {
	    background: #c4ced3;
	    min-height: 250px;
	}

Javascript:

     function Aendern() {
		var x = document.querySelectorAll("p.beispiel");
		var i;
		for (i = 0; i < x.length; i++) {
			x[i].style.backgroundColor = "#fffbf0";
		}
	}

Die querySelectorAll()-Methode durchsucht den Elementenbaum nach Elementen mit dem CSS-Selektor .beispiel. Wenn Sie den linken Button klicken, wird der Inhalt mittels innerHTML ausgegeben.

vorherige Folie/nächste Folie

Schlagwörter: