SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
 |
node |
|
Eigenschaften:
Methoden:
|
 | |
Das node-Objekt ist das zentrale Objekt des Document Object Models (DOM) (node = Knoten). Hintergrund ist das Modell, dass ein Auszeichnungssprachen-Dokument, egal ob in HTML oder einer anderen, XML-basierten Auszeichnungssprache geschrieben, aus einem Baum von Knoten besteht. Um sich mit diesem Modell näher zu beschäftigen, können Sie im XML-Kapitel dieses Dokuments den Abschnitt 
Baumstruktur und Knoten einer XML-Datei lesen.
Jedes Element, jedes Attribut und alle Zeichendaten stellen eigene Knoten dar. Diese Knoten bilden die Baumstruktur. Das node-Objekt stellt Eigenschaften und Methoden bereit, um auf die einzelnen Knoten zuzugreifen, egal, wie tief diese Knoten in der Baumstruktur liegen.
Das node-Objekt stellt damit die allgemeinere und für alle XML-gerechten Sprachen gültige Variante dessen dar, was die HTML-Elementobjekte speziell für HTML darstellen. Sie können in JavaScripts, die in HTML-Dateien notiert oder eingebunden sind, sowohl mit den HTML-Elementobjekten als auch mit dem node-Objekt arbeiten. Manches ist über die HTML-Elementobjekte bequemer zu lösen, für andere Aufgaben eignet sich wiederum das node-Objekt besser. Das node-Objekt gilt unter Puristen allerdings als das "reinere" DOM, eben weil es nicht auf HTML beschränkt ist.
Um auf die Eigenschaften und Methoden des node-Objekts zugreifen zu können, benötigen Sie einen Knoten. Um auf vorhandene Knoten im Dokument zuzugreifen, werden die Methoden des document-Objekts getElementById, getElementsByName und getElementsByTagName verwendet. Ausgehend davon können Sie die Attributknoten, Textknoten und weitere Element-Kindknoten eines Elements ansprechen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<h1 id="Ueberschrift" align="center">Knoten in der <i>Baumstruktur</i></h1>
<script type="text/javascript">
<!--
Elementknoten = document.getElementById("Ueberschrift");
WertErsterKindknoten = Elementknoten.firstChild.nodeValue;
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + WertErsterKindknoten + "<\/b>");
//-->
</script>
</body></html>
|
Die Beispieldatei enthält eine Überschrift erster Ordnung mit Text, von dem ein Teil wiederum als kursiv ausgezeichnet ist. In dem JavaScript, das unterhalb davon notiert ist, wird zunächst mit document.getElementById("Ueberschrift") (ohne weitere Eigenschaft oder Methode dahinter) auf das h1-Element der Überschrift zugegriffen. Der Rückgabewert von getElementById() ist das Knotenobjekt der Überschrift. Der Rückgabewert wird im Beispiel in der Variablen Elementknoten gespeichert. Diese Variable speichert also einen gültigen Knoten des Dokuments, und auf die Variable sind daher die Eigenschaften und Methoden des node-Objekts anwendbar. Im Beispiel wird mit Elementknoten.firstChild.nodeValue der Wert des ersten Kindknotens der Überschrift ermittelt. Dessen Wert wird schließlich mit document.write() ins Dokument geschrieben.
Die Verwendung von Variablen ist nicht zwingend erforderlich. Das obige Beispiel funktioniert genauso, wenn Sie notieren:
document.write("Der Wert ihres ersten Kindknotens lautet: <b>" + document.getElementById("Ueberschrift").firstChild.nodeValue + "<\/b>");
Der geschriebene Wert lautet im Beispiel: Knoten in der ... der erste Kindknoten der Überschrift ist also ihr Zeicheninhalt. Das Wort Baumstruktur gehört nicht dazu, da es ja durch ein i-Element ausgezeichnet ist, das selbst wieder einen eigenen, weiteren Kindknoten der Überschrift darstellt.
Die beiden Attribute, die im einleitenden Überschriften-Tag notiert sind, zählen übrigens nicht als Kindknoten. Das W3-Konsortium ist der Auffassung, dass Attribute hierarchisch gesehen keine "Unterobjekte" von Elementen sind, sondern "assoziierte Objekte". Um auf Attributknoten zuzugreifen, bietet das node-Objekt eigene Eigenschaften und Methoden an. Zum Verständnis ist es jedoch wichtig, dass die Attribute eines Elements nicht als dessen Kindknoten betrachtet werden, weshalb etwa eine Objekteigenschaft wie firstChild die Attribute übergeht.
 |
attributesSpeichert einen Array aus verfügbaren Atrributen eines Elements.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body bgcolor="#FFFFCC" text="#000099">
<script type="text/javascript">
<!--
document.write("Das body-Element hat <b>" + document.getElementsByTagName('body')[0].attributes.length + "<\/b> Attribute");
//-->
</script>
</body></html>
|
Das Beispiel greift mit document.getElementsByTagName('body')[0] auf das body-Element der Datei zu und ermittelt über die Array-Grundeigenschaft length des attributes-Arrays die Anzahl der Attribute, die in dem Element definiert sind. Zur Kontrolle wird das Ergebnis mit document.write ins Dokument geschrieben. Im Beispiel ist 2 der Wert von attributes.length, da im einleitenden <body>-Tag zwei Attribute notiert sind.
Über den attributes-Array können Sie auch auf Attribute zugreifen. So liefert beispielsweise document.getElementsByTagName('body')[0].attributes[0].nodeValue den Wert #FFFFCC, da attributes[0] das erste Attribut bezeichnet, und nodeValue den zugehörigen Wert speichert.
Der MS Internet Explorer ermittelt zwar einen Wert, jedoch nicht den richtigen. Im Beispiel wurde mit der Produktversion 5.5 statt 2 der Wert 94 ermittelt - vermutlich die Anzahl insgesamt verfügbarer Attribute für das body-Element, inclusive Event-Handler usw. Dies ist jedoch unbrauchbar.
|
|
childNodesSpeichert einen Array aus verfügbaren Kindknoten eines Knotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<p id="derText">Text mit <b>fettem Text</b> und <u>unterstrichenem Text</u></p>
<script type="text/javascript">
<!--
var Anzahl = document.getElementById("derText").childNodes.length;
var Erster = document.getElementById("derText").childNodes[0].nodeValue;
document.write("Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
document.write("Wert des ersten Kindknotens: <b>" + Erster +"<\/b><br>");
//-->
</script>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit Zeicheninhalt und weiteren Elementen zur Formatierung. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("derText") auf das p-Element zugegriffen. Über die Array-Grundeigenschaft length des childNodes-Arrays wird die Anzahl der Kindelemente ermittelt, die das p-Element hat. Der Rückgabewert wird in der Variablen Anzahl gespeichert. Über childNodes[0] wird auf das erste Kindelement zugegriffen. Dessen Inhalt wird mit nodeValue ermittelt. Zur Kontrolle schreibt das Script die Ergebnisse mit document.write() ins Dokument.
Die Anzahl der Kindelemente des p-Elements beträgt übrigens 4:
Das erste Kindelement ist der Zeicheninhalt Text mit ,
das zweite Kindelement das b-Element,
das dritte Kindelement der Zeicheninhalt und ,
und das vierte Kindelement das u-Element.
Wenn ein Knoten keine Kindknoten enthält, hat childNodes den Wert null.
Der Netscape 6.1 und der MS Internet Explorer 5.0 Macintosh Edition interpretieren im body-Element und in allen untergeordneten Knoten bereits einen Zeilenumbruch oder ein Leerzeichen im Quelltext zwischen Elementknoten als einen eigenen Kindknoten mit dem Namen #text. Auch HTML-Kommentare bilden eigene Knoten und werden als Knoten mit dem Namen #comment behandelt.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<ul id="ersteListe"><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
<!--
var Anzahl = document.getElementById("ersteListe").childNodes.length;
document.write("Erste Liste: Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
//-->
</script>
<ul id="zweiteListe">
<li>erster Punkt</li> <li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
<!--
var Anzahl = document.getElementById("zweiteListe").childNodes.length;
document.write("Zweite Liste: Anzahl Kindknoten: <b>" + Anzahl +"<\/b><br>");
//-->
</script>
</body></html>
|
Im Beispiel sind zwei Listen definiert. Beide unterscheiden sich nur dahingehend, dass sich zwischen den einzelnen Elementen der erste Liste keine Leerzeichen oder Zeilenumbrüche befinden. In der zweiten Liste dagegen wurden Leerzeichen und Zeilenumbrüche verwendet. Der Netscape 6.1 gibt für die erste Liste als Anzahl der Kindknoten 2 aus und für die zweite Liste 5. Die jeweiligen Leerzeichen und Zeilenumbrüchen werden als eigene Kindknoten betrachtet.
Der MS Internet Explorer unter Windows ignoriert diese und erkennt erst dann einen Kindknoten mit dem Namen #text, wenn dieser ein entsprechendes Textzeichen oder ein erzwungenes Leerzeichen enthält.
|
|
dataSpeichert Zeichendaten eines Knotens, sofern es sich um einen Textknoten handelt.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script language="JavaScript" type="text/javascript">
<!--
function Ausgeben() {
alert(document.getElementById("Dokumentinhalt").firstChild.data);
}
//-->
</script>
</head><body id="Dokumentinhalt" onLoad="Ausgeben()">
Das ist Text, der einfach so im Dokument steht.
</body></html>
|
Das Beispiel enthält zwischen <body> und </body> nichts als reinen Text, also Zeichendaten. Nachdem das Dokument geladen ist (onLoad), wird die JavaScript- Funktion Ausgeben() aufgerufen. Diese greift mit document.getElementById("Dokumentinhalt") auf das body-Element zu. Mit firstChild wird auf das erste Kindelement zugegriffen, und mit data auf dessen Inhalt. Das erste (und einzige) Kindelement des body-Elements ist im Beispiel der Text. Dieser wird denn auch in dem Meldungsfenster angezeigt, das die Funktion Ausgeben() ausgibt.
Wenn Sie den Wert der Eigenschaft data ändern, wird der Zeicheninhalt des Elements einfach durch den neuen Inhalt ersetzt. Wenn Sie im obigen Beispiel also notieren würden:
document.getElementById("Dokumentinhalt").firstChild.data = "neuer Text";
Dann würde anschließend der bisherige Text zwischen <body> und </body> dynamisch durch den neuen ersetzt.
|
|
firstChildSpeichert das Objekt des ersten Kindknotens eines Knotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
<!--
var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;
document.write(ErsterPunkt.firstChild.data);
//-->
</script>
</body></html>
|
Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf das erste ul-Element im Dokument zugegriffen. mit firstChild wird dessen erster Kindknoten angesprochen. Im Beispiel ist dies das erste li-Element. In der Variablen ErsterPunkt ist also anschließend das Knotenobjekt des ersten li-Elements gespeichert, aber nicht sein Textinhalt. Dieser wird jedoch anschließend mit document.write() ausgegeben. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten darstellt, kann mit ErsterPunkt.firstChild.data auf den Text des ersten Listenpunktes zugegriffen werden.
Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Netscape 6.1 und des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten.
|
|
lastChildSpeichert das Objekt des letzten Kindknotens eines Knotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>
<script type="text/javascript">
<!--
var LetzterPunkt = document.getElementsByTagName("ul")[0].lastChild;
document.write(LetzterPunkt.firstChild.data + " und ");
document.write(LetzterPunkt.lastChild.data);
//-->
</script>
</body></html>
|
Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0] auf das erste ul-Element im Dokument zugegriffen. mit lastChild wird dessen letzter Kindknoten angesprochen. Im Beispiel ist dies das zweite und letzte li-Element. In der Variablen LetzterPunkt ist also anschließend das Knotenobjekt des zweiten li-Elements gespeichert, aber nicht sein Textinhalt. Dieser wird jedoch anschließend mit document.write() ausgegeben, und zwar gleich zweimal. Da der Textinhalt aus Sicht des li-Elementknotens wieder einen Unterknoten darstellt, und zwar den einzigen, kann er mit LetzterPunkt.firstChild.data, aber ebensogut mit LetzterPunkt.lastChild.data angesprochen werden.
Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Netscape 6.1 und des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten.
|
|
nextSiblingSpeichert aus Sicht eines Knotens den unmittelbar nächstfolgenden Knoten im Strukturbaum. Wenn kein Knoten mehr folgt, wird null gespeichert.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<script type="text/javascript">
<!--
document.write("Das ul-Element hat folgende Knoten unter sich:<br>");
var Knoten = document.getElementsByTagName("ul")[0].firstChild;
while (Knoten!=null) {
document.write("Einen Knoten mit dem Namen <b>" + Knoten.nodeName + "<\/b><br>");
Knoten = Knoten.nextSibling;
}
//-->
</script>
</body></html>
|
Das Beispiel enthält eine Aufzählungsliste mit zwei Listenpunkten. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("ul")[0].firstChild auf das erste ul-Element im Dokument zugegriffen. In der nachfolgenden while-Schleife wird geprüft, ob der der Knoten verschieden von null ist, und der nodeName des Knotens wird ausgegeben. Anschließend ist die Variable Knoten mit dem nachfolgenden Knoten (Knoten = Knoten.nextSibling;) belegt. Wenn der Strukturbaum durchlaufen ist, ist in der Eigenschaft nextSilbing der Wert null gespeichert, was zum Abbruch der Schleife führt.
Die Eigenschaft nextSilbing arbeitet jeweils den nächsten Knoten eines Strukturbaumes ab. Sie verfolgt jedoch nicht die Kindknoten, die in einem Knoten enthalten sein können.
|
|
nodeNameSpeichert den Namen eines Knotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body><script id="dasScript" type="text/javascript">
<!--
Knoten = document.getElementById("dasScript");
var Knoten = document.getElementsByTagName("body")[0].firstChild;
document.write("Dieses Script-Element hat folgende Knotennamen: <b>" + Knoten.nodeName + "</b>")
//-->
</script>
</body></html>
|
Das Beispiel enthält im sichtbaren Dokumentbereich nichts weiter als ein JavaScript, das den Knotennamen des eigenen script-Elements ausgibt, also SCRIPT. Dazu greift das Script mit document.getElementsByTagName("body")[0].firstChild auf das script-Element zu. Dessen Knoten wird in der Variablen Knoten gespeichert. Mit Knoten.nodeName wird dann der Name dieses Knotens ermittelt.
Elementknoten und Attributknoten haben Namen, Textknoten jedoch nicht. Beim Versuch, den Namen eines Textknotens zu ermitteln, wird der Wert #text gespeichert.
Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Netscape 6.1 im Umgang mit Kindknoten.
|
|
nodeTypeSpeichert den Typ eines Knotens in Form einer Nummer. Das W3-Konsortium hat dazu folgende Zuordnungen festgelegt - einige davon sind XML-spezifisch:
|
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<p align="center">ein kleiner Text</p>
<script type="text/javascript">
<!--
var Element = document.getElementsByTagName("p")[0];
var Ausrichtung = Element.getAttributeNode("align");
alert(Ausrichtung.nodeType);
//-->
</script>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit einem Attribut align= zur Ausrichtung. Unterhalb des Textabsatzes ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementsByTagName("p")[0] auf das p-Element zugegriffen. Mit Element.getAttributeNode("align") wird auf dessen Attributknoten zugegriffen. In der Variablen Ausrichtung steht anschließend das Objekt des Attributknotens. Ein Meldungsfenster gibt dann im Beispiel den Knotentyp dieses Knotens mit Ausrichtung.nodeType aus. Der Wert beträgt 2, da es sich um einen Attributknoten handelt.
Der MS Internet Explorer 5.x interpretiert die Eigenschaft nodeType zwar, in Version 5.5 nicht aber das obige Beispiel. Grund ist, dass er die Methode getAttibuteNode() nicht unterstützt. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition ist das Beispiel dagegen nachvollziehbar.
|
|
nodeValueSpeichert den Wert oder Inhalt eines Knotens. Bei Textknoten ist dies der Text, bei Attributknoten der zugewiesene Attributwert. Bei Elementknoten hat diese Eigenschaft den Wert null.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function TextAendern() {
document.getElementById("derText").firstChild.nodeValue = document.Formular.neuerText.value;
}
//-->
</script>
</head><body>
<p id="derText">Hier steht ein Text</p>
<form name="Formular" action="">
<input type="text" size="40" name="neuerText">
<input type="button" value=" OK " onClick="TextAendern()">
</form>
</body></html>
|
In dem Beispiel ist ein Textabsatz notiert und unterhalb davon ein Formular mit einem Eingabefeld und einem Klickbutton. Beim Anklicken des Buttons wird die Funktion TextAendern() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("derText") auf das p-Element zu, weiterhin mit firstChild auf den ersten Kindknoten dieses Elements, also den Textinhalt, und weist dessen Eigenschaft nodeValue den Inhalt aus dem Eingabefeld des Formulars zu.
Das Beispiel zeigt, dass nodeValue eine ähnliche Funktionalität hat wie das die Eigenschaft all.innerText beim klassischen DHTML nach Microsoft-Syntax. Dennoch gibt es Unterschiede: Wenn beispielsweise notiert wäre:
<p>Text mit <b>fettem Text</b></p>
Dann würde firstChild.nodeValue aus Sicht des p-Elements nur den Wert Text mit liefern und auch nur diesen Teil ändern können, da dahinter durch das innere b-Element ein neuer Knoten beginnt.
Eine direkte Entsprechung zu all.innerHTML gibt es erst recht nicht im DOM. "Inneres HTML" muss im DOM mit Hilfe geeigneter Methoden wie document.createElement(), document.createAttribute() und document.createTextNode() erzeugt werden.
|
|
parentNodeSpeichert den Elternknoten eines Knotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
</head><body>
<ul>
<li>ein Punkt</li>
<li>ein zweiter</li>
</ul>
<script type="text/javascript">
<!--
alert(document.getElementsByTagName("li")[0].parentNode.parentNode.tagName);
//-->
</script>
</body></html>
|
Das Beispiel enthält eine Aufzählungsliste. Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird der Name des Großelternelements des ersten li-Elements in einem Meldungsfenster ausgegeben. Dazu wird mit document.getElementsByTagName("li")[0] auf das erste li-Element zugegriffen. Das erste parentNode dahinter greift auf dessen Elternelement zu, und das zweite parentNode auf das Elternelement des Elternelements. Von diesem Element wird mit tagName der Name des Elementes ermittelt und ausgegeben. Das Attribut tagName kennen alle Knoten der Art Element.
Ausgegeben wird im Beispiel BODY.
Das vorliegende Beispiel wird auch von Opera 5.12 interpretiert.
|
|
previousSiblingSpeichert aus Sicht eines Knotens den unmittelbar vorhergehenden Knoten im Strukturbaum. Wenn kein Knoten vorausgeht, wird null gespeichert.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body id="Dokumentinhalt"
onLoad="alert(document.getElementById('Dokumentinhalt').previousSibling.nodeName)">
</body></html>
|
Das Beispiel gibt, nachdem das Dokument geladen ist (onLoad) in einem Meldungsfenster den Knotennamen des Vorgängerknotens vom body-Element aus. Dazu wird mit document.getElementById('Dokumentinhalt') auf das body-Element zugegriffen.
Ausgegeben wird dann HEAD, da das head-Element im Sinne des Strukturbaums das unmittelbare Vorgängerelement des body-Elements ist.
Berücksichtigen Sie bei der Verwendung dieser Eigenschaft die Besonderheit des Netscape 6.1 und des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten.
|
|
appendChild()Hängt einen zuvor neu erzeugten Knoten in die bestehende Knotenstruktur ein, und zwar so, dass er als letztes Kindelement eines anzugebenden Knotens eingefügt wird.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body>
<ol id="Liste">
<li>Element</li>
</ol>
<script language="JavaScript" type="text/javascript">
<!--
document.getElementById("Liste").removeChild(document.getElementById("Liste").firstChild);
for(var i = 0; i < 10; i++) {
var newLI = document.createElement("li");
var liNummer = i + 1;
var newLIText = document.createTextNode("Das ist Listeneintrag Nummer " + liNummer);
document.getElementById("Liste").appendChild(newLI);
document.getElementsByTagName("li")[i].appendChild(newLIText);
}
//-->
</script>
</body></html>
|
Das Beispiel füllt eine nummerierte Liste automatisch mit Daten. Unmittelbar nach dem Einlesen der nummerierten Liste folgt ein JavaScript-Bereich. Zuerst wird mit der Methode removeChild() das vorhandene Listenelement entfernt. Anschließend ist eine for-Schleife notiert, die 10 mal durchlaufen wird. Bei jedem Schleifendurchgang wird zunächst mit document.createElement() ein neues Element vom Typ li erzeugt. Dann wird eine Variable liNummer auf einen Wert gesetzt, der um 1 höher ist als der des Schleifenzählers i. Diese Variable wird in der nachfolgenden Anweisung benutzt, bei der mit document.createTextNode() ein neuer Textknoten erzeugt wird. Anschließend folgen - immer noch innerhalb der for-Schleife - zwei appendChild()-Aufrufe. Die erste der Anweisungen greift mit document.getElementById("Liste") auf das ol-Element zu und führt dazu, dass diesem ein neues Kindelement am Ende hinzugefügt wird. Angehängt wird der zuvor neu erzeugte Elementknoten newLI, der ja ein neues li-Element speichert. Beim zweiten Aufruf wird der Schleifenzähler i benutzt, um mit document.getElementsByTagName("li")[i] auf das gerade neu erzeugte li-Element zuzugreifen. Ihm wird mit appendChild() der zuvor erzeugte Textknoten als Kindelement hinzugefügt. Auf diese Weise füllt sich die Liste bei jedem Schleifendurchlauf um ein neues li-Element mitsamt Zeicheninhalt.
|
|
appendData()Fügt einem Textknoten oder dem Wert eines Attributknotens am Ende Daten hinzu, ohne die bestehenden Daten zu überschreiben.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function ergaenzen() {
var Rest = document.createTextNode("vollkommen!");
document.getElementById("Absatz").firstChild.appendData(Rest.nodeValue);
}
//-->
</script>
</head>
<body>
<p id="Absatz">Ich bin ja so un</p>
<p><a href="javascript:ergaenzen()">un - was?</a></p>
</body></html>
|
Das Beispiel enthält einen Absatz mit nicht ganz sinnigem Text und unterhalb davon einen Verweis. Beim Anklicken des Verweises wird die Funktion ergaenzen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunächst mit document.createTextNode() einen neuen Textknoten. Anschließend greift sie mit document.getElementById("Absatz").firstChild auf den Knoten zu, der den Zeicheninhalt des Textabsates mit dem unfertigen Text darstellt, und fügt dort mit appendData() den Wert des neu erzeugten Textknotens (Rest.nodeValue) hinzu. Aus dem Text ich bin ja so un wird also ich bin ja so unvollkommen!
Der Internet Explorer 5.x unterstützt diese Methode noch nicht. Sie können sich damit behelfen, auf den Inhalt eines Textknotens zuzugreifen und dann mit nodeValue += "Text" Daten hinzuzufügen. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.
|
|
cloneNodeErstellt eine identische Kopie eines Knotens, je nach Wunsch mit oder ohne zugehörige Unterknotenstruktur.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body>
<span id="Dolly">Dolly </span>
<script type="text/javascript">
<!--
Dolly2 = document.getElementById("Dolly").cloneNode(true);
document.getElementById("Dolly").firstChild.nodeValue += Dolly2.firstChild.nodeValue;
//-->
</script>
</body></html>
|
Das Beispiel enthält einen in einem span-Element notierten Text Dolly . Unterhalb davon ist ein JavaScript-Bereich notiert. Dort wird mit document.getElementById("Dolly") auf das span-Element zugegriffen. Dieses wird mit cloneNode() kopiert, und der Rückgabewert wird in der Variablen Dolly2 gespeichert. Der Rückgabewert ist eine identische Kopie des Elementknotens des span-Elements. Als Parameter wird der Methode im Beispiel true übergeben. Das bedeutet, dass auch der Textinhalt des Elements mitkopiert wird. Um nur das Element ohne den Inhalt zu klonen, müssen Sie false übergeben.
Im Beispiel wird anschließend mit document.getElementById("Dolly").firstChild.nodeValue der Inhalt des span-Elements angesprochen und mittels Zeichenkettenoperation um den Wert des Kindelements des Klons erweitert, auf den mit Dolly2.firstChild.nodeValue zugegriffen wird. Am Ende steht also Dolly Dolly als Inhalt in dem span-Element.
|
|
deleteData()Löscht Daten eines Textknotens oder den Wert eines Attributknotens.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function loeschen() {
var AnzahlZeichen = document.getElementsByTagName("p")[0].firstChild.nodeValue.length;
document.getElementsByTagName("p")[0].firstChild.deleteData(0,AnzahlZeichen);
}
//-->
</script>
</head>
<body>
<p>Die Beredtsamkeit an sich ist die Tugend des Redens
und die Lust des Schweigens an seinem Gegenteil.
Die Beredtsamkeit ist also ...
<a href="javascript:loeschen()">och nee, besser nicht!</a></p>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit Text und einem Verweis. Beim Anklicken des Verweises wird die Funktion loeschen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion ermittelt zunächst durch Zugriff auf den Zeicheninhalt des Absatzes (document.getElementsByTagName("p")[0].firstChild.nodeValue) mit der Methode string.length dessen Zeichenanzahl. Der Wert wird für die folgende Anweisung benötigt. Dort wird wieder mit document.getElementsByTagName("p")[0].firstChild auf den Zeicheninhalt des Absatzes zugegriffen. Mit deleteData() wird der Inhalt gelöscht.
Die Methode deleteData() erwartet zwei Parameter:
1. das Zeichen, ab dem gelöscht werden soll (0 steht für "ab dem ersten Zeichen"),
2. wie viele Zeichen gelöscht werden sollen (im Beispiel wird dazu die Variable AnzahlZeichen übergeben, in der die zuvor ermittelte Anzahl der Zeichen im Textknoten gespeichert ist).
Der Verweis im Beispiel bleibt übrigens nach dem Löschen stehen, weil das a-Element des Verweises schon wieder einen neuen Kindknoten darstellt.
Der Internet Explorer 5.x unterstützt diese Methode noch nicht. Um die gesamten Zeichendaten eines Textknotens zu löschen, können Sie sich damit behelfen, auf den Knoten zuzugreifen und der Eigenschaft nodeValue den Wert "" (leere Zeichenkette) zuzuweisen. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.
|
|
getAttribute()Ermittelt den Wert eines bestimmten Attributs in einem Element.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Anzeigen(attr) {
alert(document.getElementsByTagName("body")[0].getAttribute(attr));
}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000" link="#0000E0" alink="#000080" vlink="#000000">
<a href="javascript:Anzeigen('bgcolor')">Hintergrundfarbe?</a><br>
<a href="javascript:Anzeigen('text')">Textfarbe?</a><br>
<a href="javascript:Anzeigen('link')">Linkfarbe noch nicht besuchte Seiten?</a><br>
<a href="javascript:Anzeigen('vlink')">Linkfarbe besuchte Seiten?</a><br>
<a href="javascript:Anzeigen('alink')">Linkfarbe aktivierte Links?</a>
</body></html>
|
Das Beispiel enthält mehrere Verweise. Alle Verweise rufen beim Anklicken die Funktion Anzeigen() auf, die im Dateikopf notiert ist. Übergeben wird der Funktion der gewünschte Attributname. Die Funktion greift mit document.getElementsByTagName("body")[0] auf das body-Element zu. Mit getAttribute() lassen sich dann Atrributwerte des einleitenden <body>-Tags ermitteln. Die Methode erwartet den Namen des gewünschten Attributs und liefert dessen Wert zurück. Im Beispiel bekommt sie jeweils den der Funktion übergebenen Parameter attr weitergereicht.
Das obige Beispiel wird auch von Opera 5.12 interpretiert.
|
|
getAttributeNode()"Holt" einen Attributknoten. Liefert das Knotenobjekt des gewünschten Attributs zurück.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function anpassen() {
var CSSKnoten = document.getElementsByTagName("h1")[0].getAttributeNode("style");
for(i = 0; i < document.getElementsByTagName("p").length; i++)
document.getElementsByTagName("p")[i].setAttributeNode(CSSKnoten);
}
//-->
</script></head>
<body>
<h1 style="font-family:Tahoma; font-size:200%; color:red">Rot und Groß!</h1>
<p>ein Absatz</p>
<p>und noch einer</p>
<p>und einer mit einem <a href="javascript:anpassen()">Link zum Anpassen</a></p>
</body></html>
|
Das Beispiel enthält eine Überschrift mit einem style-Attribut sowie drei Textabsätze. Der letzte davon enthält einen Verweis, bei dessen Anklicken die Funktion anpassen() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion holt sich mit document.getElementsByTagName("h1")[0].getAttributeNode("style") den das Knotenobjekt des style-Elements aus der Überschrift. Der Rückgabewert, also das Attributknoten-Objekt, wird in der Variablen CSSKnoten gespeichert. Anschließend wird in einer for-Schleife auf alle p-Elemente des Dokuments zugegriffen. Mit setAttributeNode() wird dem jeweils aktuellen p-Element der gespeicherte style-Attributknoten hinzugefügt. Die p-Elemente "erben" auf diese Weise die CSS-Eigenschaften der Überschrift.
Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Die Version 6.0beta kennt diese Methode, jedoch wird sie nicht vollständig interpretiert.
|
|
hasChildNodes()Ermittelt, ob ein Knoten Kindknoten unter sich hat. Gibt den booleschen Wert true zurück, wenn ja, und false, wenn nein.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body>
<p></p>
<p>mit Inhalt</p>
<p></p>
<p>mit Inhalt</p>
<script type="text/javascript">
<!--
for(i = 0; i < document.getElementsByTagName("p").length; i++)
if(document.getElementsByTagName("p")[i].hasChildNodes())
document.write((i+1) + ". p-Element hat einen Inhalt!<br>");
//-->
</script>
</body></html>
|
Das Beispiel enthält vier Textabsätze. Zwei davon haben einen Zeicheninhalt, zwei andere sind leer. Unterhalb der Textabsätze ist ein JavaScript notiert. Dieses greift in einer for-Schleife der Reihe nach mit document.getElementsByTagName("p") auf alle p-Elemente des Dokuments zu. Dabei wird mit if(document.getElementsByTagName("p")[i].hasChildNodes()) abgefragt, ob das jeweils aktuell in der Schleife behandelte p-Element Kindknoten hat. Wenn ja, wird mit document.write() ins Dokument geschrieben, beim wie vielten Element ein Kindknoten gefunden wurde. Im Beispiel ist das beim zweiten und vierten Element der Fall, da diese beiden Elemente Textknoten enthalten.
|
|
insertBefore()Fügt einen innerhalb eines Knotens einen Kindknoten vor einem anderen Kindknoten ein.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body>
<p id="derText">Text <i id="derKursiveText">und mit kursivem Text</i></p>
<script type="text/javascript">
<!--
var neuB = document.createElement("b");
var neuBText = document.createTextNode("mit fettem Text ");
neuB.appendChild(neuBText);
document.getElementById("derText").insertBefore(neuB, document.getElementById("derKursiveText"));
//-->
</script>
</body></html>
|
Das Beispiel enthält einen Textabsatz mit Text und einem Kindelement <i>...</i>. Unterhalb des Absatzes ist ein JavaScript-Bereich notiert. Darin wird zunächst mit document.createElement() ein neues Element des Typs b für fetten Text erzeugt. Anschließend wird mit document.createTextNode() ein Textknoten erzeugt, der dann mit appendChild() als Inhalt des neu erzeugten b-Elements eingefügt wird. Der ganze Komplex aus b-Element mit Inhalt ist dann in der Variablen neuB gespeichert. Mit document.getElementById("derText") greift das Script sodann auf das p-Element zu und fügt mit insertBefore() das neue Element vor dem anderen Kindelement ein, das die Id "derKursiveText" hat. Am Ende lautet der komplette Inhalt des p-Elements dann:
Text <b>mit fettem Text </b><i>und mit kursivem Text</i>.
Die Methode insertBefore() erwartet also zwei Parameter:
1. das neu einzufügende Kindelement,
2. ein Kindelement, vor dem das neue Kindelement eingefügt werden soll.
|
|
insertData()Fügt Zeichendaten in einem Textknoten ab einer bestimmten Zeichenposition ein.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function italiano() {
document.getElementsByTagName("h1")[0].firstChild.insertData(7, "duemilauno");
}
//-->
</script></head>
<body>
<h1>2001 = oder zweitausendeins</h1>
<a href="javascript:italiano()">sag es in italienisch!</a>
</body></html>
|
Das Beispiel enthält eine Überschrift erster Ordnung, in der noch irgendetwas fehlt an Text. Unterhalb davon ist ein Verweis notiert, bei dessen Anklicken die Funktkion italiano() aufgerufen wird, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("h1")[0].firstChild auf den Textknoten der Überschrift zu und fügt mit insertData() ab dem 8. Zeichen (Zeichenposition 7, zu zählen begonnen wird bei 0) die Zeichenkette duemilauno ein. Der dahinterstehende Text oder zweitausendeins wird - wie beim Einfügemodus in der Textverarbeitung - einfach nach hinten geschoben.
Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.
|
|
removeAttribute()Löscht aus einem Element die Wertzuweisung an ein Attribut.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function wegMitAusrichtung() {
document.getElementById("rechts").removeAttribute("align");
}
//-->
</script></head>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der Ausrichtung!</a></p>
</body></html>
|
Das Beispiel enthält einen mit align="right" rechtsbündig ausgerichteten Textabsatz, der einen Verweis enthält. Beim Anklicken des Verweises wird die Funktion wegMitAusrichtung() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementById("rechts") auf das p-Element zu und löscht mit removeAttribute("align") den Wert des align-Attributs. Der Absatz wird dadurch dynamisch neu ausgerichtet (per Voreinstellung linksbündig).
Wichtig ist aber, dass nicht das Attribut gelöscht wird, sondern nur dessen Wert. Im Beispiel ist der Effekt so, als wenn in HTML notiert wäre:
<p id="rechts" align="">...</p>
Der MS Internet Explorer 5.0 Macintosh Edition interpretiert dieses Beispiel nicht.
|
|
removeAttributeNode()Löscht aus einem Element einen Attributknoten mitsamt Wertzuweisung.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<script language="JavaScript" type="text/javascript">
<!--
function wegMitAusrichtung() {
document.getElementById("rechts").removeAttributeNode(document.getElementById("rechts").attributes[1]);
}
//-->
</script>
<body>
<p id="rechts" align="right"><a href="javascript:wegMitAusrichtung()">Weg mit der Ausrichtung!</a></p>
</body></html>
|
Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu removeAttribute(). Der Unterschied ist nur, dass mit removeAttributeNode() das komplette Attribut gelöscht wird und nicht nur dessen Wertzuweisung. Als Parameter erwartet diese Methode das Objekt des gewünschten Attributknotens. Im Beispiel wird document.getElementById("rechts").attributes[1] übergeben, da das align-Attribut, das es zu entfernen gilt, das 2. Attribut im attributes-Array des p-Elements ist.
Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht.
|
|
removeChild()Löscht aus einem Element einen Kindknoten.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function wegMitEintrag() {
var Knoten=document.getElementsByTagName("ol")[0].firstChild;
verschwunden = document.getElementsByTagName("ol")[0].removeChild(Knoten);
alert(verschwunden.firstChild.nodeValue)
}
//-->
</script></head>
<body>
<ol start="1" type="I"><li>Element 1</li><li>Element 2</li><li>Element 3</li></ol>
<p><a href="javascript:wegMitEintrag()">Lösche das erste Element</a></p>
</body></html>
|
Das Beispiel enthält eine nummerierte Liste. Unterhalb davon ist ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion wegMitEintrag() aufgerufen, die im Dateikopf notiert ist. In dieser Funktion wird auf den ersten Kindsknoten mit document.getElementsByTagName("ol")[0].firstChild zugegriffen. Der Wert wird in der Variablen Knoten gespeichert. Mit removeChild(Knoten) wird der Listenpunkt gelöscht. Dabei wird der Methode als Parameter der zu löschende Knoten übergeben. Die Methode removeChild() gibt als Rückgabewert das gelöschte Element zurück. Dieser Wert ist im Beispiel in der globalen Variablen verschwunden gespeichert. Über diese Variable können Sie weiterhin auf die Eigenschaften des Knotens zugreifen. So wird im Beispiel noch einmal der Inhalt des ersten Kindknotens des gelöschten Elements ausgegeben.
Berücksichtigen Sie beim Nachvollziehen dieses Beispieles die Besonderheit des Netscape 6.1 und des MS Internet Explorer 5.0 Macintosh Edition im Umgang mit Kindknoten.
|
|
replaceChild()Ersetzt aus Sicht eines Knotens einen seiner Kindknoten durch einen anderen.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function andereAntwort() {
var Textknoten = document.createTextNode("Du darfst!");
document.getElementById("z2").replaceChild(Textknoten, document.getElementById("z2").firstChild);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>
|
Das Beispiel enthält eine Tabelle mit zwei Zellen. Unterhalb der Tabelle ist ein Verweis notiert. Beim Anklicken des Verweises wird die Funktion andereAntwort() aufgerufen, die im Dateikopf notiert ist. Diese Funktion erzeugt zunächst mit document.createTextNode() einen neuen Textknoten für die Antwort. Die Antwort wird in Form eines Knotenobjekts benötigt, weil die Methode replaceChild() sowohl den neuen Knoten als auch den zu ersetzenden in Form eines Knotenobjekts erwartet. Im Beispiel wird mit document.getElementById("z2") auf die zweite Tabellenzelle zugegriffen, um deren Inhalt, also den Textknoten, der ihren Kindknoten darstellt, durch den neu erzeugten Textknoten zu ersetzen. Dazu wird replaceChild() angewendet. Als erster Parameter wird der neue Knoten übergeben, als zweiter der zu ersetzende. Der neue Knoten ist im Beispiel in der Variablen Textknoten gespeichert. Auf den zu ersetzenden Knoten wird mit document.getElementById("z2").firstChild zugegriffen.
|
|
replaceData()Ersetzt Zeichendaten im Inhalt eines Elements oder in der Wertzuweisung an ein Attribut.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function andereAntwort() {
var Text = "Du darfst!";
var rd_Start = 0;
var rd_Laenge = document.getElementById("z2").firstChild.nodeValue.length;
document.getElementById("z2").firstChild.replaceData(rd_Start,rd_Laenge,Text);
}
//-->
</script></head>
<body>
<table border="1" bgcolor="#FFFFC0" width="30%">
<tr><td id="z1">Darf ich?</td><td id="z2">keine Ahnung!</td></tr>
</table>
<p><a href="javascript:andereAntwort()">andere Antwort!</a></p>
</body></html>
|
Das Beispiel tut das Gleiche wie das Beispiel bei der Beschreibung zu replaceChild(). Der Unterschied ist nur, dass mit replaceData() auf Textebene gearbeitet wird, und dass diese Methode auch gezieltes Ersetzen ab einer bestimmten Zeichenposition und für eine bestimmte Länge erlaubt. Als Parameter erwartet replaceData() zuerst die Startposition in der Zeichenkette, ab der ersetzt werden soll. Im Beispiel wird dazu die Variable rd_Start übergeben, der zuvor 0 zugewiesen wurde. Damit wird ab dem ersten Zeichen ersetzt. Als zweiter Parameter wird übergeben, wie viele Zeichen ersetzt werden sollen. Im Beispiel wird die Variable rd_Laenge übergeben. Dieser wurde zuvor mit document.getElementById("z2").firstChild.nodeValue.length die Zeichenanzahl des gesamten Textknotens der zweiten Tabellenzelle zugewiesen. Im Beispiel wird auf diese Weise der komplette Inhalt der zweiten Tabellenzelle ersetzt. Mit einer Angabe wie 0,1 würden Sie beispielsweise nur das erste Zeichen ersetzen.
Als dritten Parameter erwartet replaceData() eine Zeichenkette, mit der die zuvor im Textknoten markierte Zeichenkette ersetzt werden soll. Im Beispiel wird die Variable Text übergeben, der zuvor ein Wert zugewiesen wurde.
Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.
|
|
setAttribute()Setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function setzen() {
document.getElementsByTagName("body")[0].setAttribute("bgColor", document.Formular.bgcolor.value);
document.getElementsByTagName("body")[0].setAttribute("text", document.Formular.text.value);
}
//-->
</script></head>
<body bgcolor="#FFFFCC" text="#E00000">
<form name="Formular" action=""><pre>
Hintergrundfarbe: <input type="text" name="bgcolor">
Textfarbe: <input type="text" name="text">
Werte: <input type="button" value="setzen" onClick="setzen()">
</pre></form>
</body></html>
|
Das Beispiel enthält ein Formular mit zwei Eingabefeldern, in denen der Anwender neue Werte für die beiden Attribute bgcolor und text des body-Elements eingeben kann. Beim Anklicken des Buttons unterhalb davon wird die Funktion setzen() aufgerufen, die im Dateikopf notiert ist. Diese Funktion greift mit document.getElementsByTagName("body")[0] auf das body-Element zu und weist ihm mit setAttribute() die neuen Attribute zu. Als erster Parameter wird der Name des zu erzeugenden oder zu ersetzenden Attributs übergeben, als zweiter Parameter der gewünschte Wert. Im Beispiel wird als zweiter Parameter jeweils der Wert aus den Formulareingabefeldern übergeben.
Der MS Internet Explorer ist empfindlich, was den ersten Parameter, also den gewünschten Attribut namen betrifft. Mit bgColor funktionierte das obige Beispiel, mit bgcolor dagegen nicht. Offenbar vermengt der Internet Explorer die erforderliche Syntax für das HTML-Elementobjekt body mit dem hier geforderten Wert. Im MS Internet Explorer 5.0 Macintosh Edition ist das Beispiel zwar nachvollziehbar, jedoch mit sehr seltsamen Ergebnissen.
|
|
setAttributeNode()Fügt in ein Element einen neuen Attributknoten ein. Ist der Attributknoten bereits vorhanden, wird der alte Knoten durch den neuen ersetzt. Ist er noch nicht vorhanden, wird er neu angelegt.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head>
<body>
<h1>Element ohne Eigenschaften?</h1>
<script type="text/javascript">
<!--
var Ausrichtung = document.createAttribute("align");
Ausrichtung.nodeValue = "center";
document.getElementsByTagName("h1")[0].setAttributeNode(Ausrichtung);
//-->
</script>
</body></html>
|
Das Beispiel enthält eine Überschrift erster Ordnung - ohne Attribute. Unterhalb davon ist ein JavaScript notiert. Dort wird zunächst mit document.createAttribute() ein neuer Attriutknoten für ein Attribut namens align erzeugt. Der Knoten wird in der Variablen Ausrichtung gespeichert. Durch Ausrichtung.nodeValue lässt sich dem erzeugten Knoten dann ein Wert zuweisen. Mit document.getElementsByTagName("h1")[0] greift das Script schließlich auf das Überschriftenelement zu und weist ihm mit setAttributeNode(Ausrichtung) den zuvor erzeugten und in Ausrichtung gespeicherten Attributknoten zu.
Der MS Internet Explorer 5.x interpretiert diese Methode noch nicht. Im MS Internet Explorer 6.0beta und im MS Internet Explorer 5.0 Macintosh Edition wird die Methode dagegen unterstützt.
|
| |
 |
all
|
 |
HTML-Elementobjekte
|
| SELFHTML/Navigationshilfen JavaScript/DOM Objekt-Referenz |
© 2001 
selfhtml@teamone.de