Rumah > hujung hadapan web > tutorial js > JavaScript中如何遍历和修改dom实例详解

JavaScript中如何遍历和修改dom实例详解

伊谢尔伦
Lepaskan: 2017-07-20 13:24:07
asal
2002 orang telah melayarinya

遍历DOM

我们可以写个函数,用来遍历DOM


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

修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。


var my = document.getElementById('closer');
Salin selepas log masuk

非常容易更改这个元素的属性。我们可以更改innerHTML.


my.innerHTML = 'final';//final
Salin selepas log masuk

因为innerHTML可以写入html,所以我们来修改html。


my.innerHTML = &#39;<em>my</em> final&#39;;//<em>my</em> fnal
Salin selepas log masuk

em标签已经成为dom树的一部分了。我们可以测试一下


my.firstChild;//<em> 
my.firstChild.firstChild;//my
Salin selepas log masuk

我们也可以通过nodeValue来改变值。


my.firstChild.firstChild.nodeValue = &#39;your&#39;;//your
Salin selepas log masuk

修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码


my.style.border = "1px solid red";
Salin selepas log masuk

CSS属性很多都有破折号("-"),如padding-top,这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写,规范如下。 margin-left变为marginLeft。依此类推


my.style.fontWeight = &#39;bold&#39;;
Salin selepas log masuk

我们还可以修改其他的属性,无论这些属性是否被初始化。


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;">
Salin selepas log masuk

 

Atas ialah kandungan terperinci JavaScript中如何遍历和修改dom实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan