Heim > Web-Frontend > js-Tutorial > Hauptteil

Javascript入门学习第七篇 js dom实例操作_基础知识

PHP中文网
Freigeben: 2016-05-16 19:02:59
Original
947 Leute haben es durchsucht

上篇文章我们讲了 用dom方式 创建节点,复制节点,插入节点。 今天我们将讲 删除节点,替换节点,查找节点等。

直接从方法说起:
1,    删除节点。removeChild():

 


 


 


 


 


 
<script> <br>var msg = document.getElementById("cssrain"); <br>var b = document.getElementById("b"); <br> msg.removeChild(b); <br></script>
如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。
比如:

 


 


 


 


 


 
<script> <br>var b = document.getElementById("b"); <br>var c = b.parentNode; <br>c.removeChild(b); <br></script>

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

 


 


 


 


 


 
<script> <br>var cssrain = document.getElementById("cssrain"); <br>var msg =  document.getElementById("b"); <br>var para =  document.createElement("p"); <br>cssrain.replaceChild( para , msg  ); <br></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返回不同。
  
    

aaaa


    

bbbb


    
  
返回虽然不同,但是可以用一个方法来判断。
if(a.getAttribute(“title”) ){  
//  do something
 }

5,hasChildNodes:
由名字就可以知道,是判断元素是否有子节点。
返回boolean类型。
文本节点和属性节点不可能有子节点,所以他们的hasChildNodes 永远返回false;
hasChildNodes经常跟 childNodes 一起使用。
比如:

 


 


 


 


 


 
<script> <br>var ps = document.getElementById("cssrain") <br>if(ps.hasChildNodes){ <br>        alert( ps.childNodes.length  );      <br>} <br></script>
大家自己动动手写写,不然光看记忆性不好。
好了,讲到这里,明天继续讲。
今天讲了 用dom方式删除节点,替换节点,查找节点, 获取属性等。。。
操作DOM的方法也差不多了。
明天我们讲DOM 属性…..

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage