Tutoriel JavaScript : explication détaillée de la façon de mettre à jour, d'insérer et de modifier le code d'instance du nœud dom

Mise à jour

Après avoir obtenu un nœud DOM, nous pouvons le mettre à jour.

Vous pouvez modifier directement le texte du nœud. Il existe deux méthodes :

La première consiste à modifier le innerHTML attribut, cette La méthode est très puissante. Non seulement vous pouvez modifier le contenu du texte d'un nœud DOM, mais vous pouvez également modifier directement le sous-arbre à l'intérieur du nœud DOM via des fragments HTML :

// 获取<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>的内部结构已修改

Utilisation Lorsque

innerHTML, veuillez faire attention à savoir si vous devez écrire du HTML. Si la chaîne écrite est obtenue via le réseau, faites attention au codage des caractères pour éviter les attaques XSS. La seconde consiste à modifier les attributs
innerText ou textContent, afin que la chaîne puisse être automatiquement codée en HTML et ne puisse pas être défini. N'importe quelle balise HTML :

// 获取<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>

La différence entre les deux est que lors de la lecture de l'attribut,

innerText n'est pas renvoyé Masque le texte de l'élément, tandis que textContent renvoie tout le texte. Notez également qu'IE59a21ce0d93713c3b4e5bd47e70b2b7d94b3e26ee717c64999d7867364b1b4a3, alors, utilisez directement innerHTML = '427924e0bc1c500e0479e017d951eadfchild54bdf357c58b8a65c66d7c19c8e4d114' peut modifier le contenu du nœud DOM, ce qui équivaut à "insérer" un nouveau nœud DOM. Si le nœud DOM n'est pas vide, vous ne pouvez pas le faire car
innerHTML remplacera directement tous les nœuds enfants d'origine. Il existe deux façons d'insérer de nouveaux nœuds. La première consiste à utiliser
appendChild pour ajouter un nœud enfant au dernier nœud enfant du nœud parent. Par exemple :

<!-- 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>

Mettez

6de4cee9b51ae144091be93786a2abe8JavaScript94b3e26ee717c64999d7867364b1b4a3Dernier élément ajouté à e672fde323644dddb9191ec4d9b38dcf :

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

Maintenant, la structure HTML devient comme ceci :

<!-- 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>

Parce que le nœud js que nous avons inséré existe déjà dans l'arborescence actuelle du document, ce nœud sera d'abord supprimé de l'emplacement d'origine et insérez-le dans le nouvel emplacement.

Le plus souvent, nous créerons un nouveau nœud à partir de zéro et l'insérerons dans la position spécifiée :

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

De cette façon, nous l'ajouterons dynamiquement A nouveau nœud :

<!-- 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>

Créer dynamiquement un nœud et l'ajouter à l'arborescence DOM peut réaliser de nombreuses fonctions. Par exemple, le code suivant crée dynamiquement un nœud

c9ccee2e6ea535a969eb3f532ad9fe89 puis l'ajoute à 93f0f5c25f18dab9d176bd4f6de5d30e à la fin du nœud, une nouvelle définition CSS est ajoutée dynamiquement au document :

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

Vous pouvez exécuter le code ci-dessus dans la console Chrome et observer la page Changements de style.

insertBefore

Et si nous voulons insérer le nœud enfant à la position spécifiée ? Vous pouvez utiliser

parentElement.insertBefore(newElement, referenceElement);, et le nœud enfant sera inséré avant referenceElement. En prenant le HTML ci-dessus comme exemple, en supposant que nous voulons insérer Haskell avant Python :

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

peut être écrit comme ceci :

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

La nouvelle structure HTML est la suivante :

<!-- 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>

est visible, utilisez

insertBeforeLe point clé est d'obtenir une référence à un "nœud enfant de référence". Plusieurs fois, il est nécessaire de parcourir tous les nœuds enfants d'un nœud parent, ce qui peut être réalisé en itérant l'attribut children :

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

Supprimer

删除一个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属性时刻都在变化。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!