Javascript入門學習第七篇 js dom實例操作第1/2頁

更新時間：2008年07月06日 10:02:12 作者：

上篇文章我們講了用dom方式創(chuàng)建節(jié)點，復制節(jié)點，插入節(jié)點。今天我們將講刪除節(jié)點，替換節(jié)點，查找節(jié)點等。

直接從方法說起：
1，    刪除節(jié)點。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要刪除的節(jié)點的父節(jié)點是什么？可以使用parentNode屬性。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>

2，    替換節(jié)點。repalceChild()
element.repalceChild( newNode , oldNode );  // 新節(jié)點是客人，肯定先服務他咯。。oldNode必須是Element的一個子節(jié)點。
例子：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg =  document.getElementById("b");
var para =  document.createElement("p");
cssrain.replaceChild( para , msg  );
</script>

3，查找節(jié)點
相對上面的方法，查找節(jié)點是比較簡單的。
因為很多人都用過。(記得我認識js的第一句就是getElementById();)
getElementById();
返回一個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。

getElementsByTagName() 查找標簽名的所有元素。
返回一個集合，可以用循環(huán)取出每個對象，對象擁有 nodeName , nodeType , parentNode , ChildNodes 等屬性。
例子：
  var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
           ps[i].setAttribute(“title”,”hello”);
//也可以使用:  ps.item(i).setAttribute("title","hello");
}

12 下一頁閱讀全文

您可能感興趣的文章: