[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 onee.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 writedocument.createTextNode()document.write(node) // write new node to flow // use this after onload would cover former document

change content

e.innerHTML = new HTMLe.attribute = new attre.style.property=new style

text
have no child

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

query

e.childNodes // array, all childe.firstChild // first child nodee.firstElementChild // first ele child node e.lastChilde.lastElementChilde.parentNodee.offsetParent // the nearest positioned parent elee.previousSibling // the previous one nodee.previousElementSibling // the previous ele nodee.nextSibling e.nextElementSibling

ele function

e.tagName or e.nodeNamee.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.writevar s = document.createElement("script");   s.type = "text/javascript";   s.src = "test.js";   document.body.appendChild(s); 

5.动态css

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