Links mit bestimmter Klasse suchen und Linktexte ausgeben

[molily]

Hallo,

function breadcrumbfunction()

{
  var breadcrumbNavi = document.getElementById("BreadcrumbNavi");

for (var i = 0; i < document.links.length; i++)
  {
    if (document.links[i].classList.contains("isActive"))
    {
      breadcrumbNavi.innerHTML += "> " + document.links[i].innerHTML;
    }
  }
}

  
Wenn man einen Link in der Schleife erzeugt, wie limu es vor hat, dann hat man ggf. eine Endlosschleife. Sowohl document.getElementsByTagName als auch document.links sind Live-Knotenlisten, die immer das DOM wiederspiegeln. Das Einfügen eines Links sorgt dafür, dass sich die Liste während der Iteration vergrößert. Hier ist jQuery vorteilhaft, weil es feste Knotenlisten zurückgibt.  
  
Man kann die Live-Knotenliste in einen einfachen, abgekoppelten Array mit Elementknoten umwandeln:  
  
`var links = Array.prototype.slice.call(document.links);`{:.language-javascript}  
  
@limu: Ich verstehe allerdings nicht, wieso eine Seite auf sich selbst verlinken soll. Oder handelt es sich um die jeweilige Oberkategorie?  
  
Noch ein Punkt, wo jQuery vorteilhaft ist:  
  
`breadcrumbNavi.innerHTML += '…';`{:.language-javascript}  
  
Das serialisiert den Elementinhalt zu einem String, ergänzt diesen und parst ihn wieder in einen DOM-Baum. Das spielt bei ein bisschen HTML keine Rolle, bei größeren Elementen leidet die Performance merklich. Und sämtliche Event-Handler und sonstige nicht serialisierbaren Daten im DOM gehen verloren.  
  
Wenn man hier einfaches JavaScript schreiben will, so wäre [insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML) eine bessere Wahl:  
  
`breadcrumbNavi.insertAdjacentHTML('beforeend', '…');`{:.language-javascript}  
  
Diese Methode ist ziemlich unbekannt, aber äußerst nützlich. Sie wird auch von jQuery intern verwendet.  
  
In ferner Zukunft wird es [append](http://dom.spec.whatwg.org/#parentnode) geben (DOM4):  
  
`breadcrumbNavi.append('…');`{:.language-javascript}  
  
Bis dato hilft einem jQuery, viele Fallstricke zu vermeiden, die reines JavaScript so mit sich bringt.  
  
Mathias

-- 
[Chaplin.js – JavaScript application architecture using Backbone.js.](http://chaplinjs.org/)