首頁 > web前端 > js教程 > JavaScript如何遍歷與修改dom實例詳解

JavaScript如何遍歷與修改dom實例詳解

伊谢尔伦
發布: 2017-07-20 13:24:07
原創
2001 人瀏覽過

遍歷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 = &#39;your&#39;;//your
登入後複製

修改樣式
大部分修改節點可能都是修改樣式。元素節點有style屬性用來修改樣式。 style的屬性和css屬性是一一對應的。如下程式碼


my.style.border = "1px solid red";
登入後複製

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


my.style.fontWeight = &#39;bold&#39;;
登入後複製

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


my.align = "right"; 
my.name = &#39;myname&#39;; 
my.id = &#39;further&#39;; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">
登入後複製

 

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板