JavaScript-Tutorial: Ausführliche Erklärung zum Aktualisieren, Einfügen und Ändern des Dom-Knoten-Instanzcodes

Aktualisieren

Nachdem wir einen DOM-Knoten erhalten haben, können wir ihn aktualisieren.

Sie können den Text des Knotens direkt ändern. Es gibt zwei Methoden:

Eine besteht darin, das innerHTML Attribut, diese Methode ist sehr leistungsfähig. Sie können nicht nur den Textinhalt eines DOM-Knotens ändern, sondern auch den Teilbaum innerhalb des DOM-Knotens über HTML-Fragmente ändern:

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本为abc:
p.innerHTML = &#39;ABC&#39;; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = &#39;ABC <span style="color:red">RED</span> XYZ&#39;;
// <p>...</p>的内部结构已修改

Verwendung Wenn

innerHTML, achten Sie bitte darauf, ob Sie HTML schreiben müssen. Wenn die geschriebene Zeichenfolge über das Netzwerk abgerufen wird, achten Sie auf die Zeichenkodierung, um XSS-Angriffe zu vermeiden. Die zweite besteht darin, die Attribute
innerText oder textContent zu ändern, sodass die Zeichenfolge automatisch HTML-codiert werden kann und nicht Beliebiges HTML-Tag:

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置文本:
p.innerText = &#39;<script>alert("Hi")</script>&#39;;
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p>

Der Unterschied zwischen den beiden besteht darin, dass beim Lesen des Attributs

innerText wird nicht zurückgegeben. Versteckt den Text des Elements, während textContent den gesamten Text zurückgibt. Beachten Sie außerdem, dass IE958763e0bce27b70d8e3ec60bbfc5a9a94b3e26ee717c64999d7867364b1b4a3, , dann verwenden Sie direkt innerHTML = '427924e0bc1c500e0479e017d951eadfchild54bdf357c58b8a65c66d7c19c8e4d114' kann den Inhalt des DOM-Knotens ändern, was dem „Einfügen“ eines neuen DOM-Knotens entspricht. Wenn der DOM-Knoten nicht leer ist, können Sie dies nicht tun, da
innerHTML alle ursprünglichen untergeordneten Knoten direkt ersetzt. Es gibt zwei Möglichkeiten, neue Knoten einzufügen. Eine besteht darin,
appendChild zu verwenden, um einen untergeordneten Knoten zum letzten untergeordneten Knoten des übergeordneten Knotens hinzuzufügen. Zum Beispiel:

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

Put

6de4cee9b51ae144091be93786a2abe8JavaScript94b3e26ee717c64999d7867364b1b4a3Letztes Element hinzugefügt zu e672fde323644dddb9191ec4d9b38dcf:

var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

Die HTML-Struktur sieht nun wie folgt aus:

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</p>

Da der von uns eingefügte js-Knoten bereits im aktuellen Dokumentbaum vorhanden ist, wird dieser Knoten zuerst gelöscht den ursprünglichen Speicherort und fügen Sie ihn am neuen Speicherort ein.

Häufiger erstellen wir einen neuen Knoten von Grund auf und fügen ihn an der angegebenen Position ein:

var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

Auf diese Weise fügen wir ihn dynamisch hinzu A neuer Knoten:

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</p>

Das dynamische Erstellen eines Knotens und das Hinzufügen zum DOM-Baum können viele Funktionen erreichen. Der folgende Code erstellt beispielsweise dynamisch einen Knoten

c9ccee2e6ea535a969eb3f532ad9fe89 und fügt ihn am Ende zu 93f0f5c25f18dab9d176bd4f6de5d30e hinzu des Knotens wird dem Dokument dynamisch eine neue CSS-Definition hinzugefügt:

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

Sie können den obigen Code in der Chrome-Konsole ausführen und die Seite beobachten Stiländerungen.

insertBefore

Was ist, wenn wir den untergeordneten Knoten an der angegebenen Position einfügen möchten? Sie können

parentElement.insertBefore(newElement, referenceElement); verwenden, und der untergeordnete Knoten wird vor referenceElement eingefügt. Nehmen wir den obigen HTML-Code als Beispiel und gehen davon aus, dass wir Haskell vor Python einfügen möchten:

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

kann wie folgt geschrieben werden:

var
  list = document.getElementById('list'),
  ref = document.getElementById('python'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

Die neue HTML-Struktur lautet wie folgt:

<!-- HTML结构 -->
<p id="list">
  <p id="java">Java</p>
  <p id="haskell">Haskell</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</p>

ist sichtbar, Verwenden Sie

insertBeforeDer entscheidende Punkt besteht darin, einen Verweis auf einen „Referenz-Kindknoten“ zu erhalten. Oft ist es notwendig, alle untergeordneten Knoten eines übergeordneten Knotens zu durchlaufen, was durch Iterieren des Attributs children erreicht werden kann:

var
  i, c,
  list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i个子节点
}

Löschen

删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

<p id="parent">
  <p>First</p>
  <p>Second</p>
</p>

当我们用如下代码删除子节点时：

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当e388a4556c0f65e1904146cc1a846beeFirst94b3e26ee717c64999d7867364b1b4a3节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

Das obige ist der detaillierte Inhalt vonJavaScript-Tutorial: Ausführliche Erklärung zum Aktualisieren, Einfügen und Ändern des Dom-Knoten-Instanzcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!