JavaScript/DOM/Document/links: Unterschied zwischen den Versionen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
K
(Alles raus, was nicht originär zu links gehört, und Beispiel verbessert)
 
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
−
Mit dem Objekt '''document.links''' haben Sie Zugriff auf Verweise, die in einer HTML-Datei definiert sind.
+
'''links''' -{{||. 1
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
  
−
{{Beispiel|zeige=dummy|
+
{{Beispiel|=|
−
{{BeispielCode|<source lang="html5">
+
{{BeispielCode|<lang="">
−
  <a href="https://de.yahoo.com/">Yahoo</a>
+
= document.('[]);
−
  <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>
 
−
 
 
−
</source>}}
 
−
}}
 
−
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 <code>href</code>.
 
  
−
Der Zugriff auf die Verweise erfolgt mit Indexnummern. Dabei geben Sie <code>document.links</code> an und dahinter in eckigen Klammern, den wievielten Verweis in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.&nbsp;h. den ersten Verweis sprechen Sie mit <code>links<nowiki>[</nowiki>0<nowiki>]</nowiki></code> an, den zweiten Verweis mit <code>links<nowiki>[</nowiki>1<nowiki>]</nowiki></code> 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 (<code>&lt;area&gt;</code>-Tag) berücksichtigt.}}
+
<code>links</code>und <code></code>, <code>links<> [] . , }} auch Sie <code>links</code> , den der <code></code> Sie [[]], der des .
−
 
 
−
{{Beachten|1=Gemäß dem HTML-spezifischen DOM können Sie Verweise über <code>document.links</code> auch über deren Namen ansprechen. Notieren Sie dazu <code>document.links.Ankername</code> mit dem Namen, den Sie bei der Definition des Verweises im einleitenden <code>&lt;a&gt;</code>-Tag im Attribut <code>name</code> angegeben haben. (Solche Verweise können Sie auch über [[JavaScript/DOM/Document/anchors|document.anchors]] ansprechen.) Damit greifen Sie auf das <code>a</code>- bzw. <code>area</code>-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 [[JavaScript/Location|location]]-Objekts.
 
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
  
 
{{Beispiel|zeige=dummy|
 
{{Beispiel|zeige=dummy|
−
{{BeispielCode|<source lang="html5"><html>
+
{{BeispielCode|<lang="html5">
−
<head>
+
<></>
−
  <title>Test</title>
+
</><>
−
</head>
+
<a href="://www.selfhtml.org/">SELFHTML</a
−
<body>
+
><>
−
  <a target="_top" href="http://www.selfhtml.org/">SELFHTML</a><br>
+
<script>
−
  <script>
+
−
    document.links[0].port = "8081";
+
document.links.;
−
  </script>
+
<></>
−
</body>
+
−
</html>
+
</>
−
</source>}}
+
</>
−
}}
+
}}
 +
}}
  
−
Über das Objekt [[JavaScript/Location|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.&nbsp;B. <code>document.link<nowiki>[</nowiki>0<nowiki>]</nowiki></code>, dahinter einen Punkt und anschließend die gewünschte Eigenschaft des <code>location</code>-Objekts.<br />
+
== auch ==
−
Im Beispiel ist ein Verweis definiert. Mit <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.port</code> wird die Eigenschaft [[JavaScript/Location/port|port]] geändert.
 
−
 
 
−
== name ==
 
−
Die Eigenschaft '''name''' speichert den Namen eines Verweises. Durch Verwendung des <code>name</code>-Attributes wird der Verweis gleichzeitig zu einem Bestandteil des [[JavaScript/DOM/Document/anchors|anchors]]-Objektes.
 
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
−
 
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
−
 
 
−
Mit <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.name</code> 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.
 
−
 
 
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
−
 
 
−
Mit <code>document.links.length</code> 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.
 
−
{{Beachten | Dabei werden auch Verweise berücksichtigt, die in verweis-sensitiven Grafiken mit Hilfe des <code>&lt;area&gt;</code>-Tags definiert werden.}}
 
−
 
 
−
 
 
−
== target ==
 
−
Die Eigenschaft '''target''' speichert das Zielfenster eines Verweises.
 
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
−
 
 
−
Mit <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.target</code> 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 <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.target="_blank"</code> 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.
 
−
{{Iconset|meta|js1.1|chr|fx|ie|op|saf}}
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
−
 
 
−
Mit <code>document.anchors<nowiki>[</nowiki>0<nowiki>]</nowiki>.text</code> können Sie den Text eines Verweises zwischen <code>&lt;a&gt;</code> und <code>&lt;/a&gt;</code> ermitteln. Das Beispiel enthält zunächst einige Verweise. Unterhalb davon steht ein JavaScript, das in einer [[JavaScript/Schleife#Schleifen mit "for"|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.
 
−
{{Iconset|meta|ro|js1.2}}
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
−
 
 
−
Mit <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.x</code> 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.
 
−
{{Iconset|meta|ro|js1.2}}
 
−
 
 
−
{{Beispiel|zeige=dummy|
 
−
{{BeispielCode|<source lang="html5"><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>
 
−
</source>}}
 
−
}}
 
  
−
Mit <code>document.links<nowiki>[</nowiki>0<nowiki>]</nowiki>.y</code> 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.
+
[]
  
 
{{Kategorie|JavaScript}}
 
{{Kategorie|JavaScript}}

Aktuelle Version vom 12. Juni 2024, 12:55 Uhr

Die Eigenschaft links des document-Objekts enthält eine HTMLCollection mit allen <a> und <area>-Elementen des Dokuments, die ein href-Attribut besitzen. Sie wurde mit DOM Level 1 von 1998 eingeführt und ist heute weitgehend obsolet. Das Ergebnis entspricht dem Aufruf von

Moderne Form von links 
const links = document.querySelectorAll('a[href],area[href]');

Hauptsächlicher Unterschied zwischen der links-Eigenschaft und dem querySelectorAll-Aufruf ist, dass links eine HTMLCollection liefert. Eine solche Collection ist live, d. h. auch wenn Sie den Wert von links in einer Variablen speichern, repräsentiert diese Collection immer den aktuellen Zustand der Seite. Von querySelectorAll erhalten Sie hingegen eine statische NodeList, die einen Schnappschuss der Seite zum Zeit des Methodenaufrufs enthält.

Beispiel 
	<a href="https://duckduckgo.com">DuckDuckGo</a>
	<a href="https://www.google.de/">Google</a>
	<a href="https://www.selfhtml.org/">SELFHTML</a>
	<ul class='linkliste'></ul>
	<script>
	const linkliste = document.querySelector(".linkliste");
	for (let i=0; i<document.links.length; ++i) {
		linkliste.insertAdjacentHTML('beforeEnd', '<li>' + document.links[i].href + '</li>');
	}
	</script>

Im Beispiel werden ein paar Verweise notiert und eine leere Liste für die gefundenen Links vorbereitet. Darunter befindet sich ein Script, das in einer for-Schleife für jeden Verweis das Verweisziel als <li>-Element in die Liste einfügt. Dieses Ziel findet sich in der href-Eigenschaft des Objekts, das den Link repräsentiert (entweder ein HTMLAnchorElement oder ein HTMLAreaElement).

Siehe auch

Abgerufen am 6.01.2026
von "http://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/links"