Selektoren

getElementByID()

Selektiert ein Element des DOM anhand dessen ID

Beispiel:

HTML:

...
<body>
	     <h1>Weihnachtslieder</h1>
        <article>
            <section id="lied1" onclick="zeigeInhalt();">
                <div>Weihnachtsbäckerei:</div>
                <div>In der Weihnachtsbäckerei</div>
                <div>gibt es manche Leckerei</div>
                <div>Zwischen Mehl und Milch</div>
                <div>macht so mancher Knilch</div>
                <div>eine riesengroße Kleckerei.</div>
                <div>In der Weihnachtsbäckerei</div>
                <div>In der Weihnachtsbäckerei</div> 
            </section>

            <section id="plaetzchen">
                <p>Du kriegst natürlich was von den Plätzchen...</p>
            </section> 

        <section id="lied2" onclick="translates();">
            <div>O Tannenbaum, o Tannenbaum,</div>
            <div>wie treu sind deine Blätter!</div>
            <div>Du grünst nicht nur zur Sommerzeit,</div>
            <div>nein, auch im Winter, wenn es schneit.</div>
            <div>O Tannenbaum, o Tannenbaum,</div>
            <div>wie treu sind deine Blätter!</div>
        </section>
    </article>
	</body>
...

Javascript:

function zeigeInhalt(){
	  var Inhalt = document.getElementById("plaetzchen");
	  alert(Inhalt.innerHTML);
	  }

Bei Klick in den section-Block wird die parameterlose Funktion zeigeInhalt() aufgerufen.
Es wird in die Variable Inhalt der Inhalt des Knotens mit der ID "lied1" eingelesen.
Somit wird dann der Text, der in diesem Knoten ist, im alert angezeigt. Dazu wird die Methode innerHTML oder innerTextverwendet.

Beispiel:

Javascript:

function translates() {
	    var translation = "O Christmas tree o Christmas tree, How loyal are your leaves/needles! You are green not only in the summertime, No, also in winter when it snows.";
                    console.log(translation);
        document.getElementById('lied2').innerHTML=translation;
	    }

getElementsByName()

  • Da das Attribut name für die meisten Elemente als deprecated gilt, wird dieser Selektor nur noch in Verbindung mit Formularen verwendet.
  • Es werden ALLE Elemente, die ein Attribut name mit dem Inhalt des Parameters haben, selektiert und in ein Array geschrieben.
  • ACHTUNG: getElementsByName() und getElementByID()!

Beispiel:

Javascript:

var alleBlumen = document.getElementsByName('blume');
	 
	console.log(alleBlumen[0].value);  //Rosen
	console.log(alleBlumen[1].value);  //Tulpen
	 
	console.log(alleBlumen.length);  // 2? 3?

HTML:

    ...
	<body>
	 
	  
	    <input type="text" name="blume" id="blumen1" value="Rosen">
	    <input type="text" name="blume" id="blumen2" value="Tulpen">
	    <input type="text" name="blume" id="blumen3" value="Nelken">
	    <input type="button" value="Check" onclick="blumen()">
	  
	 
	</body>
	...

Tipp:
Es handelt sich hier um Eingabefelder!
Der Wert des "value"-Attributes kann also verändert werden. Javascript gibt das zurück, was gerade im Eingabefeld steht; Unabhängig vom Vorgabewert value.

querySelector()

Mit dieser Methode können CSS-Selektoren angesprochen werden. Hier wird immer der erste Selektor genutzt, nachdem gesucht wird.

HTML:

<p class="text">Hier steht ein Text.</p>
<p class="text">Hier steht ein Text.</p>
<p class="text">Hier steht ein Text.</p>

Javascript:

document.querySelector(".text").innerText = "Hier steht ein anderer Text.";

Diese Zeile ändert nur den Inhalt des ersten p-Elementes mit der Klasse "text"!

Eine Liste der verfügbaren Selektoren finden Sie bei w3schools.

querySelectorAll()

Während die Methode querySelector() nur den ersten gefundenen Selektor bearbeitet, kann mit querySelectorAll() auf alle Selektoren zugegriffen werden, die innerhalb der CSS-Datei vorkommen.

HTML:

<p class="text">Hier steht ein Text.</p>
<p class="text">Hier steht ein Text.</p>
<p class="text">Hier steht ein Text.</p>

Javascript:

document.querySelectorAll(".text").innerText = "Hier steht ein anderer Text.";

Diese Zeile ändert den Inhalt aller p-Elemente mit der Klasse "text"!

Eine Liste der verfügbaren Selektoren finden Sie bei w3schools.