Explication détaillée de la façon de parcourir et de modifier les instances dom en JavaScript

Traverser le DOM

On peut écrire une fonction pour parcourir le DOM

function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试

Modifier les nœuds
Jetons un coup d'œil à la modification des nœuds DOM.
Obtenez d’abord le nœud à modifier.

var my = document.getElementById('closer');

Il est très simple de modifier les propriétés de cet élément. Nous pouvons changer innerHTML.

my.innerHTML = 'final';//final

Parce que innerHTML peut écrire du HTML, modifions donc le HTML.

my.innerHTML = &#39;<em>my</em> final&#39;;//<em>my</em> fnal

la balise em fait désormais partie de l'arbre dom. Nous pouvons le tester

my.firstChild;//<em> 
my.firstChild.firstChild;//my

Nous pouvons également modifier la valeur via nodeValue.

my.firstChild.firstChild.nodeValue = 'your';//your

Modifier le style
La plupart des nœuds modifiés peuvent être des styles modifiés. Les nœuds d'élément ont l'attribut style pour modifier le style. Il existe une correspondance biunivoque entre les attributs de style et les attributs CSS. Le code suivant

my.style.border = "1px solid red";

De nombreuses propriétés CSS ont des tirets ("-"), comme padding-top, ce qui est illégal en javascript. Dans ce cas, veillez à omettre le tilde et à mettre en majuscule la première lettre du deuxième mot, comme suit. margin-left devient marginLeft. Et ainsi de suite

my.style.fontWeight = 'bold';

On peut également modifier d'autres propriétés, que ces propriétés soient initialisées ou non.

my.align = "right"; 
my.name = 'myname'; 
my.id = 'further'; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">

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!