JavaScript/DOM/Document/anchors

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Achtung.svg

Mit dem Objekt anchors, das in der JavaScript-Objekthierarchie unterhalb des Document-Objekts liegt, haben Sie Zugriff auf Verweisanker, die in einer HTML-Datei definiert sind.

Achtung!

Das anchors-Objekt wurde mit HTML5 aus dem Standard enfernt.
  • Das name-Attribut ist für Link-Elemente in XHTML und HTML5 missbilligt und sollte nicht mehr verwendet werden. Stattdessen können Sie über die Vergabe einer ID jedes Element (und nicht nur Verweiselemente) zu einer Sprungmarke machen.

Verwendung

Ein Verweisanker in HTML ist beispielsweise: <a name="top">Hier beginnt die Seite</a>.

Es stehen folgende Arten zur Verfügung, mit JavaScript einen bestimmten Verweisanker anzusprechen:

Beispiel

// Schema 1 / Beispiel 1:
  document.anchors[#].Eigenschaft
  document.anchors[0].name

// Schema 2 / Beispiel 2:
  document.anchors.Ankername.Eigenschaft
  document.anchors.oben.text

// Schema 3 / Beispiel 3:
  document.anchors["Ankername"].Eigenschaft
  document.anchors["oben"].text

Verweisanker können Sie auf zwei Arten ansprechen:

  • mit einer Indexnummer (wie in Schema 1 / Beispiel 1)
Bei Verwendung von Indexnummern geben Sie document.anchors an und dahinter in eckigen Klammern, den wievielten Anker in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d. h. den ersten Verweisanker sprechen Sie mit anchors[0] an, den zweiten Verweisanker mit anchors[1] usw. Beim Zählen gilt die Reihenfolge, in der die Verweisanker in der Datei notiert sind.
  • mit Namen des Ankers (wie in Schema 2 / Beispiel 2)
Dabei wird der Anker als Unterobjekt von document.anchors angesprochen. Notieren Sie document.anchors, darauf einen Punkt . zum Ansprechen des Unterobjekts und schließlich den Namen, den Sie bei der Definition des Verweisankers im einleitenden <a>-Tag im name-Attribut angegeben haben.
  • mit Namen des Ankers als Indexnamen (wie in Schema 3 / Beispiel 3)
Diese Art ist eine zu Schema 2 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer hinter document.anchors eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anführungszeichen den Namen, den Sie bei der Definition des Verweisankers im einleitenden <a>-Tag im name-Attribut angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Anker nützlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Ankernamen enthält.

Eigenschaften

length

Die Eigenschaft length speichert, wieviele Verweisanker eine HTML-Datei enthält.

Beispiel
<html>
<head>
  <title>Test</title>
</head>
<body>

  <h1><a name="oben">Anfang</a></h1>
    Am Anfang war, naja, seien wir ehrlich, wir wissen es nicht.

  <h2><a name="mitte">Weisheit</a></h2>
    Wem das Wasser bis zum Halse steht, der darf den Kopf nicht haengen lassen.

  <h2><a name="unten">Ende</a></h2>


  <script>

    document.querySelector('output').innerText = "Gefunden wurden " + document.anchors.length + " Anker";

  </script>

</body>
</html>

Mit document.anchors.length können Sie die Anzahl der Verweisanker in einer HTML-Datei ermitteln.

Das Beispiel enthält zunächst HTML-Text mit einigen Ankern und schreibt am Ende dazu, wieviele Anker in der Datei gefunden wurden.

text

Die Eigenschaft text speichert den Text eines Verweisankers.

Beispiel
<html>
<head>
  <title>Test</title>
</head>
<body>

  <h1><a name="oben">Steuer</a></h1>
    Der Mensch im gesellschaftlichen Leben kann sein Gut nicht genießen, ohne es mit dem Staat zu teilen.

  <h2><a name="mitte">Einsicht</a></h2>
    Das Werk eines Philosophen ist viel leichter zu verbrennen, als zu widerlegen.

  <h2><a name="unten">Ende</a></h2>
  <p><a href="javascript:alert(document.anchors['mitte'].text)">mittlerer Ankertext</a></p>

</body>
</html>

Mit document.anchors['mitte'].text können Sie den Text eines Verweisankers zwischen <a> und </a> ermitteln. Das Beispiel enthält zunächst HTML-Text mit einigen Ankern und einen Verweis. Beim Anklicken des Verweises wird mit alert() der Text des Ankers ausgegeben.


x

Die Eigenschaft x speichert die horizontale Position eines Verweisankers gemessen vom Fensterrand.

Beispiel
<html>
<head>
  <title>Test</title>
</head>
<body>

  <a name="oben">ein Anker</a>
  <p><a href="javascript:alert(document.anchors[0].x)">Position von links</a></p>

</body>
</html>

Mit document.anchors[0].x können Sie die horizontale Position eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthält einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom linken Fensterrand aus gesehen ausgegeben.


y

Die Eigenschaft y speichert die vertikale Position eines Verweisankers gemessen vom Fensterrand.

Beispiel
<html>
<head>
  <title>Test</title>
</head>
<body>

  <a name="oben">ein Anker</a>
  <p><a href="javascript:alert(document.anchors[0].y)">Position von oben</a></p>

</body>
</html>

Mit document.anchors[0].y können Sie die vertikale Position eines Verweisankers in einer HTML-Datei ermitteln. Das Beispiel enthält einen Verweisanker und einen Verweis. Beim Anklicken wird die Position des Ankers vom oberen Fensterrand aus gesehen ausgegeben.