DOM之Node

Node为DOM1级定义的一个接口,由DOM中的所有节点类型实现。Javascript中所有的节点类型都继承自Node类型,因此所有的节点类型都共享着相同的基本属性和方法。

nodeType属性(节点的类型):12个常量如下(随浏览器的差异会有识别上的区别):

Node.ELEMENT_NODE(1)

Node.ATTRIBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.ENTITY_NODE(6)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

常用的是元素和文本节点

nodeName和nodeValue属性(了解节点的具体信息)

对于元素节点,nodeName保存标签名, nodeValue始终为null

childNodes属性

其中保存着一个NodeList对象,可以通过位置访问节点,也有length属性,但并不是Array的实例。如下:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
通用的将NodeList转换为数组的样例代码:

function convert2Array(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);//针对非ie浏览器
}catch(ex){
array = new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}

parentNode属性

previousSibling和nextSibling属性(同胞节点查询)

列表中的第一个节点previousSibling属性值为null,最后一个节点的nextSibling属性为null。

firstChild和lastChild属性

hasChildNodes()方法:

该方法的节点包含一个或多个子节点的情况下返回true。

ownerDocument属性:

指向表示整个文档的文档节点。
节点之间的关系图如下:



操作节点:

appendChild()方法:该方法返回新增的节点

两组代码对比:

var returnNode = someNode.appendChild(newChild);
alert(returnNode==newChild);//true
alert(someNode.lastChild==newChild);//true

//someNode有多个节点
var returnNode=someNode.appendChild(someNode.fristChild);
alert(returnNode==someNode.fristChild);//false
alert(returnNode==someNode.lastChild);//true


insertBefore():把节点放在列表中特殊位置。

该方法接收两个参数,即要插入的节点和作为参照的节点。方法执行后同样返回被插入的节点。

replaceChild():

接收两个参数,即要插入的节点和要替换的节点。

removeChild():

单纯的移除节点。被移除的节点将成为方法的返回值。

值得注意的是:

以上操作节点的方法,都是建立在有父节点的基础之上,如果不满足相关条件将会报错。


cloneNode():

接收一个布尔型参数,表示是否执行深复制(也就是复制节点及节点下的一棵树)。false时,只复制节点本身。


normalize():处理文档树中的文本节点。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值