Manipulieren von DOM in WordPress mit JQuery
Veröffentlicht: 2023-02-12Dank der Open-Source-Plattform von WordPress und der lebendigen Entwickler-Community hat das Erstellen von Themen für die Plattform eine ziemlich große Anziehungskraft. Das Navigieren durch alle Elemente und Inhalte, die zum Erstellen einer WordPress-Site erforderlich sind, kann jedoch eine Herausforderung sein, abhängig von Ihren Programmierkenntnissen und -erfahrungen.
Glücklicherweise kann das Document Object Model (DOM) das Manipulieren oder Durchlaufen des HTML-Codes einer Website vereinfachen. Das DOM funktioniert, indem es Ihnen ermöglicht, einen Baum zu erstellen, der aus verschiedenen Knoten oder Objekten besteht. Dies eröffnet die Möglichkeit, mithilfe von JavaScript-Bibliotheken wie jQuery die Darstellung, Struktur oder Funktion der Seite zu verändern.
In diesem Artikel erklären wir, was das DOM ist und warum Sie es vielleicht verwenden möchten. Wir werden dann einige Standard-jQuery-Manipulationstechniken für die Verwendung des DOM mit WordPress bereitstellen. Lass uns gleich eintauchen!
Was ist das DOM?
Einfach ausgedrückt ist das DOM eine Anwendungsprogrammierschnittstelle (API) für HTML. Es erstellt einen Baum von Objekten, der den Inhalt und die Struktur einer Webseite darstellt. Es ist auch ein plattform- und sprachunabhängiges Skript, was es sehr vielseitig macht. Wenn das DOM den HTML-Quellcode auf diese Weise darstellt, macht es ihn zugänglich, sodass sich verschiedene Programmiersprachen damit verbinden können.
Warum das DOM verwenden?
Als WordPress-Benutzer sehen Sie das DOM wahrscheinlich jedes Mal in Aktion, wenn Sie auf dynamische Interaktivität stoßen. Dies kann beinhalten, wenn ein Fehler zurückgegeben wird, wenn ein Formular mit fehlenden Informationen gesendet wird. Inhaltsregler sind ein weiteres Beispiel für das verwendete DOM:
Entwickler können das DOM verwenden, um fast alle Elemente auf einer Webseite zu aktualisieren und zu ändern. Sie können es verwenden, um Dokumente zu erstellen und in ihrer Struktur zu navigieren. Das DOM kann auch zum Hinzufügen, Ändern oder Löschen von Elementen und Objekten verwendet werden.
DOM-Manipulation mit JQuery
Um es klarzustellen: DOM und HTML sind nicht identisch, obwohl sie dieselben Elemente enthalten sollten. Das DOM ist eine modellierte Darstellung des HTML-Quellcodes und kann durch clientseitiges JavaScript geändert werden.
Im Folgenden sehen wir uns Methoden in der jQuery-Bibliothek zum Testen einiger DOM-Manipulationstechniken an. Denken Sie daran, dass verschiedene Browser das DOM auf ihre eigene Weise handhaben, aber Sie müssen nichts Besonderes tun, um damit zu beginnen. Alle Browser verwenden irgendeine Form des DOM, um Seiten für JavaScript zugänglich zu machen.
DOM-Manipulationstechniken
Das DOM kann auf vielfältige Weise verwendet werden. Um seine Flexibilität zu veranschaulichen, schauen wir uns sechs Techniken an, die Ihnen den Einstieg in diese nützliche API erleichtern können.
1. Die Before()-Methode
Getreu ihrem Namen wird die Methode before() verwendet, wenn Sie ein beliebiges Element vor einem anderen Zielelement einfügen möchten, wie im Code angegeben.
In diesem Beispiel kann die Methode verwendet werden, um ein quadratisches Element mit Text über einem bestimmten Element hinzuzufügen, z. B. einer Schaltfläche, sobald darauf geklickt wird:
$(this).before( "<div class='square'>Noch ein Quadrat</div>" );
Seitenplatzierung und -layout sind Überlegungen, die Sie bei der Verwendung dieser Methode berücksichtigen sollten. Sie sollten sicherstellen, dass Ihr neues Element Ihr Layout nicht beschädigt oder visuelle Probleme verursacht.
2. Die After()-Methode
So wie Sie mit der before()- Methode Elemente vor einem anderen angegebenen Element einfügen können, ermöglicht die after()- Methode das Gegenteil. Beispielsweise könnte es verwendet werden, um ein Element direkt unter einer Schaltfläche hinzuzufügen, sobald die Schaltfläche ausgewählt ist:
$(this).after( "<div class='square'>Noch ein Quadrat</div>" );
Das Hinzufügen interaktiver Inhalte durch Manipulation des DOM mit jQuery auf diese Weise ist eine solide Möglichkeit, Interaktivität zu gewinnen, ohne dabei an Geschwindigkeit zu verlieren.
3. Die Append()-Methode
Anstatt einzelne neue Elemente erscheinen zu lassen, möchten Sie vielleicht Ihr neues Element zu einem vorhandenen hinzufügen. Vielleicht möchten Sie zum Beispiel den Text „Happy Birthday!“ hinzufügen. innerhalb eines farbigen Bereichs, wenn auf eine bestimmte Schaltfläche geklickt wird.
Um Ihr neues Element an den vorhandenen Inhalt des Zielelements anzuhängen, würden Sie den jQuery-Befehl append() in den HTML-Quellcode einfügen:
$( ".box" ).append( "<p>Alles Gute zum Geburtstag!</p>" );
Diese Methode fügt die Manipulation am Ende des Elements hinzu, das Sie in der Zeichenfolge angeben, anstatt es davor oder danach zu setzen. Im Kontext des vollständigen HTML-Dokuments können Sie sehen, wie die Manipulation stattfindet:
<!doctype html>
<title>Beispiel</title>
<Stil>
.Kasten {
Hintergrund: orange;
Farbe weiß;
Farbe weiß;
Breite: 150px;
Polsterung: 20px;
Rand: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<Skript>
$( Funktion() {
$( "Schaltfläche") .click( function() {
$(this).after( "<div class='box'>Happy Birthday!</div>" );
});
});
</script>
<button>Box erstellen</button>
Diese Technik bietet Ihnen eine einfache Möglichkeit, auf engstem Raum Interaktivität zu schaffen. Denken Sie daran, dass bei dieser speziellen Methode die Manipulationen als Erweiterung des von Ihnen angegebenen Elements angezeigt werden und nicht als neue einzelne Elemente.
4. Die Prepend()-Methode
Als Ausgleich zur Methode append() fügt prepend() ein Element am Ende des Zielelements hinzu, das Sie im jQuery-Befehl angeben:
$( ".banner" ).prepend( "<p>Alles Gute zum Geburtstag!</p>" );
In diesem Beispiel wird der Text „Happy Birthday!“ würde am Anfang des in der Codezeichenfolge angegebenen Banners erscheinen.
Es ist erwähnenswert, dass diese Methoden (einschließlich before() , after() und append() ) allesamt akzeptable Ansätze für einfache Anwendungen sind. Wir empfehlen jedoch andere Techniken für komplexere Einfügungen.
5. Die Clone()-Methode
Als nächstes ist die clone()- Methode eine ziemlich mächtige Option, um das DOM mit jQuery zu manipulieren. Während Sie mit den vorherigen vier Techniken Elemente einfügen und verschieben können, ermöglicht clone() das Kopieren eines Elements, das Entfernen von seinem ursprünglichen Platz und das erneute Einfügen oder Anhängen an einer anderen Stelle.
Diese Linie bedeutet beispielsweise, dass das ursprüngliche Box-Element dort bleibt, wo es ist, während ein Klon davon an das Dreieck-Element angehängt wird:
$( ".box" ).clone().appendTo( ".triangle" );
Der Nachteil dieser Methode ist, dass sie das id- Attribut des Elements duplizieren kann. Diese Attribute sollen eindeutig sein. Sie können dieses Problem vermeiden, indem Sie die Klassenattribute als Bezeichner verwenden und die Klonmethode sparsam einsetzen.
6. Die Wrap()-Methode
Schließlich ist die Methode wrap() nützlich, wenn Sie ein Element um einen vorhandenen String wickeln möchten. Sie können beispielsweise mehrere Absätze in eine neue HTML-Struktur einschließen, indem Sie die Klasse identifizieren und angeben, welche Struktur implementiert wird:
$( ".targetclass" ).wrap( "<div class='new'></div>" );
Mit dieser Technik erstellen Sie ein <div> um jedes Element, das mit der Zielklasse in der Zeichenfolge wrap() übereinstimmt. Sie können zwar eine Umhüllung erstellen, die mehrere Ebenen tief ist, Sie sollten jedoch darauf achten, dass es nur ein innerstes Element gibt.
Fehlerbehebung beim DOM
Wenn es um die Arbeit mit dem DOM geht, möchten wir einen wichtigen Aspekt hervorheben, auf den Sie achten sollten. Um das Laden Ihrer Seiten schnell zu halten und unnötigen Code zu vermeiden (insbesondere wenn Sie ein Design entwickeln), sollten Sie darauf achten, keine Elemente zu verwenden, die nicht Teil des DOM-Baums sind.
Wenn Sie sich nicht sicher sind, ob ein Element Teil des DOM ist oder nicht, können Sie jedes einzelne über Ihren Browser im Frontend Ihrer Website überprüfen. Sie können Elemente auf der Seite untersuchen und bestimmen, wo sie in der DOM-Struktur enthalten sind.
Dies ist besonders hilfreich, wenn ein anderes Skript den ursprünglichen HTML-Code Ihrer Website geändert hat. Andernfalls sehen Ihr HTML und Ihr DOM manchmal genau gleich aus.
Entdecken Sie andere WP-Engine-Ressourcen und -Tools
Wenn Sie sich das DOM als einen organischen Teil Ihrer Website vorstellen, eine lebendige Ressource, die auf HTML-Quellcode reagiert, ist die Leistungsfähigkeit seiner Zugänglichkeit ziemlich erstaunlich. Aus diesem Grund kann das Verständnis des DOM und seiner Verwendung zur Verbesserung Ihrer Projekte dazu beitragen, Ihre Website auf die nächste Stufe zu heben.
Die Manipulation des DOM mit jQuery unterstreicht die Schönheit der Open-Source-Plattform von WordPress. Hier bei WP Engine verstehen wir, wie hochwertige Entwicklerressourcen den Unterschied ausmachen können. Aus diesem Grund bieten wir WordPres-Benutzern viel Hilfe und erstklassige Hosting-Pläne!