首页 > 代码库 > DOM

DOM

Node类型:javascript 所有节点均继承于此。

nodeType:

Node.ELEMENT_NODE(1) //fruquently used
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3) //fruquently used
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_PREFERENCE_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)

1.nodeName && nodeValue

对于元素节点,nodeName保持标签名,nodeValue = http://www.mamicode.com/null

2.节点关系:

每个节点都有一个childNodes,保存着一个NodeList对象

可以使用方括号[index]或item(index)访问

function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);// if IE
    } catch(ex){
        array = new Array();
        for(var i=0,len = nodes.length;i < len;i++){
            array.push(nodes[i])
        }
    }
    return array;
}

hasChildNodes() //return bool,是否有子节点
ownerDocument //整个文档的文档节点
parentNode
previousSibling
nextSibling
childNodes:firstChild,lastChild

3.操作节点:

appendChild() //insert to the end

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

var returnNode = someNode.appendChild(someNode.firstChild);
alert(returnNode == someNode.lastNode) //ture
alert(returnNode == someNode.firstNode)//false

insertBefore() 1:insertNode 2.referenceNode//insert before someNode

var returnNode = someNode.insertBefore(newNode,null)
alert(returnNode == someNode.lastChild)//true

returnNode = someNode.insertBefore(newNode,someNode.firstChild);
alert(returnNode == someNode.firstNode);//true
//the 2 function remove node but still in document without place
replaceNode() 1:insertNode 2:tobeReplaceOne
removeNode() 1:removeNode return the removeNode
cloneNode() 1:bool<true:deep copy = all the node tree; false: shallow copy = just copy the node,the return one without place,need appendNode to fix on the tree> 
normalize() //处理文档树中的文本节点,删除空文本或合并两个临近文本