2009-07-09 4 views
0

Ich mache ein Projekt mit YUI, wo ich versuche, Dinge zu tun, die ich vorher mit jQuery gemacht habe. Ich finde es schwierig, einige grundlegende Operationen zu tun, und zwar:Wie grundlegende DOM-Manipulation (Inhalt löschen, an Inhalt anfügen) mit YUI?

  1. klaren Inhalt von DOM-Element

In jQuery zum Inhalt von DOM-Element anhängen, ich tun würde:

$(".someSelector").empty().append("<div>something</div>"); 

Wie geht das oben in YUI? Scheint so, als ob es in vielen Aspekten auf die W3C DOM-Spezifikation verweist, ich bin mit dieser Spezifikation nicht sehr vertraut. Wenn es ein spezifisches W3C oder ein solches Material gibt, das ich verwenden sollte, geben Sie bitte spezifische Links an.

Antwort

3

Hier ist die YUI-Dokumentation für Dom-Methoden.
Yahoo! UI Library > dom > YAHOO.util.Dom
Oder versuchen

YAHOO.util.Dom.get("somediv").innerHTML("<div>something</div>"); 
+2

Ja, sieht so aus, als müsste ich innerHTML manipulieren. Irgendwie fühlt sich die jQuery API eleganter an. – Jaanus

3

YUI scheint nicht das gleiche Maß an DOM-Manipulation zu schaffen, dass jQuery hat (obwohl ich nicht mit YUI3 noch gespielt haben, so dass diese ändern können).

innerHTML funktioniert definitiv, und es war einmal schneller, obwohl ich denke, das ändert sich in einigen modernen Browsern. Das Anhängen von Inhalt ist einfach über die Standardmethoden möglich:

element.appendChild(childElement); 

Clearing ist ein wenig mehr beteiligt. Ich habe tatsächlich den YUI DOM-Dienstprogramm erstreckt, und habe dieses Bild als ein Verfahren endet:

removeChildren : function(elem) 
{ 
    var theElement = this.get(elem); 
    var elemChildren = theElement.childNodes; 
    var childCount = elemChildren.length; 
    for (var i = childCount -1; i >= 0; i--) 
    { 
     theElement.removeChild(theElement.childNodes[i]); 
    } 
} 

Es ist wichtig, als zu beachten, wenn sie durch die untergeordneten Knoten Looping, ich mit dem letzten Elemente beginnen und meinen Weg nach vorne. Dies liegt daran, dass die Größe des Arrays geändert wird, sobald ein Knoten entfernt wird. Wenn ich den Knoten an der Position [0] entferne, bewegen sich alle Elemente des Arrays eine Position nach unten (was bedeutet, dass das Element, das an Position [1] war, nun das Element an Position [0] wird). Wenn ich am Anfang des Arrays beginnen würde, würde ich Elemente vermissen und die Grenze des Arrays schnell überschreiten.