DOM节点的创建与操作[转载]
document.createElement(element): 创建一个标签为element的Element节点。
注意：
在HTML中,element大小写不敏感；在XML(XHTML)中大小写敏感。
例子:
1.var el = document.createElement("div"); 2.el.id = "myDiv"; 3.el.className = "nav"; 4.document.appendChild(el); IE下运行创建element的时候，可以同时设置属性：
1.if (client.browser.ie & & client.browser.ie < = 7){ 2. var iframe = document.createElement('<iframe name=\"myframe\"> < /iframe>'); 3. //create input element 4. var input = document.createElement('<input type=\"checkbox\" />'); 5. //create button 6. var button = document.createElement('<button type=\"reset\"> </button>'); 7. //create radio buttons 8. var radio1 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"1\" />'); 9. var radio2 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"2\" />'); 10.} document.createTextNode("string");创建内容为string的文本节点
var element = document.createElement('div'); 2. element.className = 'message'; 3. var textNode = document.createTextNode('Hello world!'); 4. element.appendChild(textNode); 5. var anotherTextNode = document.createTextNode('Yippee!'); 6. element.appendChild(anotherTextNode); 7. document.body.appendChild(element); 8. alert(element.childNodes.length); //2 9. /* 10. 上述代码中，element将会有2个child因为我们创建了2个Text Node,这可能不是我们想要的结果，调用normalize()方法，可以使得节点下面的文本节点内容进行“拼接”： 11.*/ 12. element.normalize(); 13. alert(element.childNodes.length); //1 14. alert(element.firstChild.nodeValue); //”Hello World!Yippee!” document.createDocumentFragment()创建一个未定义类型的DocumentFragment对象(继承自Node)
1.var fragment = document.createDocumentFragment(); 2.var ul = document.getElementById('myList'); 3.var li = null; 4.for (var i=0; i < 3; i++){ 5.li = document.createElement('li'); 6.li.appendChild(document.createTextNode('Item ' + (i+1))); 7. fragment.appendChild(li); 8.} 9.//alert(fragment.childNodes.length);//3 10.//fargment中的子节点将被 'move' 到DOM tree中,它里面的内容被"清空"了。 11.ul.appendChild(fragment); 12. 13.//alert(fragment.childNodes.length);//0 newNode =someNode.cloneNode(bool)
newNode =someNode.cloneNode(bool): 克隆someNode,返回克隆后的节点。bool = true表示深度克隆，将会克隆someNode的下属所有子节点；bool = false为浅克隆，仅克隆someNode本身。克隆的节点将拥有和原有节点一样的属性，如ID等
有关克隆的'事件处理':
1.如果事件函数直接添加在HTML页面上，如<li onclick="fn();"></li>，那么，克隆得到的节点也将拥有该事件，就好比该事件处理函数也是节点的一个属性一般。
2.如果事件函数以DOM LEVEL 0 的形式添加，如:
someNode.onclick = fn;
那么,克隆后的节点newNode不会拥有该事件函数。
3.如果事件函数以DOM LEVEL 2 的形式添加，如:
1.someNode.addEventListener('click',fn,false);// firefox ,chrome or other browers 2.omeNode.attachEvent('onclick',fn);//IE 则在firefox,chrome中，克隆后的节点不会拥有该事件函数，而在IE中，克隆后的节点也会拥有该处理函数。
someNode.appendChild(newNode)
将newNode添加作为someNode的最后一个子节点，返回值为 newNode.newNode将从DOM原来的位置被自动移除，然后作为someNode的最后一个节点出现在DOM上,换句话说，这是一种'move'操作，而不是'copy'操作。
例子：
1.var returnedNode = someNode.appendChild(someNode.firstChild); 2.alert(returnedNode == someNode.firstChild); //false 3.alert(returnedNode == someNode.lastChild); //true
someNode.insertBefore(newNode,oldNode)
将newNode插入到oldNode之前。返回newNode.如果oldNode为null，则操作结果相同于someNode.appendChild(newNode);
1.returnedNode = someNode.insertBefore(newNode, null); 2.alert(newNode == someNode.lastChild); //true
someNode.replaceChild(newNode, oldNode): 用newNode(不能为空)替换oldNode.
someNode.removeChild(oldNode):删除someNode的子节点oldNode(包括它下面的所有子节点).
附带 Document Object Model (Core) Level 1中关于几种节点的IDL 定义：
1.interface Document : Node { 2. readonly attribute DocumentType doctype; 3. readonly attribute DOMImplementation implementation; 4. readonly attribute Element documentElement; 5. Element createElement(in DOMString tagName) 6. raises(DOMException); 7. DocumentFragment createDocumentFragment(); 8. Text createTextNode(in DOMString data); 9. Comment createComment(in DOMString data); 10. CDATASection createCDATASection(in DOMString data) 11. raises(DOMException); 12. ProcessingInstruction createProcessingInstruction(in DOMString target, 13. in DOMString data) 14. raises(DOMException); 15. Attr createAttribute(in DOMString name) 16. raises(DOMException); 17. EntityReference createEntityReference(in DOMString name) 18. raises(DOMException); 19. NodeList getElementsByTagName(in DOMString tagname); 20.}; 21.interface Element : Node { 22. readonly attribute DOMString tagName; 23. DOMString getAttribute(in DOMString name); 24. void setAttribute(in DOMString name, 25. in DOMString value) 26. raises(DOMException); 27. void removeAttribute(in DOMString name) 28. raises(DOMException); 29. Attr getAttributeNode(in DOMString name); 30. Attr setAttributeNode(in Attr newAttr) 31. raises(DOMException); 32. Attr removeAttributeNode(in Attr oldAttr) 33. raises(DOMException); 34. NodeList getElementsByTagName(in DOMString name); 35. void normalize(); 36.}; 37.interface HTMLElement : Element { 38. attribute DOMString id; 39. attribute DOMString title; 40. attribute DOMString lang; 41. attribute DOMString dir; 42. attribute DOMString className; 43.}; 44. 45. 46.interface CharacterData : Node { 47. attribute DOMString data; 48. // raises(DOMException) on setting 49. // raises(DOMException) on retrieval 50. readonly attribute unsigned long length; 51. DOMString substringData(in unsigned long offset, 52. in unsigned long count) 53. raises(DOMException); 54. void appendData(in DOMString arg) 55. raises(DOMException); 56. void insertData(in unsigned long offset, 57. in DOMString arg) 58. raises(DOMException); 59. void deleteData(in unsigned long offset, 60. in unsigned long count) 61. raises(DOMException); 62. void replaceData(in unsigned long offset, 63. in unsigned long count, 64. in DOMString arg) 65. raises(DOMException); 66.}; 67. 68.interface Text : CharacterData { 69. Text splitText(in unsigned long offset) 70. raises(DOMException); 71.}; 72. 73.interface DocumentFragment : Node { 74.}; [转载]：http://mutongwu.iteye.com/blog/709860