js高级程序设计笔记15

DOM

1.Node

确定Node节点的类型

someNode.nodeType == Node.ElEMENT_NODE //

someNode.nodeType == 1  //适用于所有浏览器

//nodeType  1 - 12

除了nodeType,还可以访问nodeName 和 nodeValue

2.节点关系

var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);//两种方法均可以

var count  = someNode.ChildNodes.length//获取子节点个数

#ChildNodes和arguments一样，并非真正的数组，在必要时需要转换成数组

Array.prototype.slice.call(someNode.childNodes,0);


#每一个node元素都有nextSibling和previousSibling两个属性，指向后继和前继元素

if(someNode.nextSibling == null) //这是最后一个元素

if (someNode.previousSibling == null) //这是第一个元素

3.操作节点

insertBefore()

returnNode = someNode.insertBefore(newNode,null);//当第二个参数为null时，插入到最后，如果为节点，则插入其之前

newNode == someNode.lastChild //true

returnNode = someNode.insertBefore(newNode,someNode.firstNode)
newNode == someNode.firstNode //true

appendChild()

var returnNode == some.appendChild(someNode,firstChild);

returnNode == someNode.firstChild // false
returnNode == someNode.lastChild //true
//如果传入的节点是文档的一部分，那就会把他从头原来的位置移动到新的位置

replace()

#替换
someNode.replaceChild(newNode,someNode.firstChild)

remove()

someNode.remove(someNode.firstNode)

cloneNode()

someNode.cloneNode(false) //浅复制
someNode.cloneNode(true) //深复制

无论哪种复制都不指定父节点，返回的节点是孤立的，深复制会复制子结构，浅复制不会