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

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

javascript-node和document(1)  

2011-06-18 22:55:39|  分类: web前端技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
javascript中,所有页面节点都继承自Node类型,因此所有节点都享有Node的属性和方法。
Node对象的常用属性和方法:
1、nodeType
常用的属性码如下表,我们可以根据nodeType的值来进行判断节点属于哪一种类型。
元素element         1
属性attr                2
文本text                3
注释comments      8
文档document      9

2、nodeName
当前节点的标签名字,注意这个属性标签名字包括单标签的节点。

3、nodeValue
当前节点的包含的文本的值,这个属性需要childNodes[i]来进行支持,例如:
HTML:<div id="a">aaaaaa</div>
var z  =  document.getElementById('a').childNodes[0].nodeValue;           //aaaaaa

4、childNodes
是当前节点之后的子节点集合,类似一个数组,但不是真正的数组,它不具备数组的一些特有方法。而且这个数组是会根据DOM元素的操作而进行变化的。
可以利用 childNodes.length
来知道当前节点有几个子节点。
(注意:有很多人喜欢这么些HTML
<div id="a">
</div>
var z  =  document.getElementById('a').childNodes.length;       
//1
z为1,如果把换行去掉HTML
<div id="a"></a>
z的值就为0了

这里的回车会造成一个TEXT文本节点,要注意这点!

也可以利用  childNodes[i]
来进行选择第几个子节点,也可以利用   childNodes.item(i)

5、parentNode
当前节点的父节点,很好理解不解释。

6、previousSibling  和  nextSibling
当前节点的上一个和下一个节点,如果是第一个节点的上一个则返回NULL,另外个属性也是那样。

7、firstChild 和  lastChild
当前节点的第一个和最后一个子节点,如果当前节点没有子节点则返回都是NULL,如果当前节点只有一个子节点,则这2个属性相同。
并且 firstChild eq childNodes[0] eq childNodes.item(0)
同理 lastChild eq childNodes[childNodes长度-1] eq childNodes.item(childNodes长度-1)

8、hasChildNodes()
当前节点是否有子节点,如果有则返回true,这个和检测 childNodes.length 效果相同

9、appendChild(new_node)
给当前节点childNodes末尾添加参数中的node节点,如果这个node节点已经存在在页面中,则是移动操作。

10、insertBefore(new_node, insert_postion_node)
在当前节点的 insert_postion_node 子节点前插入 new_node 节点。

11、replaceChild(new_node, replace_postion_node)
在当前节点的子节点中,找到 replace_postion_node 子节点,将其替换为 new_node 节点,并返回 replace_postion_node 节点。

12、removeChild(remove_node)
删除当前节点的参数中的子节点,并且返回这个节点。

13、cloneNode(布尔值)
如果为false则表示不是深度克隆,如果是true则表示为深度克隆,即将这个节点的子节点一起克隆。
注意:克隆前最好将节点的绑定的事件程序解除绑定,否则可能出现不必要的麻烦。

13、normalize()
删除空文本节点和将两个连续的文本节点合并。
  评论这张
 
阅读(573)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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