[js] DOM操作

DOM

operation

e.appendChild(newNode) // append newNode at the last of e's child list, return it. if newNode is already one node in html, it would moved here 
e.insertBefore(newNode, positionedNode) // append newNode to position, null to last one
e.replaceChild(newNode, toBeReplacedNode)
e.removeChild(toBeRemovedNode)
e.cloneNode(boolean) // true to deep-clone, false to shallow-copy

create

document.createElement() // create new ele, not in flow now, must be append or write
document.createTextNode()
document.write(node) // write new node to flow // use this after onload would cover former document

change content

e.innerHTML = new HTML
e.attribute = new attr
e.style.property=new style

text
have no child

e.nodeName = '#text'
e.nodeValue // value, can be modified, and will auto transcode
e.normalize() // merge all text node
e.splitText(position) // split text at position

query

e.childNodes // array, all child
e.firstChild // first child node
e.firstElementChild // first ele child node 
e.lastChild
e.lastElementChild
e.parentNode
e.offsetParent // the nearest positioned parent ele
e.previousSibling // the previous one node
e.previousElementSibling // the previous ele node
e.nextSibling 
e.nextElementSibling

ele function

e.tagName or e.nodeName
e.getAttribute(attr) 
e.setAttribute(attr, value) 
e.removeAttribute(attr) 

tips
在IE8以上获取子节点

var arr = Array.prototype.slice.call(node.childNodes, 0);

lookme
1. display none & visibility hidden
first will remove from struction, no width and height, visibility only hide it. So display will cause reflow and both will cause redraw

2. window.onload & $(document).ready
ready occurs after the document has been loaded, onload occurs later, when all content(e.g. img) has been loaded.

3. html=document.documentElement

4. 动态script

document.write

var s = document.createElement("script");   
s.type = "text/javascript";   
s.src = "test.js";   
document.body.appendChild(s); 

5.动态css

**6.**DOM是动态查询的，所以最好减少使用