Bureaucrats, emailconfirmed
1,221
edits
→Auf Elemente zugreifen
(→Einbinden von JavaScript in HTML-Dateien: onload statt spätes einbinden) |
|||
| Line 72: | Line 72: | ||
document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das <p>. In der folgenden Zeile wird dann die Schriftfarbe geändert. | document.getElementById() holt das Element mit der übergebenen Id (hier:"changeMe"). In dem Beispiel ist das das <p>. In der folgenden Zeile wird dann die Schriftfarbe geändert. | ||
Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück sondern ein Array mit allen Elementen, die dieses Tag haben: | Eine ähnliche Funktion ist document.getElementsByTagName(), diese gibt kein Element direkt zurück, sondern ein Array mit allen Elementen, die dieses Tag haben: | ||
<source lang="JavaScript" > | <source lang="JavaScript" > | ||
//färbe alle Absätze rot | //färbe alle Absätze rot | ||
| Line 81: | Line 81: | ||
</source> | </source> | ||
Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt: | Mit [[HTML5]] wurden auch neue JavaScript Funktionen eingeführt. Eine der interessantesten ist ein schnellerer Zugriff auf das DOM über die [[jQuery]]-ähnliche Funktion "querySelector()" und "querySelectorAll()" im document-Objekt, die einen CSS-Selektor-String zur auswahl der Elemente entgegennehmen: | ||
<source lang="JavaScript"> | <source lang="JavaScript"> | ||
var domElement = document.querySelector("#changeMe"); | var domElement = document.querySelector("#changeMe"); | ||
| Line 87: | Line 87: | ||
console.log("Alle divs: " + document.querySelectorAll("div") ); | console.log("Alle divs: " + document.querySelectorAll("div") ); | ||
</source> | </source> | ||
Während querySelector das erste passende Element raussucht und zurückgibt, gibt querySelectorAll alle passenden Elemente in einem Array zurück. | |||
== Event-Handler == | == Event-Handler == | ||