注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

小结下dom节点操作  

2012-04-13 14:13:00|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、节点的定义
dom节点树

dom节点树


图中可见节点HTML文档中的每个成分都是一个节点:
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每个HTML属性是一个属性节点
注释属于注释节点

备注:通过DOM,可以访问HTML文档中的每个节点。


二、节点引用
节点的绝对引用:
document.documentElement返回文档的根节点
document.activeElement返回当前文档中被击活的标签节点
event.fromElement返回鼠标移出的源节点
event.toElement返回鼠标移入的源节点
event.srcElement返回激活事件的源节点
节点的相对引用:(设当前对节点为node)
node.parentNode node.parentElement 返回父节点,document.parentNode()返回null
node.childNodes[1] 符合标准,返回子节点集合(包含文本节点及标签节点),文本和属性节点的childNodes永远是null.先获取长度node.childNodes.length,然后可以通过循环或者索引找到需要的节点.
//对与文本节点的处理:
eg:

var myTextNodes = document.getElementById("test").childNodes;  var count = myTextNodes.length;  for(var i = 0; i < count; i++) {    if(myTextNodes[i].nodeType=="3" && myTextNodes[i].nodeName!="#text"){//排除IE空白文本的节点    alert(myTextNodes[i]);  }  }  

node.children 不符合标准,不推荐使用,它只返回html节点,甚至不返回文本节点
node.firstChild返回第一个子节点,firstChild=childNodes[0]
node.lastChild返回最后一个子节点,lastChide=childNodes[childNodes.length-1]
node.nextSibling()返回同属下一个节点
node.previousSibling()返回同属上一个节点
三、节点操作
节点定位
getElementById(elementId)  //寻找一个有着给定id属性值的元素,返回一个元素节点 ,document.getElementById(IDvalue)    getElementsByTagName(tagName)  //用于寻找有着给定标签名的所有元素,document.getElementsByTagName(tagName)    getElementsByName(elementName)  //在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可

创建节点:
document.createElement(element)  //参数为要新添的节点标签名,egnewnode=document.createElement("div");     document.createTextNode(string)  //创建一个包含着给定文本的新文本节点,eg:document.createTextNode("hello");  

eg:

var a =document.createElement("span");  var b =document.createTextNode("cssrain");  a.appendChild(b);  

添加节点:
//添加子节点:  node.appendChild(newChild) //newChild为生新增的节点.eg: document.body.appendChildNode(o) document.forms[0].appendChildNode(o)    //插入节点  node.insertBefore(newNode,targetNode)  node.insertAfter(newNode,targetNode);

修改节点:
//删除节点  node.remove()[2] //当某个节点被remove方法删除时,这个节点所包含的所有子节点将同时被删除。  node.removeChild(node) //eg:document.body.removeChild(node)  node.removeNode()//IE支持,但FF不支持,推荐用removeChild代替实现    //替换节点  node.replaceChild(newChild,oldChild) //oldChild节点必须是node元素的一个子节点。  node.replaceNode() node.swapNode()//只有IE支持replaceNode与swapNode方法,其他浏览器则不支持。  

复制节点:
//返回复制节点引用  node.cloneNode(bool)//bool为布尔值,true / false 是否克隆该节点所有子节点 ,eg:node.cloneNode(true)

获取节点信息:
.nodeName//只读,返回节点名称,相当于tagName.  .nodeValue//可读可写,但对元素节点不能写。返回一个字符串,指示这个节点的值。元素节点返回null,属性节点返回属性值,文本节点返回文本。一般只用于设置文本节点的值。  .nodeType//只读,返回节点类型:1,元素节点;2,属性节点;3,文本节点。     node.contains() //是否包含某节点,返回boolean值,IE支持,FF不支持contains(),但支持W3C标准compareDocumentPosition() .  node.hasChildNodes()//是否有子节点,返回boolean值

属性节点:
setAttribute(key,value)//element.setAttribute(attributeName,attributeValue),setAttribute()方法只能用在属性节点上。  getAttribute(key)//返回一个给定元素的一个给定属性节点的值



备注:
[1]childNodes兼容性问题说明:

用IE的调试工具会发现IE中把空格解析成“#text”,即IE会把2个标签之间只要有回车或空格的地方解析成空白文本节点,就多了个节点nodeName="#text"。而FF中却不会。


测试代码:
//节点之间留有空格和回车  <div id="test1">  <div>first</div>  <div>second</div>  <div>third</div>  </div>    //除注释外,节点间无空格回车  <div id="test2"><div>first</div><div>second</div><div>third</div></div>    var val1=document.getElementById("test1").childNodes.length;  var val2=document.getElementById("test2").childNodes.length;  alert("val1="+val1+":"+"val2="+val2)

测试结果:

IE中是val1=7:val2=3
FF中是val1=3:val2=3


兼容性解决办法:

在for循环里不妨加上:
if(childNode.nodeName=="#text") continue;
或者nodeType == 1。


[2]add(),remove()兼容性问题:

注意的是add,remove方法仅用于area,controlRange,options等集合对象.

<select>  <option value="1">option1</option>  <option value="2">option2</option>  </select>  <script type="text/javascript">  function fnAdd(){//兼容IE,FF,Opera,Chrome  var oOption=document.createElement("option");  document.getElementById("#oList").options.add(oOption);  oOption.text="option3";  oOption.value="3";  }  function fnRemoveChild(){//兼容IE,FF,Opera,Chrome  document.getElementById("#oList")).removeChild(document.getElementById("#oList").lastChild);  }  function fnRemove(){  //兼容IE,FF,Opera,Chrome  document.getElementById("#oList").remove(0);  }  </script>


扩展知识:
innerHTML、outerHTML、innerText、outerText
定义:
innerHTML设置或获取标签内的HTML,eg:获取node.innerHTML 设置node.innerHTML="hello"
outerHTML设置或获取标签及标签内的HTML
innerText设置或获取标签内的文本
outerText设置(包括标签)或获取(不包括标签)对象的文本
不同之处:

innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析,而innerText与outerText则不会。

在设置时,innerHTML与innerText仅设置标签内的文本,而outerHTML与outerText设置包括标签在内的文本。


注意:

W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)


原文地址:http://www.heiniuhaha.cn/blog/?p=1388


  评论这张
 
阅读(57)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017