Einführung
In den beiden vorherigen Abschnitten der Understanding the DOM -Serie haben wir gelernt, https://www.digitalocean.com / community / tutorials / how-to-access-elements-in-the-dom [So greifen Sie auf Elemente im DOM zu] und https://www.digitalocean.com/community/tutorials/how-to-traverse-the- dom [Durchqueren des DOM]. Mithilfe dieses Wissens kann ein Entwickler Klassen, Tags, IDs und Selektoren verwenden, um einen beliebigen Knoten im DOM zu finden, und übergeordnete, untergeordnete und geschwisterliche Eigenschaften verwenden, um relative Knoten zu finden.
Der nächste Schritt, um das DOM besser zu beherrschen, besteht darin, das Hinzufügen, Ändern, Ersetzen und Entfernen von Knoten zu erlernen. Eine Aufgabenlistenanwendung ist ein praktisches Beispiel für ein JavaScript-Programm, in dem Sie Elemente im DOM erstellen, ändern und entfernen müssen.
In diesem Lernprogramm wird beschrieben, wie Sie neue Knoten erstellen und in das DOM einfügen, vorhandene Knoten ersetzen und Knoten entfernen.
Neue Knoten erstellen
In einer statischen Website werden der Seite Elemente hinzugefügt, indem HTML-Code direkt in eine HTML-Datei geschrieben wird. In einer dynamischen Webanwendung werden Elemente und Text häufig mit JavaScript hinzugefügt. Die Methoden + createElement () + und + createTextNode () + werden verwendet, um neue Knoten im DOM zu erstellen.
| Property/Method | Description |
|---|---|
Create a new element node |
|
Create a new text node |
|
Get or set the text content of an element node |
|
Get or set the HTML content of an element |
Zunächst erstellen wir eine "+ index.html" -Datei und speichern sie in einem neuen Projektverzeichnis.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learning the DOM</title>
</head>
<body>
<h1>Document Object Model</h1>
</body>
</html>Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie "Inspizieren", um die Entwicklertools zu öffnen. Navigieren Sie dann zu * https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console [ Konsole]*.
Wir werden "+ createElement () " für das " document" -Objekt verwenden, um ein neues "+ p +" - Element zu erstellen.
const paragraph = document.createElement('p');Wir haben ein neues "+ p +" - Element erstellt, das wir in der Console testen können.
console.log(paragraph)Output<p></p>Die Variable "+ paragraph " gibt ein leeres " p " - Element aus, was ohne Text nicht sehr nützlich ist. Um dem Element Text hinzuzufügen, setzen wir die Eigenschaft " textContent +".
paragraph.textContent = "I'm a brand new paragraph.";
console.log(paragraph)Output<p>I'm a brand new paragraph.</p>Eine Kombination von + createElement () + und + textContent + erzeugt einen vollständigen Elementknoten.
Eine alternative Methode zum Festlegen des Inhalts des Elements ist die Eigenschaft + innerHTML +, mit der Sie einem Element sowohl HTML als auch Text hinzufügen können.
paragraph.innerHTML = "I'm a paragraph with <strong>bold</strong> text.";Es ist auch möglich, einen Textknoten mit der Methode + createTextNode () + zu erstellen.
const text = document.createTextNode("I'm a new text node.");
console.log(text)Output"I'm a new text node."Mit diesen Methoden haben wir neue Elemente und Textknoten erstellt. Diese werden jedoch erst dann im Frontend einer Website angezeigt, wenn sie in das Dokument eingefügt wurden.
Einfügen von Knoten in das DOM
Um die neuen Textknoten und Elemente zu sehen, die wir am Frontend erstellen, müssen wir sie in das + document + einfügen. Die Methoden + appendChild () + und + insertBefore () + werden verwendet, um Elemente am Anfang, in der Mitte oder am Ende eines übergeordneten Elements einzufügen, und + replaceChild () + wird verwendet, um einen alten Knoten zu ersetzen mit einem neuen Knoten.
| Property/Method | Description |
|---|---|
Add a node as the last child of a parent element |
|
Insert a node into the parent element before a specified sibling node |
|
Replace an existing node with a new node |
Um diese Methoden zu üben, erstellen wir eine Aufgabenliste in HTML:
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
</ul>Wenn Sie Ihre Seite in den Browser laden, sieht sie folgendermaßen aus:
image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-1.png [DOM Screenshot 1]
Um ein neues Element am Ende der Aufgabenliste hinzuzufügen, müssen Sie das Element erstellen und zuerst Text hinzufügen, wie im Abschnitt „Neue Knoten erstellen“ oben beschrieben.
// To-do list ul element
const todoList = document.querySelector('ul');
// Create new to-do
const newTodo = document.createElement('li');
newTodo.textContent = 'Do homework';Nachdem wir ein vollständiges Element für unsere neue Aufgabe haben, können wir es mit + appendChild () + am Ende der Liste anfügen.
// Add new todo to the end of the list
todoList.appendChild(newTodo);Sie können sehen, dass das neue "+ li " - Element an das Ende des " ul +" angehängt wurde.
todo.html
<ul>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-2.png [DOM Screenshot 2]
Möglicherweise müssen wir eine Aufgabe mit höherer Priorität ausführen und möchten sie am Anfang der Liste hinzufügen. Wir müssen ein anderes Element erstellen, da "+ createElement () +" nur ein Element erstellt und nicht wiederverwendet werden kann.
// Create new to-do
const anotherTodo = document.createElement('li');
anotherTodo.textContent = 'Pay bills';Wir können es mit + insertBefore () + an den Anfang der Liste setzen. Diese Methode benötigt zwei Argumente: Das erste ist der neue untergeordnete Knoten, der hinzugefügt werden soll, und das zweite ist der Geschwisterknoten, der unmittelbar auf den neuen Knoten folgt. Mit anderen Worten, Sie fügen den neuen Knoten vor dem nächsten Geschwisterknoten ein. Dies sieht ungefähr so aus wie der folgende Pseudocode:
parentNode.insertBefore(newNode, nextSibling);In unserem Beispiel für eine Aufgabenliste fügen wir das neue Element "+ anotherTodo " vor dem ersten untergeordneten Element der Liste hinzu, bei dem es sich derzeit um das Listenelement " Lebensmittel kaufen +" handelt.
// Add new to-do to the beginning of the list
todoList.insertBefore(anotherTodo, todoList.firstElementChild);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the cat</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-3.png [DOM Screenshot 3]
Der neue Knoten wurde erfolgreich am Anfang der Liste hinzugefügt. Jetzt können wir einem übergeordneten Element einen Knoten hinzufügen. Als Nächstes möchten wir möglicherweise einen vorhandenen Knoten durch einen neuen Knoten ersetzen.
Wir ändern eine vorhandene Aufgabe, um zu veranschaulichen, wie ein Knoten ersetzt wird. Der erste Schritt zum Erstellen eines neuen Elements bleibt derselbe.
const modifiedTodo = document.createElement('li');
modifiedTodo.textContent = 'Feed the dog';Wie "+ insertBefore () " benötigt " replaceChild () +" zwei Argumente - den neuen Knoten und den zu ersetzenden Knoten, wie im folgenden Pseudocode gezeigt.
parentNode.replaceChild(newNode, oldNode);Wir werden das dritte untergeordnete Element der Liste durch die geänderte Aufgabe ersetzen.
// Replace existing to-do with modified to-do
todoList.replaceChild(modifiedTodo, todoList.children[2]);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
<li>Do homework</li>
</ul>image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-4.png [DOM Screenshot 4]
Mit einer Kombination aus "+ appendChild () ", " insertBefore () " und " replaceChild () +" können Sie Knoten und Elemente an einer beliebigen Stelle im DOM einfügen.
Knoten aus dem DOM entfernen
Jetzt wissen wir, wie Elemente erstellt, dem DOM hinzugefügt und vorhandene Elemente geändert werden. Der letzte Schritt besteht darin, zu lernen, wie vorhandene Knoten aus dem DOM entfernt werden. Untergeordnete Knoten können mit + removeChild () + von einem übergeordneten Knoten entfernt werden, und ein Knoten selbst kann mit + remove () + entfernt werden.
| Method | Description |
|---|---|
Remove child node |
|
Remove node |
Anhand des obigen Aufgabenbeispiels möchten wir Elemente löschen, nachdem sie abgeschlossen wurden. Wenn Sie Ihre Hausaufgaben erledigt haben, können Sie mit + removeChild () + den Eintrag + Do homework + entfernen, der zufällig das letzte untergeordnete Element der Liste ist.
todoList.removeChild(todoList.lastElementChild);todo.html
<ul>
<li>Pay bills</li>
<li>Buy groceries</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-5.png [DOM Screenshot 5]
Eine andere Methode könnte darin bestehen, den Knoten selbst zu entfernen, indem die Methode + remove () + direkt auf dem Knoten verwendet wird.
// Remove second element child from todoList
todoList.children[1].remove();todo.html
<ul>
<li>Pay bills</li>
<li>Feed the dog</li>
<li>Do laundry</li>
</ul>image: https://assets.digitalocean.com/articles/eng_javascript/dom/to-do-6.png [DOM Screenshot 6]
Zwischen + removeChild () + und + remove () + können Sie einen beliebigen Knoten aus dem DOM entfernen. Eine andere Methode, um untergeordnete Elemente aus dem DOM zu entfernen, besteht darin, die Eigenschaft "+ innerHTML " eines übergeordneten Elements auf eine leere Zeichenfolge ("" "+") zu setzen. Dies ist nicht die bevorzugte Methode, da sie weniger explizit ist, Sie sie jedoch möglicherweise im vorhandenen Code sehen.
Fazit
In diesem Tutorial haben wir gelernt, wie Sie mit JavaScript neue Knoten und Elemente erstellen und in das DOM einfügen sowie vorhandene Knoten und Elemente ersetzen und entfernen.
An dieser Stelle in der Understanding the DOM series erfahren Sie, wie Sie auf ein Element im DOM zugreifen können Knoten im DOM, und ändern Sie das DOM selbst. Sie können sich jetzt darauf verlassen, grundlegende Front-End-Webanwendungen mit JavaScript zu erstellen.