console.log(document); // gibt das HTML-Dokument in der Konsole aus, Standardvariable von Javascript (document startet außerhalb des HTML-Codes)
console.log(window); // gibt Eigenschaften des Fenster in der Konsole aus (z.B. Browser etc.), Standardvariable von Javascript
Eigenschaften
console.log(document.children); // gibt die direkten Kinder vom document aus (das ist das html)
console.log(document.getElementById("main")); // gibt das Element mit der ID "main" aus
console.log(document.getElementsByClassName("inner")); // gibt alle Elemente mit der Klasse "inner" aus
console.log(document.getElementsByTagName("div")); // gibt alle Elemente aus, die divs sind
CSS-Selektoren auslesen
document.querySelector(".alert"); // Finde das Element mit der Klasse "alert"
document.querySelector(".alert[rel='hello']"); // Finde das Element mit der Klasse "alert", wo das Attribut "rel" auf dem Wert "hello" ist
document.querySelectorAll(".alert"); // Finde ALLE Elemente mit der Klasse "alert"
Events
window.addEventListener("load", function(){
let heading = document.getElementById("heading"); // gib das Element mit der ID "heading" aus und speichere es in der Variable "heading"
heading.addEventListener("click", function(){ // beim Event "Click" auf die Variable Heading, führe folgende Funktion aus: ...
alert("Überschrift wurde geklickt"); // ... führe diesen alert aus
}, false); // false als 3. Parameter immer mit angeben, damit das in allen Browsern gleich läuft (modernere Browser fügen das selbst hinzu, ältere nicht)
}, false);
