|
Um folgende Methoden zu verwenden, benötigen Sie zuerst einen Knoten, da die Methoden auf
Knoten angewendet werden (strenggenommen sind es Methoden des node-Objekts).
Einen Knoten erhalten Sie durch Verwendung der Methoden des document-Objekts:
getElementById() und getElementsByTagName().
-
getNodeType()
Gibt die Art des Knotes als Ganzzahl zurück. Dabei bedeutet
die 1 einen Element-Knoten, die 2 einen Attribut-Knoten und die
3 einen Text-Knoten. Es gibt jedoch noch weitere Knotenarten.
-
getNodeName()
Gibt den Namen des Knotens zurück (z.B. den Element- oder Attributnamen)
-
getParentNode()
Wenn der Knoten ein Eltern-Knoten besitzt, wird es von dieser Methode
zurückgegeben.
-
hasChildNodes()
Mit Hilfe dieser Methode können Sie überprüfen, ob der Knoten
Kind-Knoten besitzt. Im zutreffenden Fall gibt diese Methode
true zurück, sonst false.
Beachten Sie: auch Attribute oder Text sind Knoten.
-
getChildNodes()
Liefert eine Liste der Kind-Knoten zurück.
-
getFirstChild()
Liefert den ersten Kind-Knoten zurück. Wenn diese Methode auf
ein text-Element angewendet wird, ist der Rückgabewert der Text-Knoten,
der die reinen Textdaten enthält.
-
getNodeValue()
Liefert den Inhalt des Knotens zurück. Wenn Sie diese Methode auf einen
Text-Knoten anwenden, erhalten Sie die reinen Textdaten als Rückgabewert.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="140px" height="62px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Javascript und SVG</title>
<desc>
Javascript: Methoden für den Zugriff auf die Knoten.
</desc>
<defs>
<!-- der Script Bereich -->
<script type="text/javascript">
<![CDATA[
function knotenInfo(){
var document = evt.getTarget().getOwnerDocument();
alert("Der Knoten des Text-Elements"
+ "\nKnotentyp: - "
+ document.getElementById('txt').getNodeType()
+ "\nKnotenname: - "
+ document.getElementById('txt').getNodeName()
+ "\nElternelement des Knotens: - "
+ document.getElementById('txt').getParentNode()
+ "\nDer Knoten hat Kind-Elemente: - "
+ document.getElementById('txt').hasChildNodes()
+ "\nKind-Elemente des Knotens: - "
+ document.getElementById('txt').getChildNodes()
+ "\nErstes Kind-Element des Knotens: - "
+ document.getElementById('txt').getFirstChild()
+ "\nKnotentyp des ersten Kind-Elements: - "
+ document.getElementById('txt').getFirstChild().getNodeType()
+ "\nInhalt des ersten Kind-Elements: - "
+ document.getElementById('txt').getFirstChild().getNodeValue()
+ "\n");
}
]]>
</script>
<!-- Styles und Filter -->
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;
font-weight:bold;}
rect {fill:#33cc33; stroke:black;}
]]>
</style>
<filter id="filter" x="-.3" y="-.3" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"
result="out1" />
<feOffset dx="2" dy="2"
result="out2" />
<feSpecularLighting in="out1"
surfaceScale="5" specularConstant=".75"
specularExponent="20" lighting-color="#999999">
<fePointLight x="-100" y="-100" z="100"/>
</feSpecularLighting>
<feComposite in2="SourceAlpha" operator="in"
result="out3"/>
<feComposite in="SourceGraphic" in2="out3"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
result="out4"/>
<feMerge>
<feMergeNode in="out2"/>
<feMergeNode in="out4"/>
</feMerge>
</filter>
<!-- der Button -->
<g id="button" style="filter:url(#filter)">
<rect id="rechteck" x="40" y="70" width="80" height="20"
rx="5" ry="5" />
<text id="txt" x="58" y="84">onclick</text>
</g>
</defs>
<!-- die Instanz des Buttons -->
<use id="usebut" xlink:href="#button" x="-10" y="-50"
onclick="knotenInfo();" />
</svg>
Sämtliche Methoden für den Zugriff auf Knoten, werden im obigen Beispiel
auf den Elementknoten des text-Element txt angewandt,
auf welchen durch die Methode getElementById() zugegriffen wird.
Die Ausgabe erfolgt wieder durch ein alert-Fenster.
Nachfolgend eine kurze Erläuterung der einzelnen Rückgabwerte:
-
getNodeType() liefert die Ausgabe 1: es handelt sich also um einen Elementknoten.
-
getNodeName() ermittelt den Namen des Knotens: den Elementnamen text.
-
getParentNode() liefert das Eltern-Element zurück: object SVGGElement - das g-Element.
-
hasChildNodes() prüft, ob das text-Element Kind-Elemente hat. Die Anwort ist true. Es sind also Kind-Elemente vorhanden.
-
getChildNodes() erzeugt als Rückgabewert eine Liste aller Kind-Elemente des text-Elements: object NodeList.
-
getFirstChild() liefert das erste Kind-Element des text-Elements zurück: den Textknoten - object Text
-
getNodeType() auf diesen Textknoten angewandt liefert zur Bestätigung die Ausgabe 3. Es ist also in der Tat ein Textknoten
-
getNodeValue() ebenfalls auf den Textknoten angewandt, liefert den Inhalt des text-Elements, d.h. die reinen Textdaten zurück: onclick.
|
