Ausführliche Erklärung zum Durchlaufen und Ändern von Dom-Instanzen in JavaScript

DOM durchqueren

Wir können eine Funktion schreiben, um DOM zu durchqueren

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

Knoten ändern
Werfen wir einen Blick auf die Änderung von DOM-Knoten.
Besorgen Sie sich zunächst den Knoten, der geändert werden soll.

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

Es ist sehr einfach, die Eigenschaften dieses Elements zu ändern. Wir können innerHTML ändern.

my.innerHTML = 'final';//final

Da innerHTML HTML schreiben kann, ändern wir also HTML.

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

em-Tag ist Teil des Dom-Baums geworden. Wir können es testen

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

Wir können den Wert auch über nodeValue ändern.

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

Stil ändern
Bei den meisten geänderten Knoten handelt es sich möglicherweise um geänderte Stile. Elementknoten verfügen über das Stilattribut, um den Stil zu ändern. Es besteht eine Eins-zu-eins-Entsprechung zwischen Stilattributen und CSS-Attributen. Der folgende Code

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

Viele CSS-Eigenschaften haben Bindestriche ("-"), wie zum Beispiel padding-top, was in Javascript illegal ist. Achten Sie in diesem Fall darauf, die Tilde wegzulassen und den ersten Buchstaben des zweiten Wortes wie folgt groß zu schreiben. margin-left wird zu marginLeft. Und so weiter

my.style.fontWeight = 'bold';

Wir können auch andere Eigenschaften ändern, unabhängig davon, ob diese Eigenschaften initialisiert sind oder nicht.

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

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Durchlaufen und Ändern von Dom-Instanzen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!