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屬性是一一對應的。如下程式碼

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

CSS屬性很多都有破折號("-")，如padding-top，這在javascript中是不合法的。這樣的話一定要省略波折號並把第二個字的開頭字母大寫，規範如下。 margin-left變成marginLeft。依此類推

my.style.fontWeight = 'bold';

我們也可以修改其他的屬性，無論這些屬性是否被初始化。

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

 

#

以上是JavaScript如何遍歷與修改dom實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！