JavaScript で dom インスタンスを走査および変更する方法の詳細な説明

DOM を走査

DOM を走査する関数を作成できます

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

ノードを変更する
DOM ノードの変更を見てみましょう。
まず、変更するノードを取得します。

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

この要素のプロパティを変更するのは非常に簡単です。 innerHTML を変更できます

my.innerHTML = 'final';//final

innerHTML は html を書くことができるので、html を変更しましょう。

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

em タグが dom ツリーの一部になりました。テストできます

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

また、nodeValue を通じて値を変更することもできます。

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

スタイルを変更
変更されたノードのほとんどはスタイルが変更されている可能性があります。要素ノードには、スタイルを変更するための style 属性があります。 style 属性と css 属性の間には 1 対 1 の対応関係があります。次のコード

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

多くの CSS 属性には、padding-top などのダッシュ (「-」) が含まれていますが、これは JavaScript では不正です。この場合、次のように必ずチルダを省略し、2 番目の単語の最初の文字を大文字にしてください。 margin-left は marginLeft になります。など

my.style.fontWeight = 'bold';

また、これらのプロパティが初期化されているかどうかに関係なく、他のプロパティを変更することもできます。

以上がJavaScript で dom インスタンスを走査および変更する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。