So ändern Sie DOM-Knoten mit JavaScript

Bei der Entwicklung von Webanwendungen ist JavaScript zu einem unverzichtbaren Bestandteil geworden. Mit JavaScript können Webinhalte verändert und dynamische Effekte erzielt werden. Unter diesen ist die Änderung des DOM ein sehr wichtiger Teil, da es der Schlüssel zur Interaktion mit der Webseite ist.

Was ist DOM?
DOM ist das Document Object Model, eine Baumstrukturdarstellung eines HTML-Dokuments. In diesem Dokument ist jedes HTML-Element ein Knoten, wie zum Beispiel: , ,

usw. Diese Knoten können untergeordnete Knoten und Attribute haben. Der Knoten

kann beispielsweise untergeordnete Knoten enthalten, und er kann auch Attribute wie Klasse, ID usw. haben. JavaScript verändert den Inhalt der Webseite, indem es diese Knoten manipuliert.

Wie wähle ich Knoten aus?
Um das DOM zu manipulieren, müssen wir Knoten auswählen. Dies kann auf verschiedene Arten erreicht werden, die wichtigsten sind die folgenden: Die Methode kann einen Knoten basierend auf der angegebenen ID auswählen. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

Der obige Code wählt ein HTML-Element mit der ID="myNode" aus.

Knoten nach Klasse auswählen

Um einen oder mehrere Knoten mit demselben Klassenattribut auszuwählen, können Sie die Methode getElementsByClassName() verwenden. Wie unten gezeigt:

var myNodes = document.getElementsByClassName("classNode");

Der obige Code wählt alle HTML-Elemente aus, deren Klassenattribut gleich „classNode“ ist.

Knoten nach Tag-Namen auswählen

Um alle Knoten mit angegebenen Tag-Namen auszuwählen, können Sie die Methode getElementsByTagName() verwenden. Wie unten gezeigt:

var myNodes = document.getElementsByTagName("p");

Der obige Code wählt alle

-Tags im Dokument aus.

3. Betrieb von DOM-Knotenattributen

DOM-Knoten haben viele Attribute, wie zum Beispiel: ID, Klasse, Titel usw. Wir können die Werte dieser Eigenschaften über JavaScript ändern oder abrufen. Im Folgenden sind einige häufig verwendete Methoden zur Manipulation von DOM-Knotenattributen aufgeführt:

Das innerHTML-Attribut abrufen oder festlegen

Sie können die Methode getInnerHTML() verwenden um das innerHTML der Knoteneigenschaft abzurufen. Sie können auch die Methode setInnerHTML() verwenden, um die innerHTML-Eigenschaft eines Knotens festzulegen. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

1. Das innerText-Attribut abrufen oder festlegen

Um das innerText-Attribut abzurufen, können Sie die Methode getInnerText() verwenden. und um das innerText-Attribut festzulegen, können Sie die Methode setInnerText () verwenden. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

2. NodeType-Attribut abrufen oder festlegen

nodeType-Attribut gibt den Typ des aktuellen Knotens zurück, Sie können getNodeType verwenden ()-Methode, um das Knotenattribut nodeType abzurufen. Sie können auch die Methode setNodeType() verwenden, um das nodeType-Attribut eines Knotens festzulegen. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

3. NodeName-Attribut abrufen oder festlegen

nodeName-Attribut gibt den Namen des Knotens zurück, Sie können getnodeName( )-Methode, um das Attribut nodeName nodeName abzurufen. Sie können auch die Methode setnodeName() verwenden, um das Attribut nodeName eines Knotens festzulegen. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

4. Rufen Sie die NodeValue-Eigenschaft ab oder legen Sie sie fest.

nodeValue-Eigenschaft gibt den Wert eines Knotens zurück oder legt ihn fest. Die Eigenschaft nodeValue kann mit der Methode getNodeValue() abgerufen werden. Um den Eigenschaftswert festzulegen, verwenden Sie die Methode setNodeValue(). Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

5. Rufen Sie das className-Attribut ab oder legen Sie es fest.

Das className-Attribut gibt den Klassennamen des Knotens zurück oder legt ihn fest. Das className-Attribut kann mit der Methode getclassName() abgerufen werden. Um den Attributwert festzulegen, können Sie die Methode setclassName() verwenden. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

6. ID-Attribut abrufen oder festlegen

id-Attribut gibt die ID des Knotens zurück oder legt sie fest. Das ID-Attribut kann mit der Methode getId() abgerufen werden. Um den Attributwert festzulegen, können Sie die Methode setId() verwenden. Wie unten gezeigt:

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

Erstellung und Einfügen von DOM-Knoten
7. Zusätzlich zum Ändern der DOM-Knoteneigenschaften können Sie auch DOM-Knoten erstellen und diese in die vorhandene DOM-Struktur einfügen.

DOM-Knoten erstellen

Um einen DOM-Knoten zu erstellen, können Sie die Methode createElement() verwenden. Wie unten gezeigt:

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);

DOM-Knoten einfügen
Es gibt die folgenden Punkte zum Einfügen eines DOM-Knotens:

Übergeordneten Knoten einfügen

Verwenden Die Methode appendChild() fügt Elemente am Ende des übergeordneten Knotens hinzu. Wie unten gezeigt:

var parent = document.getElementById("parent");

// 创建新的 <li> 元素
var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);

Geschwisterknoten einfügen
1. Verwenden Sie die Methode insertBefore(), um einen neuen Knoten vor einem anderen Knoten einzufügen. Wie unten gezeigt:
   

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

Knoten ersetzen
2. Verwenden Sie die Methode replaceChild(), um einen Knoten zu ersetzen. Wie unten gezeigt:
   

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

Entfernung von DOM-Knoten

DOM-Knoten können auf verschiedene Arten entfernt werden. Im Folgenden sind einige häufig verwendete Methoden aufgeführt:
3. 
   
Untergeordnete Knoten entfernen

Verwenden Sie die Methode „removeChild()“, um einen untergeordneten Knoten zu entfernen. Wie unten gezeigt:

var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);

remove self
1. Verwenden Sie die Methode „remove()“, um den Knoten selbst zu entfernen. Wie unten gezeigt:
   

var node = document.getElementById("node");

// 移除节点本身
node.remove();

Summary

Durch die Verwendung von JavaScript zur Manipulation des DOM können Webseiteninhalte, einschließlich HTML-Markup und Textinhalte, einfach geändert werden. Wir können Knoten auswählen, Knoteneigenschaften ändern, neue Elemente erstellen und einfügen sowie vorhandene Knoten löschen. Diese Vorgänge ermöglichen es der Website, sich dynamisch zu aktualisieren und auf das Benutzerverhalten zu reagieren.

Das obige ist der detaillierte Inhalt vonSo ändern Sie DOM-Knoten mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!