JavaScript/DOM/Document/links

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document
Wechseln zu: Navigation, Suche

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