V6_JavaScriptDOM

JavaScript

JavaScript ist die dritte der drei Grund Webtechnologien: HTML, CSS und JS und JavaScript hat eine eigene Syntax. Ähnlich wie CSS kann auch JavaScript direkt im .html Dokument eingebunden oder als externes File dazugeladen werden.

Funktionen von JavaScript

JavaScript kann beispielsweise auf Ereignisse im Browser reagieren, die Darstellung der Seite verändern, eine CSS Animation starten, stoppen, Daten von einem Server laden, an einen Server schicken usw.

In diesem Dokument findest du Beispiele zu Ereignissen und Veränderungen der Seite.

JavaScript im HTML einbinden

Zwei Möglichkeiten (analog CSS):
Var 1. Füge diesen HTML Script Tag im HTML head oder im body ein:

<script>
    alert('hallo seite geladen');
</script>

Var 2. Im script.js

directory_name/
    - index.html
    - assets/
        - style.css
        - js/
            - scripts.js

<script src="assets/js/script.js"></script>

Im script.js. Mit dem Befehl console.log() kannst du in der Konsole etwas ausgeben lassen, Bsp. einen Wert von einer Variable.

console.log('hallo von extern')

Im head oder bevor der Body schliesst, einbinden. Wichtig, wenn du auf Elemente im DOM zugreifst, dann musst du das JavaScript einbinden, bevor der Body schliesst, nicht im head. Das DOM ist dort noch nicht fertig geladen.

(Document Object Model) DOM

DOM, was ist das?
Eine Schnittstelle, über die JavaScript alle Elemente eines HTML Dokuments verändern kann. Das DOM ist eine Abbildung des ganzen HTML Baums mit allen Knoten für JS. Jeder sogenannten 'Knoten' und jedes Attribut kann über JS angesprochen und verändert werden. Anders gesagt, eine .html Seite liefert JavaScript eine Abbildung ihrer Elemente, Stile und Zustands der Elemente. JavaScript kann diese Informationen lesen, aber über die Schnittstelle auch Elemente verändern, hinzufügen, etc. Der Zugriff geschieht über die document Variable.
https://www.w3schools.com/js/js_htmldom.asp

Noch etwas tiefer: https://eloquentjavascript.net/14_dom.html

Quelle: https://www.w3schools.com/js/js_htmldom.asp

Zugriff über ID

<section id="intro">
    Some Content
</section>

Eine ID ist per Definition bloss einmal pro Seite (nicht Site) zu verwenden. Deshalb ist der untenstehende Zugriff eindeutig:

const el = document.getElementById("intro"); 
//testweise ausgeben, welche Informationen el enthält
console.log(el);

Zugriff über Klasse

<section class="content">
    Some Content
</section>
<section class="content">
    Some More Content
</section>
<section class="content">
    Some More Content
</section>

Klassen können mehrfach vergeben werden. Deshalb liefert der Zugriff unten eine HTMLCollection (vergleichbar dem Array) zurück, auch falls es bloss ein Element mit der Klasse content gäbe.

const matches = document.getElementsByClassName("content");
console.log(matches[0]); //erstes element mit der Klasse content
// Loop durch die Matches
for (let i = 0; i < matches.length; i++) {
    console.log(matches[i]);
}

Zugriff über Tag

<section >
    Some Content
</section>
<section >
    Some More Content
</section>
<section >
    Some More Content
</section>

Der Zugriff über den tag funktioniert ähnlich wie der über die CSS Klasse. Die Rückgabe ist eine HTML-Collection.

const matches = document.getElementsByTagName("section");
console.log(matches[0]); //erstes element mit dem Tag section
// Loop durch die Matches
for (let i = 0; i < matches.length; i++) {
    console.log(matches[i]);
}

Das erste Element finden, die querySelector Methode

Die Document Methode querySelector() gibt das erste Element im Dokument zurück, das dem angegebenen CSS-Selektor oder einer Gruppe von CSS-Selektoren entspricht. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben. Da die Methode tags, IDs oder Klassen entgegennehmen kann, entspricht die Schreibweise im Argument jener im CSS, d.h. mit Hash oder Punkt.

<section >
    Some Content
</section>
<section >
    Some More Content
</section>
<section >
    Some More Content
</section>

const el = document.querySelector(".content");
console.log(el);