1.NODE 类型
NODE.ELEMENT_NODE其结果就等于1
举例:
在以代码在IE下面不兼容,所以要把Node.ELEMENT_NODE改成1才能生效。
2.nodeName 和 nodeValue属性
以上语句说明,如果的节点类型为元素类型时,nodeName 为元素标签值,nodeValue 值为null。
3.节点关系,啥也不说了,直接看例子:
前两项都描述了的怎样读取子节点的值。
4.将子节点转化成数组的函数:convertToArray()
这个函数彻底改变IE不兼容Array.prototype.slice.call()这个函数的问题了!
5.节点之间的关系有多种:
父节点 parentNode
子节点 childNodes
首节点 firstchild
尾节点 lastchild
下节点 nextSibling
上节点 previousSibling
6.节点的操作
因为关系指针都是只读的,所以这里涉及到了的节点的操作方法。
appendChild举两例
第二例:
insertBefore举例
替换子节点
移除节点
7.其它操作:cloneNode,参数true时表示复制节点本身及节点下级所有节点,false时表示只复制本身节点。
这里说明一点:复制后返回的节点副本本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为了一个“孤儿”(挺生动吧),除非通过appendChild(),insertBefore(),replaceChild()将它添加到文档中。
好了将完了~~~~个人觉得的这样的基础挺重要的,所以写下来吧!
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()将它添加到文档中。
好了将完了~~~~个人觉得的这样的基础挺重要的,所以写下来吧!