JavaScript/DOM/Document/anchors
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 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.
- Verweise können Sie z.B. mit querySelector('a') oder auch mit der id ansprechen.
Inhaltsverzeichnis
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:
// 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.anchorsan 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 mitanchors[0]an, den zweiten Verweisanker mitanchors[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.anchorsangesprochen. Notieren Siedocument.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.unterobjektgleichwertig zu objekt["unterobjekt"]. Notieren Sie wie beim Ansprechen mit Indexnummer hinterdocument.anchorseckige 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.
<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.
<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.
<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.
<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.
