JavaScript/DOM/Document/links
Mit dem Objekt document.links haben Sie Zugriff auf Verweise, die in einer HTML-Datei definiert sind.
<a href="https://de.yahoo.com/">Yahoo</a>
<a href="https://www.google.de/">Google</a>
<a href="https://www.selfhtml.org/">SELFHTML</a>
<script>
for (let i = 0; i < document.links.length; ++i)
document.querySelector('output').innerText += '<br>' + document.links[i]);
</script>
Im Beispiel werden ein paar Verweise notiert. Unterhalb davon steht ein JavaScript, das in einer for-Schleife für jeden Verweis das Verweisziel in die Datei schreibt. Es handelt sich um den jeweiligen Wert des Attributs href
.
Der Zugriff auf die Verweise erfolgt mit Indexnummern. Dabei geben Sie document.links
an und dahinter in eckigen Klammern, den wievielten Verweis in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d. h. den ersten Verweis sprechen Sie mit links[0]
an, den zweiten Verweis mit links[1]
usw. Beim Zählen gilt die Reihenfolge, in der die Verweise in der Datei notiert sind. Dabei werden auch Verweise innerhalb von verweis-sensitiven Grafiken (<area>
-Tag) berücksichtigt.}}
document.links
auch über deren Namen ansprechen. Notieren Sie dazu document.links.Ankername
mit dem Namen, den Sie bei der Definition des Verweises im einleitenden <a>
-Tag im Attribut name
angegeben haben. (Solche Verweise können Sie auch über document.anchors ansprechen.) Damit greifen Sie auf das a
- bzw. area
-Elementobjekt zu, mit dem der der Verweis definiert wurden.location-Eigenschaften von Verweisen
Neben den verweisspezifischen Eigenschaften kennt das Link-Objekt auch alle Eigenschaften des location-Objekts.
<html>
<head>
<title>Test</title>
</head>
<body>
<a target="_top" href="http://www.selfhtml.org/">SELFHTML</a><br>
<script>
document.links[0].port = "8081";
</script>
</body>
</html>
Über das Objekt location, haben Sie Zugriff auf den vollständigen URI eines angezeigten Verweises. Sie können den URI oder Teile davon zur Weiterverarbeitung abfragen und ändern. Notieren Sie dazu das Link-Objekt, also z. B. document.link[0]
, dahinter einen Punkt und anschließend die gewünschte Eigenschaft des location
-Objekts.
Im Beispiel ist ein Verweis definiert. Mit document.links[0].port
wird die Eigenschaft port geändert.
name
Die Eigenschaft name speichert den Namen eines Verweises. Durch Verwendung des name
-Attributes wird der Verweis gleichzeitig zu einem Bestandteil des anchors-Objektes.
<html><head><title>Test</title>
</head><body>
<a name="katalog" href="http://de.yahoo.com/">Yahoo</a><br>
<a name="suchmaschine" href="http://www.google.de/">Google</a><br>
<a name="redaktion" href="http://www.selfhtml.org/">SELFHTML</a><br>
<script>
for (let i = 0; i < document.links.length; ++i)
document.querySelector('output').innerText += '<br>' + document.links[i].name);
</script>
</body></html>
Mit document.links[0].name
können Sie den Namen eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit diversen Verweisen und schreibt am Ende die Namen der Verweise ins Dokument.
length
Die Eigenschaft length speichert, wieviele Verweise eine HTML-Datei enthält.
<html><head><title>Test</title>
</head><body>
<a href="http://de.yahoo.com/">Yahoo</a><br>
<a href="http://www.lycos.de/">Lycos</a><br>
<map name="Testbild">
<area shape="rect" coords="1,1,249,49" href="http://selfhtml.org/" alt="SELFHTML Portalseite">
<area shape="rect" coords="1,51,149,299" href="http://aktuell.de.selfhtml.org/" alt="SELFHTML aktuell">
</map>
<img src="hypgraf.gif" width="400" height="400" usemap="#Testbild" alt="">
<script>
document.querySelector('output').innerText += '<p>Die Datei hat ' + document.links.length + ' Verweise<\/p>');
</script>
</body></html>
Mit document.links.length
können Sie die Anzahl der Verweise in einer HTML-Datei ermitteln. Das Beispiel enthält zunächst HTML-Text mit diversen Verweisen und schreibt am Ende dazu, wieviele Verweise in der Datei gefunden wurden.
<area>
-Tags definiert werden.
target
Die Eigenschaft target speichert das Zielfenster eines Verweises.
<html><head><title>Test</title>
</head><body>
<a href="http://www.selfhtml.org/" target="_top">SELFHTML</a><br>
<script>
document.links[0].target = "_blank";
</script>
</body></html>
Mit document.links[0].target
können Sie das Zielfenster eines Verweises ermitteln. Das Beispiel enthält einen Verweis, der sein Verweisziel im obersten Fenster öffnet. Im nachfolgenden JavaScript-Bereich wird diesem Verweis mit document.links[0].target="_blank"
ein anderes Zielfenster zugewiesen. Das führt dazu, dass sich das Ziel des Verweises in einem neuen Fenster öffnet.
text
Die Eigenschaft text speichert den Linktext eines Verweises.
<html><head><title>Test</title>
</head><body>
<a href="http://de.yahoo.com/">Yahoo</a><br>
<a href="http://www.google.de/">Google</a><br>
<a href="http://www.selfhtml.org/">SELFHTML</a><br>
<script>
for (let i = 0; i < document.links.length; ++i)
document.querySelector('output').innerText += '<br>' + document.links[i].text);
</script>
</body></html>
Mit document.anchors[0].text
können Sie den Text eines Verweises zwischen <a>
und </a>
ermitteln. Das Beispiel enthält zunächst einige Verweise. Unterhalb davon steht ein JavaScript, das in einer for-Schleife für jeden Verweis den Verweistext in die Datei schreibt.
x
Die Eigenschaft document.links.x speichert die horizontale Position eines Verweises gemessen vom Fensterrand.
<html><head><title>Test</title>
</head>
<body>
Hier ein Text und dann ein <a href="javascript:alert(document.links[0].x)">Verweis</a><br>
</body>
</html>
Mit document.links[0].x
können Sie die horizontale Position eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit alert() die Position des Verweises vom linken Fensterrand aus gesehen ausgegeben.
y
Die Eigenschaft document.links.y speichert die vertikale Position eines Verweises gemessen vom Fensterrand.
<html><head><title>Test</title>
</head><body>
Hier ein Text und dann ein <a href="javascript:alert(document.links[0].y)">Verweis</a><br>
</body></html>
Mit document.links[0].y
können Sie die horizontale Position eines Verweises in einer HTML-Datei ermitteln. Das Beispiel enthält einen kleinen Text, in dem ein Verweis definiert ist. Beim Anklicken des Verweises wird mit alert() die Position des Verweises vom oberen Fensterrand aus gesehen ausgegeben.