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'IE<9 ne prend pas en charge textContent. La modification du CSS est également une opération fréquemment requise. L'attribut
style du nœud DOM correspond à tous les CSS et peut être obtenu ou défini directement. Parce que CSS autorise des noms comme font-size, mais ce n'est pas un nom de propriété valide en JavaScript, il doit être réécrit en JavaScript sous la forme d'un nom de casse chameau fontSize  :

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

Insérer

Quand on obtient un certain DOM node , si vous souhaitez insérer un nouveau DOM dans ce nœud DOM, que devez-vous faire ?

Si ce nœud DOM est vide, par exemple

, alors, utilisez directement innerHTML = '< span>child' 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

JavaScript

Dernier élément ajouté à

 :

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