Weitere Selektoren

02.12.2016 11:31 Uhr

getElementByID()

Selektiert ein Element des DOM anhand dessen ID

Beispiel:

HTML:

...
<body>
	     <h1>Weihnachtslieder</h1>
    <article>
        <section id="lied1" onclick="zeigeInhalt();">
Weihnachtsbäckerei: </br>
In der Weihnachtsbäckerei</br>
gibt es manche Leckerei</br>
Zwischen Mehl und Milch</br>
macht so mancher Knilch</br>
eine riesengroße Kleckerei.</br>
In der Weihnachtsbäckerei</br>
In der Weihnachtsbäckerei 
        </section>
</br>
        <section id="plaetzchen">
        Du kriegst natürlich was von den Plätzchen...
        </section> 
</br>
        <section id="lied2" onclick="translate();">
O Tannenbaum, o Tannenbaum,</br>
wie treu sind deine Blätter!</br>
Du grünst nicht nur zur Sommerzeit,</br>
nein, auch im Winter, wenn es schneit.</br>
O Tannenbaum, o Tannenbaum,</br>
wie treu sind deine Blätter!
        </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 verwendet.


innerHTML

innerHTML liest den Inhalt des Elements als Text und ändert den Inhalt als Text. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts HTML-Tags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert.

Beispiel:

Javascript:

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

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 = new Array(document.getElementsByName('blume'));
	 
	alert(alleBlumen[0].value);  //Rosen
	alert(alleBlumen[1].value);  //Tulpen
	 
	alert(alleBlumen.length);  // 2? 3?

HTML:

...
	<body>
	 
	  <form>
	    <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="submit" value="Check" onclick="blumen()"><br>
	  </form>
	 
	</body>
	...

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

vorherige Folie / nächste Folie

Schlagwörter: