DOM

Transcription

DOM

Prof. Dr. Th. Letschert
CS1024
Internetbasierte Systeme
Bachelor of Science (Informatik)
Clientseitige Verarbeitung II
DOM : Document Object Model
DOM
http://www.w3.org/DOM
DOM – Document Object Model
DOM ist ein W3C-Standard
Document
Es geht um den Zugriff auf Dokumente
Object
Die Dokumente sind baumartig in Objekt-Hierarchien organisiert. Dokumente sind
typischerweise HTML oder XML
Model = universelle Schnittstelle
Der Standard beschreibt ein „Modell“ von strukturierten Dokumenten, die sich als universelle,
Sprach- und System-unabhängige Schnittstelle zum Dokument zeigt.
IBS - DOM
2
DOM
DOM – Um was geht es
Dom definiert wir – lesend und/oder schreibend - auf Dokumente zugegriffen werden kann
Die Definition ist Browser unabhängig
Die Definition bezieht sich nicht nur auf HTML
<script type="text/javascript">
function fib(x) {
if (x < 1) return 0;
if (x == 1 || x == 2) return 1;
return fib(x-1) + fib(x-2);
}
Dokument / darin alle Formulare / davon das erste (Index 0)
Dokument / darin Element mit Id „ausgabe“ / davon der HTML-code
window.onload = function(){
document.forms[0].elements[0].onkeyup = function(){
document.getElementById("ausgabe").innerHTML =
fib(document.forms[0].elements[0].value);
}
}
</script>
Dokument / darin alle Formulare / davon das erste (Index 0) / davon der Wert
DOM Ausdrücke navigieren im Dokument
Das Dokument wird dabei als Baum aufgefasst
IBS - DOM
3
DOM
DOM – Beispiel
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dom Beispiel</title>
</head>
<body>
<h3>DOM Beispiel</h3>
<form action= "" >
<input type= "password" name= "Passwort" />
<input type= "button" value= "OK" id= "okButton" />
</form>
<script type= "text/javascript" >
document.getElementById( "okButton").onclick = function() {
alert( "Das soll ein Passwort sein: "
+ document.getElementsByName( "Passwort")[0].value );
};
</script>
</body>
</html>
Was passiert hier?
IBS - DOM
4
DOM
DOM – Beispiel
<html>
<head>
</head>
<body>
<form action= "" >
</form>
document.getElementById( "okButton").onclick
= function() {
return
function (pwdElement) {
alert( "Das soll ein Passwort sein: " + pwdElement.value );
}
}(document.getElementsByName( "Passwort")[0]);
</script>
</body>
</html>
Warum funktioniert das NICHT ?
IBS - DOM
5
DOM
DOM – Beispiel
<html>
<head>
</head>
<body>
<form action= "" >
</form>
= function(pwdElement) {
return
function () {
alert( "Das soll ein Passwort sein: " + pwdElement.value );
}
}(document.getElementsByName( "Passwort")[0]);
</script>
</body>
</html>
Und wie ist es hiermit ?
IBS - DOM
6
DOM
DOM – Beispiel
<html>
<head>
</head>
<body>
<form action= "" >
</form>
= function(value) {
return
function () {
alert( "Das soll ein Passwort sein: " + value );
}
}(document.getElementsByName( "Passwort")[0].value);
</script>
</body>
</html>
Und das, geht das auch?
IBS - DOM
7
DOM
DOM – Document Object Model
html
head
<html>
<head> <titel>HTML</titel></head>
<body>
<H2 align="center">Selfhtml</H2>
<p>Details können bei
<a href="http://selfhtml.org">Selfhtml</a>
nachgelesen werden!
</p>
</body>
</html>
body
h2
align
p
Programm:
manipuliert das
Dokument via
DOM-Schnittstelle
a
href
DOM-Schnittstelle
Dokument
Sprachabhängige API, richtet
sich nach der abstrakten
DOM-Schnittstelle
IBS - DOM
8
DOM und JavaScript
DOM und JavaScript
JavaScript implementiert eine DOM-API
JavaScript Programme können auf das geladene HTML-Dokument über eine Implementierung
der DOM-Schnittstelle zugreifen
Beispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DOM Beispiel</title>
</head>
<body>
<h2>Kapitel 1</h2>
<p id="p1">Ganz wichtige Erläuterungen.</p>
<p>Interssante Deatails</p>
DOM-API:
<h2>Kapitel 1</h2>
document: Wurzelknoten
<p>Bla Blabla.</p>
getElementById: Zugriffsmethode
<p>Blubber Blubber.</p>
document.getElementById("p1").onmouseover
=function(){alert("Unbedingt beachten!");}
</script>
</body>
</html>
IBS - DOM
API: Application Programming Interface
DOM-API: konkrete Implementierung der
abstrakten DOM-Schnittstelle
9
DOM und Firefox
DOM - Inspector
Firefox Addon DOM-Inspector
IBS - DOM
10
DOM und Firefox
Firefox Addon DOM-Inspector
Beispiel
IBS - DOM
11
DOM
Dokumentenstruktur
Knoten-Hierarchie: Dokument = Baum von Objekten
Das Dokument wird als Baum von Knoten repräsentiert
Manche Knoten haben Kinder, andere nicht
Interface / Typ
Auf Knoten kann über die Interfaces zugegriffen werden, die er implementiert
Interfaces werden auch Typen genannt
Ein Knoten implementiert i.d.R. mehrere Interfaces (er hat dann „mehrere Typen“)
Interface- / Typ-Hierarchie
Die Interfaces sind hierarchisch geordnet (Vererbung)
Beispielsweise implementieren alle Knoten das
Interface Node, der Wurzelknoten dazu noch das
Interface Document
Node
Document
HTML
DOM ist XML-basiert, umfasst aber
eine Spezialisierung für HTML
HTMLDocument
...
Element
HTMLElement
...
DOM Typ/Interface-Hierarchie
IBS - DOM
12
DOM und JavaScript
https://developer.mozilla.org/en/Gecko_DOM_Reference
http://www.w3.org/TR/DOM-Level-3-Core/core.html
http://www.w3schools.com/jsref
Gecko Implementierung
von JavaScript
Java-/EMCA-Script
Standard
DOM-Standard
IBS - DOM
13
DOM und JavaScript
JavaScript Language Binding
Language-Binding
DOM inklusive der HTML-Spezialisierung ist eine abstrakte Schnittstelle
Jede Programmiersprache, deren Programme via DOM auf Dokumente zugreifen können,
müssen eine DOM-API umfassen
Beispiel: DOM
~> Interface Document
vs. JavaScript ~> Objekt document
DOM definiert ein Interface Document
siehe:
http://www.w3.org/TR/DOM-Level-3-Core/core.html#i-Document
DOM-Standard (sprachunabhängig)
JavaScript Programme können auf ein Objekt document zugreifen
siehe:
http://www.w3schools.com/htmldom/
ECMA-Script Standard
siehe:
https://developer.mozilla.org/en/DOM/document
ECMA-Script Implementierung
IBS - DOM
14
DOM und JavaScript
Methode getElementByID des Interface Document
aus: DOM Interface Spezifikation
Methode getElementByID des document Objekts
aus: Gecko DOM Reference
(Mozilla/JavaScript API/DOM)
IBS - DOM
15
DOM-Zugriffe / Knotenselektion
https://developer.mozilla.org/en/DOM/document
Zugriff auf Knoten
document
Wurzel und Ausgangspunkt für Element-Zugriffe
Zugriff auf Knoten via Zugriffsmethoden



getElementById
getElementsByTagName
getElementsByName
Zugriff auf Knoten via HTML-Collections
Jedes html-Dokument definiert Kollektionen von
Elementen:





...
<form id="ID">
<input type="button"
value="DrückMich!" />
</form>
...
Zugriff auf das Formular alternativ via:
document.forms["ID"]
document.forms[0]
document.getElementById("ID")
document.getElementsByTagName("form")[0]
document.forms
document.images
document.applets (deprecated)
document.links
document.anchors
Beispiel Zugriffsmethoden
auf Elemente dieser Kollektionen kann mit Index
oder Id (oder notfalls auch mit dem Namen)
zugegriffen werden.
IBS - DOM
16
HTML-Collections
Nicht nur document hat properies deren Wert HTML-Collections sind.
Folgende Objekte haben HTML-Collections als Wert:
document
form
table
map
tableSection
row
images, applets, links, forms, anchors
elements,
rows, tBodies,
area,
rows,
cells
<table border="1">
<tr>
<td>row 1, cell
<td>row 1, cell
</tr>
<tr>
<td>row 2, cell
<td>row 2, cell
</tr>
</table>
1</td>
2</td>
1</td>
2</td>
document.getElementsByTagName ("table")[0].rows[0].cells[0]
IBS - DOM
Beispiel Zugriff auf
Elemente von
HTMLCollections
17
this
Zugriff auf das „aktuelle“ Element
this bezieht sich stets auf das Objekt dessen Methode gerade ausgeführt wird.
Das ist:



dasTop-Level Objekt ( window ) auf oberster Ebene in einem Skript
dasTop-Level Objekt ( window ) in einer normalen Funktion
das HTML-Element für den die Funktion als Handler registriert ist, falls die
Funktion ein Handler ist
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>This Beispiel</title>
function changeColor(o) { o.style.color = '#ff0000'; }
</script>
</head>
<body>
<h2>Blub</h2>
<p id="ID">Blubber blubber, bla bla, blind sei der Text</p>
</body>
Beispiel: this in
einem Handler
document.getElementById("ID").onmouseover
= function(){ changeColor(this); }
</script>
</html>
IBS - DOM
18
DOM-Zugriffe / Attribute
Zugriff auf Attribute
Node
Zugriff auf Attribute über die Methode
getAttribute(AttributName)
...
eine Methode des Interface' Element
...
Element
...
...
HTMLElement
...
<p id="anID">Blubber</p>
document.write(document.getElementById("anID").getAttribute("id"));
</script>
Beispiel: getAttribute
IBS - DOM
19
DOM-Zugriffe / Text
Zugriff auf Text
Zugriff über die Property
innerHTML
http://www.w3schools.com/jsref/prop_html_innerhtml.asp
oder
textContent
in DOM-Level 3 property von Node
enthält den HTML-Text eines Elements
<table id="anID">
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>
document.getElementById("anID").innerHTML
document.getElementById("anID").textContent
Beispiel: innerHTML / textContent
IBS - DOM
20
DOM-Zugriffe / Style
Zugriff auf Style-Attribute (nicht auf CSS)
Node
Zugriff über die Property
style
...
eine Methode des Interface' HTMLElement
...
Element
...
...
HTMLElement
...
<h2 style="color:#ff0000">Blub</h2>
document.getElementsByTagName ("h2")[0].style
Beispiel: style property
IBS - DOM
21
DOM-Zugriffe / Baum-orientierte Zugriffe
Zugriff via Node- / Element-Interface
Node
Zugriff über die Properties
attributes, childNodes,
firstChild, lastChild,
nextSibling,
previousSibling,
...
...
Document
...
Methoden zur Modifikation
appendChild,
replacechild,
setAttributeNode,
removeChild
...
Element
...
...
HTMLElement
...
firstChild
nextSibling
lastChild
Document-Interface
Erzeugungs-Methoden
createAttribute,
createElement,
createTextNode,
...
previousSibling
IBS - DOM
22
DOM-Zugriffe / Baum-orientierte Zugriffe
Beispiel
<html>
<head>
<title>Baum Operationen</title>
</head>
<body>
var h1 = document.createElement( "h1" );
var ueberschrift = document.createTextNode ( "Eine Generierte Html Seite" );
var textFarbe = document.createAttribute ( "style" );
textFarbe.nodeValue= "color:blue" ;
h1.appendChild(ueberschrift);
h1.setAttributeNode(textFarbe);
Text ist ein
Unterknoten vom
Typ TextNode
var p = document.createElement( "p" );
var paragraph = document.createTextNode ( "Blindtext macht nicht blind!"
Stile);sind
p.appendChild(paragraph);
document.getElementsByTagName( "body" )[0].appendChild(h1);
Eigenschaften von
Knoten
document.getElementsByTagName ( "body" )[0].appendChild(p);
</script>
</body>
</html>
IBS - DOM
23
Browser-Objekte
Browser-Objekte
Zugriff in JavaScript auf Objekte die vom Browser verwaltet
werden, aber nicht zum DOM-Baum des Dokuments gehören.
Diese Browser-Objekte sind nicht Bestandteil des EMCA-Script
Standards und schon gar nicht des DOM-Standards,
sie werden aber von allen relevanten Browsern unterstützt.
http://www.w3schools.com/jsref
Window
repräsentiert ein Browser-Fenster
Navigator
repräsentiert den Browser
Screen
repräsentiert den Bildschirm
History
repräsentiert die Besuchs-Historie (besuchte URLs)
Location
repräsentiert die aktuelle URL
IBS - DOM
24
Browser-Objekte
Window
Zugriff in JavaScript auf Objekte die vom Browser verwaltet werden, aber nicht zum DOM-Baum
des Dokuments gehören.
Properties (Beispiele)
name
location
document
...
Fenstername
URL
Das geladene Dokument
Methoden (Beispiele)
open
alert
prompt
back
scrollBy
...
Neues BrowserFenster öffnen
Anzeigefenster öffnen
Eingabe für Eingabefeld abfragen
zurück zum vorherigen Dokument
Fensterinhalt verschieben
IBS - DOM
25
Browser-Objekte
Window-Beispiel
Neues Browser-Fenster öffnen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Beispiel Window</title>
function goMNI() {
open("http://website.mni.fh-giessen.de/",
"",
"width=1200,height=800");
}
</script>
</head>
<body>
<input type="button" value="Öffne MNI..." onclick="goMNI()"/>
</body>
</html>
IBS - DOM
26
Browser-Objekte
Navigator
Zugriff auf Informationen über den Browser.
Properties (Beispiele)
appCodeName
cookieEnabled
language
plugins
...
Name des Browsers
Ist das Setzen von Cookies erlaubt?
Eingestellte Sprache
Installierte Browser-Plugins
Methoden (Beispiele)
javaEnabled
...
Java aktiviert? (Für Applets, oder Java FX)
IBS - DOM
27
Browser-Objekte
Navigator-Beispiel
<html>
<head>
<title>Navigator Beispiel</title>
</head>
<body>
<h2>Java Unterstützung</h2>
if (navigator.javaEnabled()) {
document.write("Vorhanden");
} else {
document.write("Nicht vorhanden");}
</script>
<h2>Plugins</h2>
for (var i=0; i< navigator.plugins.length; i++) {
document.write(navigator.plugins[i].name +"<br/>");
}
</script>
</body>
</html>
IBS - DOM
28
DHTML
DHTML – Dynamic HTML
DHTML
Informale Bezeichnung für die dynamische Modifikation von Web-Seiten
mit Hilfe von CSS und JavaScript
Varianten
Textmodifikation (JavaScript)
Animation durch Austausch von Bildern (JavaScript)
Stil- und Layout-Modifikationen (JavaScript + CSS)
IBS - DOM
29
DHTML
DHTML Beispiel
Textmodifikation via JavaScript
<html><head>
<title>Dynamisches HTML</title>
</head><body>
<h2>DHTML</h2>
<p id="p"> Maffeo Barberini: Die Welt steht still!</p>
<button onclick="textWechsel()">Weiter</button>
</body>
var t = 0;
var t0 = "Maffeo Barberini: Die Welt steht still!";
var t1 = "Galileo Galileo: ... und sie bewegt sich doch!";
var pn = document.getElementById("p").firstChild;
function textWechsel() {
if (t == 0) {
t=1; pn.nodeValue = t1;
} else {
t=0; pn.nodeValue = t0;}
}
</script>
</html>
IBS - DOM
30
DHTML
DOM: Style Objekt
Repräsentiert eine Style Anweisung.
Hat eine Vielzahl von Properties die nach Kategorien geordnet
werden können:
Property-Kategorien
Background
Hintergrund beeinflussen
Border and Margin
Rand, Spielraum (Margin)
Layout
Layout
List
Listenformat
Positioning
Positionierung
Printing
Textlayout
Table
Tabellenlayout
Text
Zeichenfarbe, Schriftart, ...
http://www.w3schools.com/jsref/dom_obj_style.asp
https://developer.mozilla.org/en/DOM/Using_dynamic_styling_information
IBS - DOM
31
DHTML
DOM: Style Objekt, Beispiel
<html><head>
<title>DHTML mit Stil</title>
<style type="text/css">
#p { border: solid grey; }
</style>
</head><body>
<h2 id="h2">DHTML mit Stil</h2>
<p id="p">Zu viel Blindtext macht taub!</p>
</body>
var textFarbeBlau = document.createAttribute("style");
textFarbeBlau.nodeValue="color:blue; border: solid green;";
var textFarbeGrau = document.createAttribute("style");
textFarbeGrau.nodeValue="color:darkgrey";
document.getElementById("h2").onmouseover = function() {
document.getElementById("p").setAttributeNode(textFarbeBlau);
}
document.getElementById("h2").onmouseout = function() {
document.getElementById("p").setAttributeNode(textFarbeGrau);
}
</script>
</html>
IBS - DOM
32
DHTML
DOM mit CSS-Styles
Der Phantasie, und dem Spieltrieb sind kaum Grenzen gesetzt!
IBS - DOM
33

DOM

Transcription

Similar documents

ansys 14.0

Elemente einer Didaktik für den bilingualen Sachfachunterricht

Netzwerkeinstellung(nur PT