DOM-Manipulation
Zuvor haben Sie gesehen , dass JavaScript-Frameworks es einfach machen, bestimmte Elemente mithilfe von Selektoren und DOM- Traversal abzurufen. Um jedoch den Inhalt und das Erscheinungsbild bestimmter Elemente auf einer Webseite zu ändern, müssen Sie das DOM manipulieren und die Änderungen übernehmen. Die Verwendung von reinem JavaScript wäre eine Menge Arbeit, aber glücklicherweise bieten die meisten JavaScript-Frameworks nützliche Funktionen, die dies einfach machen.
Angenommen, Sie haben eine Box mit der ID the-box.
<div id="the-box">Nachricht geht hierher</div>
Verwenden Sie jQuery, um den Text in „Nachricht geht hierher“ zu ändern, was einfach wie folgt verwendet werden kann:
$('#the-box').html('Das ist die neue Nachricht!');
Tatsächlich können Sie HTML-Code in Funktionen verwenden und dieser wird vom Browser analysiert, zum Beispiel:
$('#the-box').html('Dies ist die <strong>neue</strong> Nachricht!');
In diesem Beispiel sieht der Inhalt im DIV-Element folgendermaßen aus:
<div id="the-box">Das ist die <strong>neue</strong> Nachricht!'</div>
Natürlich müssen Sie im Beispiel Sonderzeichen wie „größer als“ oder „kleiner als“ verwenden, anstatt spezielle HTML-Entitätscodes anzugeben. Sie können stattdessen die Textfunktion von jQuery verwenden:
$('#the-box').text('300 >200');
Der Code nach dem Aktualisieren des div-Elements lautet wie folgt:
<div id="the-box">300 > 200</div>
Im obigen Beispiel werden vorhandene Inhalte durch neue Inhalte ersetzt. Was ist, wenn Sie dem Text nur einige Informationen hinzufügen möchten? Glücklicherweise stellt jQuery für diesen Zweck die Append-Funktion bereit.
$('#the-box').append(', hier geht die Nachricht');
Nachdem Sie die oben genannten Vorgänge für das ursprüngliche Div ausgeführt haben, sieht der Inhalt im Div-Element folgendermaßen aus:
<div id="the-box">Nachricht geht hierher, hier geht die Nachricht</div>
Anstatt anzuhängen, können Sie Inhalte voranstellen und sie vor dem vorhandenen Inhalt statt danach einfügen. Darüber hinaus bietet jQuery Funktionen zum Einfügen von Inhalten in ein bestimmtes Element, entweder davor oder danach. Es gibt auch Funktionen zum Ersetzen von Inhalten, Löschen von Inhalten, Entfernen von Elementen, Klonen von Elementen und mehr.
Zusätzlich zu den DOM-Manipulationsfunktionen enthalten JavaScript-Frameworks normalerweise mehrere Funktionen zum Manipulieren von Stilen und Klassen von Elementen. Sie haben beispielsweise eine Tabelle, die eine Zeile hervorhebt, wenn die Maus darüber fährt. Sie können eine spezielle Klasse namens hover erstellen, die Sie dynamisch zu einer Zeile hinzufügen können. Mit YUI können Sie den folgenden Code verwenden, um festzustellen, ob die Zeile einen Hover-Klassennamen hat. Wenn dies der Fall ist, wird er ignoriert.
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
Ebenso verfügen die meisten JavaScript-Frameworks über integrierte Funktionen zur Bearbeitung von CSS.