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 IE<9 textContent nicht unterstützt. Das Ändern von CSS ist ebenfalls ein häufig erforderlicher Vorgang. Das Attribut
style des DOM-Knotens entspricht allen CSS und kann direkt abgerufen oder festgelegt werden. Da CSS Namen wie font-size zulässt, es sich jedoch nicht um einen gültigen Eigenschaftsnamen in JavaScript handelt, muss er in JavaScript als Camel-Case-Namensgebung fontSize umgeschrieben werden :

// 获取<p id="p-id">...</p>
var p = document.getElementById(&#39;p-id&#39;);
// 设置CSS:
p.style.color = &#39;#ff0000&#39;;
p.style.fontSize = &#39;20px&#39;;
p.style.paddingTop = &#39;2em&#39;;

Einfügen

Wenn wir ein bestimmtes DOM erhalten Knoten: Was sollten Sie tun, wenn Sie ein neues DOM in diesen DOM-Knoten einfügen möchten?

Wenn dieser DOM-Knoten leer ist, zum Beispiel

, , dann verwenden Sie direkt innerHTML = '< span>child' 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

JavaScript

Letztes Element hinzugefügt zu

:

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