dom 的基本操作介绍——节点层次——Node类型!

1.NODE 类型
NODE.ELEMENT_NODE其结果就等于1
举例:

if(someNode.nodeType == Node.ELEMENT_NODE)
alert("Node is an element");

在以代码在IE下面不兼容,所以要把Node.ELEMENT_NODE改成1才能生效。
2.nodeName 和 nodeValue属性

if(someNode.nodeType == 1)
value = someNode.nodeName;

以上语句说明,如果的节点类型为元素类型时,nodeName 为元素标签值,nodeValue 值为null。
3.节点关系,啥也不说了,直接看例子:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1)'
var cout = someNode.childnodes.length;

前两项都描述了的怎样读取子节点的值。
4.将子节点转化成数组的函数:convertToArray()
function converToArray()
{
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);
}catch (ex){
array = new Array();
for(var i=0,len=nodes.length;i<len;i++)
{
array.push(nodes[i]);
}
}
return array;
}
\
这个函数彻底改变IE不兼容Array.prototype.slice.call()这个函数的问题了!
5.节点之间的关系有多种:
父节点 parentNode
子节点 childNodes
首节点 firstchild
尾节点 lastchild
下节点 nextSibling
上节点 previousSibling
6.节点的操作
因为关系指针都是只读的,所以这里涉及到了的节点的操作方法。
appendChild举两例

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode);
alert(someNode.lastChild ==newNode);

第二例:

var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnNode == someNode.firstChild);
alert(returnNode == someNode.lastChild);

insertBefore举例

//插入后成为最后一个节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild);

//插入后成为第一个子节点
var returnNode = someNode.insertBefore(newNode, someNode.firstChild0);
alert(returnNode == newNode);
alert(newNode == someNode.firstChild);//true

//插入到最后一个子节点
returnedNode == someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]);


替换子节点

//替换第一个节点
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

移除节点

//移除第一个节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);

7.其它操作:cloneNode,参数true时表示复制节点本身及节点下级所有节点,false时表示只复制本身节点。

var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length);

var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length);

这里说明一点:复制后返回的节点副本本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为了一个“孤儿”(挺生动吧),除非通过appendChild(),insertBefore(),replaceChild()将它添加到文档中。
好了将完了~~~~个人觉得的这样的基础挺重要的,所以写下来吧!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值