Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 16   

16.5 Methoden fuer den Zugriff auf Knoten

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.



index  |  Kapitel 16  |  16.4  <<  | 16.5 |  >>  16.6   Methoden fuer den Zugriff auf Attribute