快捷導(dǎo)航

Javascript入門學(xué)習(xí)第七篇 js dom實(shí)例操作

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

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

4，    設(shè)置/獲取屬性節(jié)點(diǎn)。
setAttribute();//設(shè)置
例子：
var a  = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
不管以前有沒有title屬性，以后的值是 my demo。

getAttribute();//獲取
例子：
var a =document.getElementById(“cssrain”);
var b = a.getAttribute(“title”);
獲取的時(shí)候，如果屬性不存在，則返回空，注意ie和ff返回不同。
  <body>
    <p title="test">aaaa</p>
    <p>bbbb</p>
    <script type="text/JavaScript">
      var paras = document.getElementsByTagName("p");
      for (var i=0; i< paras.length; i++) {
      var title_text = paras[i].getAttribute("title");
      if (title_text != null) {
      //這樣寫會(huì)有個(gè)問題：ff只彈一次，ie卻彈了2次。
      //如果  if (title_text != "") 這樣寫，ie只彈1次，ff卻彈出2次。
      //如果這樣寫呢？ if (title_text)   ，我們發(fā)現(xiàn)，ie只彈1次，ff也只彈出1次。
      //if (title_text) 才是我們想要的。
      //注意：如果不存在 ff下返回null
      //ie返回 "" ;
        alert(title_text);
      }
    }
    </script>
  </body>
返回雖然不同，但是可以用一個(gè)方法來判斷。
if(a.getAttribute(“title”) ){
//  do something
}

5,hasChildNodes:
由名字就可以知道，是判斷元素是否有子節(jié)點(diǎn)。
返回boolean類型。
文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)不可能有子節(jié)點(diǎn)，所以他們的hasChildNodes 永遠(yuǎn)返回false；
hasChildNodes經(jīng)常跟 childNodes 一起使用。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var ps = document.getElementById("cssrain")
if(ps.hasChildNodes){
        alert( ps.childNodes.length  );
}
</script>

大家自己動(dòng)動(dòng)手寫寫，不然光看記憶性不好。
好了，講到這里，明天繼續(xù)講。
今天講了用dom方式刪除節(jié)點(diǎn)，替換節(jié)點(diǎn)，查找節(jié)點(diǎn), 獲取屬性等。。。
操作DOM的方法也差不多了。
明天我們講DOM 屬性…..

如果還有不懂，可以google 搜索資料.

您可能感興趣的文章: