Javascript入门学习第七篇 js dom实例操作

  直接从方法说起:

  1,    删除节点。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>

  如果不知道要删除的节点的父节点是什么?可以使用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,    替换节点。repalceChild()

  element.repalceChild( newNode , oldNode );  // 新节点是客人,肯定先服务他咯。。oldNode必须是Element的一个子节点。

  例子:

  <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,查找节点

  相对上面的方法,查找节点是比较简单的。

  因为很多人都用过。(记得我认识js的第一句就是getElementById();)

  getElementById();

  返回一个对象, 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。

  getElementsByTagName() 查找标签名的所有元素。

  返回一个集合,可以用循环取出每个对象,对象拥有 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");

  }

  4,    设置/获取属性节点。

  setAttribute();//设置

  例子:

  var a  = document.createElement(“p”);

  a.setAttribute(“title”,”my demo”);

  不管以前有没有title属性,以后的值 是 my demo。

  getAttribute();//获取

  例子:

  var a =document.getElementById(“cssrain”);

  var b = a.getAttribute(“title”);

  获取的时候,如果属性不存在,则返回空,注意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) {

  //这样写会有个问题:ff只弹一次,ie却弹了2次。

  //如果  if (title_text != "") 这样写,ie只弹1次,ff却弹出2次。

  //如果这样写呢? if (title_text)   ,我们发现,ie只弹1次,ff也只弹出1次。

  //if (title_text) 才是我们想要的。

  //注意:如果不存在 ff下返回null

  //ie返回 "" ;

  alert(title_text);

  }

  }

  </script>

  </body>

  返回虽然不同,但是可以用一个方法来判断。

  if(a.getAttribute(“title”) ){

  //  do something

  }

  5,hasChildNodes:

  由名字就可以知道,是判断元素是否有子节点。

  返回boolean类型。

  文本节点和属性节点不可能有子节点,所以他们的hasChildNodes 永远返回false;

  hasChildNodes经常跟 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>

  大家自己动动手写写,不然光看记忆性不好。

  好了,讲到这里,明天继续讲。

  今天讲了 用dom方式删除节点,替换节点,查找节点, 获取属性等。。。

  操作DOM的方法也差不多了。

  明天我们讲DOM 属性…..

  如果还有不懂,可以google 搜索资料.