JavaScript 1 Document Objekt
Jump to navigation
Jump to search
Das Document Objekt
- Ist für die Erstellung von dynamischen Internetseiten enorm wichtig
- Erlaubt es, auf alle einzelnen Bestandteile der Seite zuzugreifen
- Erlaubt es, Funktionsweisen zu verändern bei Buttons oder Formulare
- Bsp.: document.write()
- HTML-Struktur wird als DOM-Baum bezeichnet (Document Object Model -> Baumartige Struktur)
- Ursprungselement = document-Element, enthält alle weiteren Bestandteile der Seite
- Objekt document-Element = alle Bereiche, die innerhalb der <html> Tags stehen
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <p> Absatz mit <i>einem kursiven Bereich</i> und einem <strong>fett</strong> gedruckten Wort </p> <script> "use strict"; alert(document.body.firstElementChild.nextElementSibling.innerHTML); /* document.body => greift auf die Elemente im Body zu firstElementChild => bezieht sich immer auf das erste Kind-Element (h1) nextElementSibling => bezeichnet das nachfolgende Geschwister-Element (h2) innerHTML => greift auf Inhalt des angesprochenen Tags zu (Überschrift 2) Beispiel um das <i>-Tag anzusprechen: document.body.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild */ </script> </body> </html>
Auf Inhalte des DOM-Baums zugreifen
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <p> Absatz mit <i>einem kursiven Bereich</i> und einem <strong>fett</strong> gedruckten Wort </p> <script> "use strict"; document.body.firstElementChild.nextElementSibling.innerHTML = "neue Überschrift"; /* innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags => Überschrift 2 ändert sich zu neue Überschrift in diesem Fall, da es nur Text ist, der geändert wird ginge auch innerText statt innerHTML */ </script> </body> </html>
Auf einzelne Elemente der Seite gezielt zugreifen
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <h1 id="ueberschrift1"></h1> <h2 id="ueberschrift2"></h2> <p id="absatz"></p> <script> /* getElementById greift auf den Tag mit der entsprechenden ID zu */ document.getElementById("ueberschrift1").innerText = "JavaScript ist cool"; document.getElementById("ueberschrift2").innerText = "Seite mit generierten Inhalten"; document.getElementById("absatz").innerHTML = "Hier steht ein Absatz mit einem" + " <strong>fett gedruckten</strong>Bereich."; </script> </body> </html>
Weitere Gestaltungsmöglichkeiten
- .getElementById(): Zugriff auf ein Element mit spezifischer ID
- .getElementsByClassName(): Zugriff auf alle Elemente einer CSS Klasse (gibt ein Array-ähnliches Objekt zurück)
- .getElementsByTagName(): Zugriff auf alle Elemente eines bestimmten HTML Tags (gibt ein Array-ähnliches Objekt zurück)
- .querySelector(): kombiniert die Funktionalitäten von den oberen Methoden. Praktisch: bei Änderungen
- mit CSS-Klasse:.querySelector(".klassenName")
- mit ID:.querySelector("#idName")
- mit Tag:.querySelector("tagName")
Beispiel 1:
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <input id="eingabefeld"> <script> // über value-Attribut lässt sich ein // beliebiger Text in das Feld einfügen document.getElementById("eingabefeld").value = "JavaScript Kurs"; </script> </body> </html>
Beispiel 2:
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <input id="eingabefeld"> <!-- onclick-Funktion aktiviert die JS Funktion --> <button type="button" onclick="auslesen()">Weiter</button> <script> function auslesen() { let inhalt = document.getElementById("eingabefeld").value; alert(inhalt); } </script> </body> </html>
Beispiel 3:
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <p><a id="link"></a></p> <script> // Programm fordert User auf einen Link einzugeben let adresse = prompt("Gib eine Linkadresse ein."); // eingegebener Link wird als href-Attribut in den <a> Tag geschrieben document.getElementById("link").href = adresse; // eingegebener Link wird innerhalb der <a> Tags geschrieben document.getElementById("link").innerHTML = adresse; </script> </body> </html>
Formulare mit JavaScript bearbeiten
Status einer Checkbox verändern
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <input name="feld1" value="Formularfeld 1"> <input name="feld2" value="Formularfeld 2"> <input name="feld3" type="checkbox"> </form> <script> // Navigation über DOM-Baum um die Checkbox zu aktivieren // mit document.forms sind alle Formulare zugänglich, die auf der // Seite enthalten sind // .checked kann true oder false gesetzt werden document.forms.formular.elements.feld3.checked = true; </script> </body> </html>
Optionsfeld auswählen
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <select id="auswahl"> <option value="auswahl1">Wert 1</option> <option value="auswahl2">Wert 2</option> <option value="auswahl3">Wert 3</option> </select> </form> <script> // Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen auswahl.selectedIndex = 2; // Möglichkeit 2 auswahl.options[2].selected = true; // Möglichkeit 3 auswahl.value = "auswahl3"; </script> </body> </html>
Events für Formulare
- Wenn ein Formularfeld angesteuert wird, erhält es Fokus, dann tritt das focus-event ein.
- Verliert das Formularfeld diesen Fokus (man wechselt zB. auf eine anders Feld), dann tritt das blur-event ein
- Beide Events sind sehr wichtig für die Barrierefreiheit einer Website
Beispiel für focus
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <input id="feld1" value="Formularfeld 1"> </form> <script> let angezeigt = false; function nachricht() { if (!angezeigt) { alert("Gib deinen Namen ein"); angezeigt = true; } } /* * Wenn ein Event auf Seite fokussiert wird, * tritt das focus-Event ein * Wenn Fokus entfernt wird, kommt es zum blur-Event */ feld1.onfocus = nachricht; </script> </body> </html>
Beispiel für blur
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <input id="feld1"> <button type="button">Eingabe</button> </form> <script> function nachricht() { if (feld1.value == "") { alert("Gib deinen Namen ein"); } } /* * Wenn der Input verlassen wird * tritt die Fehlermeldung auf */ feld1.onblur = nachricht; </script> </body> </html>
Weitere wichtige Events
- cut
- copy
- paste
- Werden ausgelöst wenn Anwender Inhalt des Feldes ausschneiden, kopieren oder einfügen möchte
- submit
- Wird ausgelöst, wenn submit-Button gedrückt wird um Formular abzuschicken
- Häufig im Einsatz um Formular zu validieren vor dem abschicken
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <input id="feld1"> <button type="button">Eingabe</button> </form> <script> function nachricht() { alert("Buchstabe eingegeben: " + feld1.value); } /* * reagiert auf Eingabe in das Input Feld */ feld1.oninput = nachricht; </script> </body> </html>
Spezielle Methoden für Formularelemente
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <p><input id="feld1" value="Formularfeld 1"> </p> <p><input id="feld2" value="Formularfeld 2"></p> <button id="btn1" type="button">Feld 1 Fokus</button> <button id="btn2" type="button">Feld 2 Fokus</button> </form> <script> function fokus1() { // leert zuerst das Input Feld und //setzt dann den Fokus darauf feld1.value = ""; feld1.focus(); } function fokus2() { feld2.value = ""; feld2.focus(); } btn1.onclick = fokus1; btn2.onclick = fokus2; </script> </body> </html>
Eingaben der Formularfelder überprüfen – Anwendungsbeispiel
<body> <form id="formular" action="fertig.html" method="GET" onsubmit="return auswerten()"> <div class="form-row"> <label for="inputname">Name</label> <input id="inputname" name="name"> </div> <div class="form-row"> <label for="inputmail">E-Mail</label> <input id="inputmail" name="mail"> </div> <div class="form-row"> <label for="inputalter">Alter</label> <input id="inputalter" name="alter"> </div> <button type="submit">Absenden</button> </form> <script> function auswerten() { if (inputname.value == "") { alert("Gib einen Namen ein"); inputname.focus(); return false; } if (!inputmail.value.includes('@')) { alert("Gib eine Mailadresse ein"); inputmail.focus(); return false; } if (inputalter.value == "") { alert("Gib ein Alter ein"); inputalter.focus(); return false; } let zahl = true; console.log(inputalter.value.length); for (let i = 0; i < inputalter.value.length; ++i) { if (inputalter.value.charAt(i) < "0" || inputalter.value.charAt(i) > "9") { zahl = false; } } if (!zahl) { alert("Gib eine Zahl ein"); inputalter.focus(); return false; } return true; } </script> </body>
Vollständige Liste an vordefinierten Objekten in JS
https://www.w3schools.com/jsref/
Location
- Das location-Objekt ist vom document-Objekt abgeleitet
- vollständige Bezeichnung deshalb: window.document.location
- der Zusatz window ist aber nicht notwendig
- Das Objekt nimmt die URL der Seite auf und ermöglicht es, sie zu beeinflussen
- Beispiele:
- location.host => so lässt sich der Hostname abrufen
- location.protocol => das verwendete Protokoll
- reload() => lädt die Seite neu
- Beispiele:
location.href
<body> <p id="absatz"></p> <button type="button" id="btn">Zur neuen Seite</button> <script> function laden() { // Adresse der Seite ist unter location.href verfügbar // hier wird der Besucher gleich auf die Seite // weitergeleitet ohne das dieser einen Link klickt // es reicht mit der Maus über den Button zu fahren location.href = "stop.html"; } document.getElementById("absatz").innerHTML = location.href; btn.onmouseover = laden; </script> </body>
location
<body> <form method="GET" action="js.html"> <input type="text" name="frage" placeholder="frag was"> <button type="submit">Abschicken</button> </form> <p id="absatz"></p> <script> "use strict"; // für Formulare die mit GET-Methode abeschickt werden // ruft mit search-Attribut Teil der URL // mit Formularinhalten ab let str = location.search; // dann wird mit substr() das Fragezeichen entfernt // das zu beginn der Zeichenkette steht // das Fragezeichen steht immer an erster // Stelle deshalb substr(1) str = str.substr(1); // In der URL sind einzelne Suchwörter durch das &- // Zeichen miteinander verbunden // diese voneinander trennen => split()-Methode let arr = str.split('&'); for (let i = 0; i < arr.length; i++) { arr[i] = arr[i].split('='); } let inhalt = ""; for (let wert of arr) { inhalt += wert[0] + ": " + wert[1] + "<br>"; } // decodeURIComponent wird benötigt um // zb das @ Zeichen richtig darzustellen document.getElementById("absatz").innerHTML = decodeURIComponent(inhalt); </script> </body>
Images
- Informationen über enthaltene Bilder abrufen oder verändern
- document.images => enthält alle Bilder, die auf der Seite enthalten sind
- document.images[0] => auf einzelne Bilder zugreifen (Position im Array angeben)
- document.images.length => gibt an wie viele Bilder auf der Seite sind
- Höhe und Breite auslesen mit: heigth und length
<body> <img src="beispiel.jpg"> <button type="button" id="btn">Bild tauschen</button> <script> "use strict"; function tauschen() { document.images[0].src = "bild2.jpg"; } btn.onclick = tauschen; </script> </body>
Style
- CSS Styles verändern und setzen
- Syntax: element.style.cssPropery(backGround, fontSize,..)
<body> <div id="div"> <p id="absatz">Hier steht ein Absatz</p> </div> <button type="button" onclick="hintergrund()">Layout verändern</button> <script> function hintergrund() { document.getElementById("absatz").style.background = "red"; document.getElementById("absatz").style.fontSize = "30px"; document.getElementById("absatz").style.color = "white"; document.getElementById("absatz").style.width = "150px"; document.getElementById("absatz").style.border = "3px solid blue"; } </script> </body>
Quelle: JavaScript Programmieren für Einsteiger ISBN: 978-3-96645-016-4