Difference between revisions of "JavaScript 1 Document Objekt"
Jump to navigation
Jump to search
(21 intermediate revisions by 2 users not shown) | |||
Line 64: | Line 64: | ||
innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags => | innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags => | ||
Überschrift 2 ändert sich zu neue Überschrift | Überschrift 2 ändert sich zu neue Überschrift | ||
in diesem Fall, da es nur Text ist, | |||
in diesem Fall, da es nur Text ist, sollte man statt .innerHTML .innerText oder .textContent verwenden. | |||
*/ | */ | ||
</script> | </script> | ||
Line 80: | Line 80: | ||
</head> | </head> | ||
<body> | <body> | ||
<h1 id=" | <h1 id="heading1"></h1> | ||
<h2 id=" | <h2 id="heading2"></h2> | ||
<p id=" | <p id="paragraph"></p> | ||
<script> | <script> | ||
/* | /* | ||
getElementById greift auf den Tag mit der entsprechenden ID zu | getElementById greift auf den Tag mit der entsprechenden ID zu | ||
*/ | */ | ||
document.getElementById(" | document.getElementById("heading1").innerText = "JavaScript ist cool"; | ||
document.getElementById(" | document.getElementById("heading2").innerText = "Seite mit generierten Inhalten"; | ||
document.getElementById(" | document.getElementById("paragraph").innerHTML = "Hier steht ein Absatz mit einem" + | ||
" <strong>fett gedruckten</strong>Bereich."; | " <strong>fett gedruckten</strong>Bereich."; | ||
</script> | </script> | ||
Line 112: | Line 112: | ||
<title>Übungen</title> | <title>Übungen</title> | ||
</head> | </head> | ||
<body> <input id=" | <body> <input id="input-field"> | ||
<script> | <script> | ||
// über value-Attribut lässt sich ein | // über value-Attribut lässt sich ein | ||
// beliebiger Text in das Feld einfügen | // beliebiger Text in das Feld einfügen | ||
document.getElementById(" | document.getElementById("input-field").value = "JavaScript Kurs"; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 129: | Line 129: | ||
<title>Übungen</title> | <title>Übungen</title> | ||
</head> | </head> | ||
<body> <input id=" | <body> <input id="input-field"> | ||
<!-- onclick-Funktion aktiviert die JS Funktion --> | <!-- onclick-Funktion aktiviert die JS Funktion --> | ||
<button type="button" onclick=" | <button type="button" onclick="readValue()">Weiter</button> | ||
<script> | <script> | ||
function | function readValue() { | ||
let inhalt = document.getElementById(" | let inhalt = document.getElementById("input-field").value; | ||
alert( | alert(content); | ||
} | } | ||
</script> | </script> | ||
Line 154: | Line 154: | ||
<script> | <script> | ||
// Programm fordert User auf einen Link einzugeben | // Programm fordert User auf einen Link einzugeben | ||
let | let adress = prompt("Gib eine Linkadresse ein."); | ||
// eingegebener Link wird als href-Attribut in den <a> Tag geschrieben | // eingegebener Link wird als href-Attribut in den <a> Tag geschrieben | ||
document.getElementById("link").href = adresse; | document.getElementById("link").href = adresse; | ||
// eingegebener Link wird innerhalb der <a> Tags geschrieben | // eingegebener Link wird innerhalb der <a> Tags geschrieben | ||
document.getElementById("link").innerHTML = | document.getElementById("link").innerHTML = adress; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 201: | Line 201: | ||
<body> | <body> | ||
<form name="formular"> | <form name="formular"> | ||
<select id=" | <select id="selection-list"> | ||
<option value=" | <option value="selection1">Wert 1</option> | ||
<option value=" | <option value="selection2">Wert 2</option> | ||
<option value=" | <option value="selection3">Wert 3</option> | ||
</select> | </select> | ||
</form> | </form> | ||
<script> | <script> | ||
const selectionList = document.getElementById('selection-list'); | |||
// Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen | // Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen | ||
selectionList.selectedIndex = 2; | |||
// Möglichkeit 2 | // Möglichkeit 2 | ||
selectionList.options[2].selected = true; | |||
// Möglichkeit 3 | // Möglichkeit 3 | ||
selectionList.value = "selection3"; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 232: | Line 233: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="form"> | ||
<input id=" | <input id="field1" value="Form Field 1"> | ||
</form> | </form> | ||
<script> | <script> | ||
let | let isVisible = false; | ||
function | function message() { | ||
if (! | if (!isVisible) { | ||
alert("Gib deinen Namen ein"); | alert("Gib deinen Namen ein"); | ||
isVisible= true; | |||
} | } | ||
} | } | ||
Line 249: | Line 250: | ||
* Wenn Fokus entfernt wird, kommt es zum blur-Event | * Wenn Fokus entfernt wird, kommt es zum blur-Event | ||
*/ | */ | ||
document.getElementById("field1").onfocus = message; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 265: | Line 266: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="form"> <input id="field1"> | ||
<button type="button">Eingabe</button> | <button type="button">Eingabe</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function message() { | ||
if ( | if (field1.value == "") { | ||
alert("Gib deinen Namen ein"); | alert("Gib deinen Namen ein"); | ||
} | } | ||
Line 278: | Line 279: | ||
* tritt die Fehlermeldung auf | * tritt die Fehlermeldung auf | ||
*/ | */ | ||
document.getElementById("field1").onblur = message; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 299: | Line 300: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="form"> | ||
<input id=" | <input id="field1"> | ||
<button type="button">Eingabe</button> | <button type="button">Eingabe</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function message() { | ||
alert("Buchstabe eingegeben: " + | alert("Buchstabe eingegeben: " + field1.value); | ||
} | } | ||
/* | /* | ||
* reagiert auf Eingabe in das Input Feld | * reagiert auf Eingabe in das Input Feld | ||
*/ | */ | ||
field1.oninput = message; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 325: | Line 326: | ||
<body> | <body> | ||
<form name="formular"> | <form name="formular"> | ||
<p><input id=" | <p><input id="field1" value="Formularfeld 1"> </p> | ||
<p><input id=" | <p><input id="field2" value="Formularfeld 2"></p> | ||
<button id="btn1" type="button">Feld 1 Fokus</button> | <button id="btn1" type="button">Feld 1 Fokus</button> | ||
<button id="btn2" type="button">Feld 2 Fokus</button> | <button id="btn2" type="button">Feld 2 Fokus</button> | ||
Line 334: | Line 335: | ||
// leert zuerst das Input Feld und | // leert zuerst das Input Feld und | ||
//setzt dann den Fokus darauf | //setzt dann den Fokus darauf | ||
field1.value = ""; | |||
field1.focus(); | |||
} | } | ||
function fokus2() { | function fokus2() { | ||
field2.value = ""; | |||
field2.focus(); | |||
} | } | ||
btn1.onclick = fokus1; | btn1.onclick = fokus1; | ||
Line 351: | Line 352: | ||
<pre> | <pre> | ||
<body> | <body> | ||
<form id=" | <form id="form" action="evalData.html" method="GET" onsubmit="return eval()"> | ||
<div class="form-row"> | <div class="form-row"> | ||
<label for="inputname">Name</label> | <label for="inputname">Name</label> | ||
Line 361: | Line 362: | ||
</div> | </div> | ||
<div class="form-row"> | <div class="form-row"> | ||
<label for=" | <label for="inputage">Alter</label> | ||
<input id=" | <input id="inputage" name="age"> | ||
</div> | </div> | ||
<button type="submit">Absenden</button> | <button type="submit">Absenden</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function eval() { | ||
if (inputname.value == "") { | if (inputname.value == "") { | ||
alert("Gib einen Namen ein"); | alert("Gib einen Namen ein"); | ||
Line 378: | Line 379: | ||
return false; | return false; | ||
} | } | ||
if ( | if (inputage.value == "") { | ||
alert("Gib ein Alter ein"); | alert("Gib ein Alter ein"); | ||
inputage.focus(); | |||
return false; | return false; | ||
} | } | ||
let | let number = true; | ||
console.log( | console.log(inputage.value.length); | ||
for (let i = 0; i < | for (let i = 0; i < inputage.value.length; ++i) { | ||
if ( | if (inputage.value.charAt(i) < "0" || | ||
inputage.value.charAt(i) > "9") { | |||
number= false; | |||
} | } | ||
} | } | ||
if (!zahl) { | if (!zahl) { | ||
alert("Gib eine Zahl ein"); | alert("Gib eine Zahl ein"); | ||
inputage.focus(); | |||
return false; | return false; | ||
} | } | ||
Line 422: | Line 423: | ||
<button type="button" id="btn">Zur neuen Seite</button> | <button type="button" id="btn">Zur neuen Seite</button> | ||
<script> | <script> | ||
function | function loadPage() { | ||
// Adresse der Seite ist unter location.href verfügbar | // Adresse der Seite ist unter location.href verfügbar | ||
// hier wird der Besucher gleich auf die Seite | // hier wird der Besucher gleich auf die Seite | ||
Line 430: | Line 431: | ||
} | } | ||
document.getElementById("absatz").innerHTML = location.href; | document.getElementById("absatz").innerHTML = location.href; | ||
btn.onmouseover = | btn.onmouseover = loadPage; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 439: | Line 440: | ||
<body> | <body> | ||
<form method="GET" action="js.html"> | <form method="GET" action="js.html"> | ||
<input type="text" name=" | <input type="text" name="question" placeholder="frag was"> | ||
<button type="submit">Abschicken</button> | <button type="submit">Abschicken</button> | ||
</form> | </form> | ||
<p id=" | <p id="paragraph"></p> | ||
<script> | <script> | ||
"use strict"; | "use strict"; | ||
// für Formulare die mit GET-Methode abeschickt werden | // für Formulare die mit GET-Methode abeschickt werden | ||
// ruft mit search-Attribut Teil der URL | // ruft mit search-Attribut Teil der URL | ||
// mit Formularinhalten ab | // mit Formularinhalten ab | ||
let str = location.search; | let str = location.search; | ||
// dann wird mit substr() das Fragezeichen entfernt | // dann wird mit substr() das Fragezeichen entfernt | ||
Line 453: | Line 455: | ||
// das Fragezeichen steht immer an erster | // das Fragezeichen steht immer an erster | ||
// Stelle deshalb substr(1) | // Stelle deshalb substr(1) | ||
str = str.substr(1); | str = str.substr(1); | ||
// In der URL sind einzelne Suchwörter durch das &- | // In der URL sind einzelne Suchwörter durch das &- | ||
// Zeichen miteinander verbunden | // Zeichen miteinander verbunden | ||
// diese voneinander trennen => split()-Methode | // diese voneinander trennen => split()-Methode | ||
let arr = str.split('&'); | let arr = str.split('&'); | ||
for (let i = 0; i < arr.length; i++) { | for (let i = 0; i < arr.length; i++) { | ||
arr[i] = arr[i].split('='); | arr[i] = arr[i].split('='); | ||
} | } | ||
let | let content = ""; | ||
for (let | for (let value of arr) { | ||
content += value[0] + ": " + value[1] + "<br>"; | |||
} | } | ||
document.getElementById("paragraph").innerHTML = content; | |||
document.getElementById(" | |||
</script> | </script> | ||
</body> | </body> | ||
Line 486: | Line 488: | ||
"use strict"; | "use strict"; | ||
function | function changeImage() { | ||
document.images[0].src = "bild2.jpg"; | document.images[0].src = "bild2.jpg"; | ||
} | } | ||
btn.onclick = | btn.onclick = changeImage; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 500: | Line 502: | ||
<body> | <body> | ||
<div id="div"> | <div id="div"> | ||
<p id=" | <p id="paragraph">Hier steht ein Absatz</p> | ||
</div> | </div> | ||
<button type="button" onclick=" | <button type="button" onclick="background()">Layout verändern</button> | ||
<script> | <script> | ||
function | function background() { | ||
document.getElementById(" | document.getElementById("paragraph").style.background = "red"; | ||
document.getElementById(" | document.getElementById("paragraph").style.fontSize = "30px"; | ||
document.getElementById(" | document.getElementById("paragraph").style.color = "white"; | ||
document.getElementById(" | document.getElementById("paragraph").style.width = "150px"; | ||
document.getElementById(" | document.getElementById("paragraph").style.border = "3px solid blue"; | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</pre> | </pre> | ||
Latest revision as of 12:21, 28 March 2024
Das Document Objekt[edit]
- 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[edit]
<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, sollte man statt .innerHTML .innerText oder .textContent verwenden. */ </script> </body> </html>
Auf einzelne Elemente der Seite gezielt zugreifen[edit]
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <h1 id="heading1"></h1> <h2 id="heading2"></h2> <p id="paragraph"></p> <script> /* getElementById greift auf den Tag mit der entsprechenden ID zu */ document.getElementById("heading1").innerText = "JavaScript ist cool"; document.getElementById("heading2").innerText = "Seite mit generierten Inhalten"; document.getElementById("paragraph").innerHTML = "Hier steht ein Absatz mit einem" + " <strong>fett gedruckten</strong>Bereich."; </script> </body> </html>
Weitere Gestaltungsmöglichkeiten[edit]
- .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:[edit]
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <input id="input-field"> <script> // über value-Attribut lässt sich ein // beliebiger Text in das Feld einfügen document.getElementById("input-field").value = "JavaScript Kurs"; </script> </body> </html>
Beispiel 2:[edit]
<html> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <input id="input-field"> <!-- onclick-Funktion aktiviert die JS Funktion --> <button type="button" onclick="readValue()">Weiter</button> <script> function readValue() { let inhalt = document.getElementById("input-field").value; alert(content); } </script> </body> </html>
Beispiel 3:[edit]
<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 adress = 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 = adress; </script> </body> </html>
Formulare mit JavaScript bearbeiten[edit]
Status einer Checkbox verändern[edit]
<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[edit]
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <select id="selection-list"> <option value="selection1">Wert 1</option> <option value="selection2">Wert 2</option> <option value="selection3">Wert 3</option> </select> </form> <script> const selectionList = document.getElementById('selection-list'); // Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen selectionList.selectedIndex = 2; // Möglichkeit 2 selectionList.options[2].selected = true; // Möglichkeit 3 selectionList.value = "selection3"; </script> </body> </html>
Events für Formulare[edit]
- 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[edit]
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="form"> <input id="field1" value="Form Field 1"> </form> <script> let isVisible = false; function message() { if (!isVisible) { alert("Gib deinen Namen ein"); isVisible= true; } } /* * Wenn ein Event auf Seite fokussiert wird, * tritt das focus-Event ein * Wenn Fokus entfernt wird, kommt es zum blur-Event */ document.getElementById("field1").onfocus = message; </script> </body> </html>
Beispiel für blur[edit]
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="form"> <input id="field1"> <button type="button">Eingabe</button> </form> <script> function message() { if (field1.value == "") { alert("Gib deinen Namen ein"); } } /* * Wenn der Input verlassen wird * tritt die Fehlermeldung auf */ document.getElementById("field1").onblur = message; </script> </body> </html>
Weitere wichtige Events[edit]
- 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="form"> <input id="field1"> <button type="button">Eingabe</button> </form> <script> function message() { alert("Buchstabe eingegeben: " + field1.value); } /* * reagiert auf Eingabe in das Input Feld */ field1.oninput = message; </script> </body> </html>
Spezielle Methoden für Formularelemente[edit]
<html lang="de"> <head> <meta charset="UTF-8"> <title>Übungen</title> </head> <body> <form name="formular"> <p><input id="field1" value="Formularfeld 1"> </p> <p><input id="field2" 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 field1.value = ""; field1.focus(); } function fokus2() { field2.value = ""; field2.focus(); } btn1.onclick = fokus1; btn2.onclick = fokus2; </script> </body> </html>
Eingaben der Formularfelder überprüfen – Anwendungsbeispiel[edit]
<body> <form id="form" action="evalData.html" method="GET" onsubmit="return eval()"> <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="inputage">Alter</label> <input id="inputage" name="age"> </div> <button type="submit">Absenden</button> </form> <script> function eval() { 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 (inputage.value == "") { alert("Gib ein Alter ein"); inputage.focus(); return false; } let number = true; console.log(inputage.value.length); for (let i = 0; i < inputage.value.length; ++i) { if (inputage.value.charAt(i) < "0" || inputage.value.charAt(i) > "9") { number= false; } } if (!zahl) { alert("Gib eine Zahl ein"); inputage.focus(); return false; } return true; } </script> </body>
Vollständige Liste an vordefinierten Objekten in JS[edit]
https://www.w3schools.com/jsref/
Location[edit]
- 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[edit]
<body> <p id="absatz"></p> <button type="button" id="btn">Zur neuen Seite</button> <script> function loadPage() { // 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 = loadPage; </script> </body>
location[edit]
<body> <form method="GET" action="js.html"> <input type="text" name="question" placeholder="frag was"> <button type="submit">Abschicken</button> </form> <p id="paragraph"></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 content = ""; for (let value of arr) { content += value[0] + ": " + value[1] + "<br>"; } document.getElementById("paragraph").innerHTML = content; </script> </body>
Images[edit]
- 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 changeImage() { document.images[0].src = "bild2.jpg"; } btn.onclick = changeImage; </script> </body>
Style[edit]
- CSS Styles verändern und setzen
- Syntax: element.style.cssPropery(backGround, fontSize,..)
<body> <div id="div"> <p id="paragraph">Hier steht ein Absatz</p> </div> <button type="button" onclick="background()">Layout verändern</button> <script> function background() { document.getElementById("paragraph").style.background = "red"; document.getElementById("paragraph").style.fontSize = "30px"; document.getElementById("paragraph").style.color = "white"; document.getElementById("paragraph").style.width = "150px"; document.getElementById("paragraph").style.border = "3px solid blue"; } </script> </body>