DOM -Wirkmethoden in JavaScript
Der Aufruf einer Wirkmethode verändert etwas. Der Aufruf einer Wertmethode hat einen Wert (einen anderen Wert als «undefined»).
Das DOM enthält auch Wirkmethoden, die ihr Objekt verändern können.
- Beispieldokumente für diese Lektion
userpage.fu-berlin.de/~ram/pub/xhtml_jf47ht81Ht/723551
userpage.fu-berlin.de/~ram/pub/html_jf47ht81Ht/723551
- Dokument
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">html { font-family: Sans-Serif; font-size: 20vmin; font-weight: bold; }
[href] { background-color: lavender; }
.r { color: palegreen; }</style></head><body>
<p>0 <a id="a">1</a> 2</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>
- Anmerkungen
- .r = gilt für alle Elemente mit einer Klasse »r«
- vmin = 1 Prozent der kleinsten Seite des Fensters
- [href] = selektiert Elemente mit einem href-Attribut
Wir definieren zunächst eine Abkürzung für den Anker.
- Auswertung
anchor = document.getElementById( "a" )
<a id="a">
Mit »setAttribute« kann der Name und Wert eines Attributes festgelegt werden. Falls es noch kein Attribut mit dem angegebenen Namen gibt, wird es in der Regel angelegt.
- Auswertung
anchor.setAttribute( "href", "http://www.example.com" )
undefined
- Aussprachehinweis
- attribute (noun) ˈætrəˌbjut (d)
Mit »hasAttribute« kann ausgedrückt werden, daß ein Attribut mit dem angegebenen Namen im Kontext vorhanden ist. Der sich ergebende Wert ist ein Wahrheitswert, der angibt, ob diese Aussage wahr ist.
- Auswertung
anchor.hasAttribute( "href" )
true
Mit »getAttribute« kann der Wert eines Attributs mit dem angegebenen Namen ausgedrückt werden.
- Auswertung
anchor.getAttribute( "href" )
"http://www.example.com"
Mit »removeAttribute« kann eine Attribut mit dem angegebenen Namen entfernt werden.
- Auswertung
anchor.removeAttribute( "href" )
undefined
- Auswertung
anchor.hasAttribute( "href" )
false
Übungsfragen
? Übungsfragen
Was ist der Kontext bei den folgenden Aufrufen?
Was sind die Argumente bei den folgenden Aufrufen?
- »document.getElementById( "a" )«
- »anchor.setAttribute( "href", "http://www.example.com" )«
? Übungsfragen
Welche der folgenden Funktionensnamen stehen in den Beispielen dieser Lektion für Wirkfunktionen?
Welche der folgenden Funktionensnamen stehen in den Beispielen dieser Lektion für Wertfunktionen?
Welche der folgenden Funktionensnamen stehen in den Beispielen dieser Lektion für Lesefunktionen (Funktionen, deren Verhalten durch den Zustand der Umgebung beeinflußt wird)?
- Der Aufruf einer Wirkfunktion verändert etwas.
- Der Aufruf einer Wertfunktion hat einen Wert (einen anderen Wert als «undefined»).
- »setAttribute«
- »hasAttribute«
- »getAttribute«
- »removeAttribute«
Übungsaufgaben
Übungsaufgaben
Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.
Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.
Main.html<style>
</style>
<script>
</script>
/ Übungsaufgabe
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
- Lassen Sie sich das obige Dokument in einem Browser anzeigen.
- Geben Sie dann die oben vorgestellten Anweisungen in die Konsole ein und kontrollieren Sie den Erfolg. Auch die folgenden Aufgabenteile sollen durch Eingaben in die Konsole erledigt werden.
- Verwenden Sie JavaScript, um ein title-Attribut zu dem Anker hinzuzufügen. Kontrollieren Sie den Erfolg mit »outerHTML«. (Bei vielen Browsern wird der Wert (Text) des title-Attributs angezeigt, wenn man die Spitze des Mauszeigers über das Element mit jenem Attribut positioniert. )
- Ändern Sie den Text des title-Attributs und kontrollieren Sie den Erfolg.
- Entfernen Sie das title-Attribut schließlich wieder und kontrollieren Sie den Erfolg.