DOM节点的创建与操作

document.createElement(element): 创建一个标签为element的Element节点。
注意：
    在HTML中,element大小写不敏感；在XML(XHTML)中大小写敏感。
例子:

    var el = document.createElement("div");		
    el.id = "myDiv";
    el.className = "nav";
    document.appendChild(el);

IE下运行创建element的时候，可以同时设置属性：

if (client.browser.ie & & client.browser.ie < = 7){
    var iframe = document.createElement('<iframe name=\"myframe\"> < /iframe>');
    //create input element
    var input = document.createElement('<input type=\"checkbox\" />');
    //create button
    var button = document.createElement('<button type=\"reset\"> </button>');
    //create radio buttons
    var radio1 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"1\" />');
    var radio2 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"2\" />');
}

document.createTextNode("string");创建内容为string的文本节点

    var element = document.createElement('div');
    element.className = 'message';
    var textNode = document.createTextNode('Hello world!');
    element.appendChild(textNode);
    var anotherTextNode = document.createTextNode('Yippee!');
    element.appendChild(anotherTextNode);
    document.body.appendChild(element);
    alert(element.childNodes.length); //2
    /*
    上述代码中，element将会有2个child因为我们创建了2个Text Node,这可能不是我们想要的结果，调用normalize()方法，可以使得节点下面的文本节点内容进行“拼接”：
*/
    element.normalize();
    alert(element.childNodes.length); //1
    alert(element.firstChild.nodeValue); //”Hello World!Yippee!”

document.createDocumentFragment()创建一个未定义类型的DocumentFragment对象(继承自Node)
例子：

	var fragment = document.createDocumentFragment();
	var ul = document.getElementById('myList');
	var li = null;
	for (var i=0; i < 3; i++){
	li = document.createElement('li');
	li.appendChild(document.createTextNode('Item ' + (i+1)));
	   fragment.appendChild(li);
	}
	//alert(fragment.childNodes.length);//3
	//fargment中的子节点将被 'move' 到DOM tree中,它里面的内容被"清空"了。
	ul.appendChild(fragment);
		
	//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 的形式添加，如:

	 someNode.addEventListener('click',fn,false);// firefox ,chrome or other browers
	someNode.attachEvent('onclick',fn);//IE

则在firefox,chrome中，克隆后的节点不会拥有该事件函数，而在IE中，克隆后的节点也会拥有该处理函数。

someNode.appendChild(newNode)
    将newNode添加作为someNode的最后一个子节点，返回值为 newNode.newNode将从DOM原来的位置被自动移除，然后作为someNode的最后一个节点出现在DOM上,换句话说，这是一种'move'操作，而不是'copy'操作。
    例子：

    var returnedNode = someNode.appendChild(someNode.firstChild);
    alert(returnedNode == someNode.firstChild); //false
    alert(returnedNode == someNode.lastChild); //true

someNode.insertBefore(newNode,oldNode)
    将newNode插入到oldNode之前。返回newNode.如果oldNode为null，则操作结果相同于someNode.appendChild(newNode);

    returnedNode = someNode.insertBefore(newNode, null);
    alert(newNode == someNode.lastChild); //true

someNode.replaceChild(newNode, oldNode): 用newNode(不能为空)替换oldNode.

someNode.removeChild(oldNode):删除someNode的子节点oldNode(包括它下面的所有子节点).

附带 Document Object Model (Core) Level 1中关于几种节点的IDL 定义：

interface Document : Node {
  readonly attribute  DocumentType         doctype;
  readonly attribute  DOMImplementation    implementation;
  readonly attribute  Element              documentElement;
  Element                   createElement(in DOMString tagName)
                                          raises(DOMException);
  DocumentFragment          createDocumentFragment();
  Text                      createTextNode(in DOMString data);
  Comment                   createComment(in DOMString data);
  CDATASection              createCDATASection(in DOMString data)
                                               raises(DOMException);
  ProcessingInstruction     createProcessingInstruction(in DOMString target, 
                                                        in DOMString data)
                                                        raises(DOMException);
  Attr                      createAttribute(in DOMString name)
                                            raises(DOMException);
  EntityReference           createEntityReference(in DOMString name)
                                                  raises(DOMException);
  NodeList                  getElementsByTagName(in DOMString tagname);
};
interface Element : Node {
  readonly attribute  DOMString            tagName;
  DOMString                 getAttribute(in DOMString name);
  void                      setAttribute(in DOMString name, 
                                         in DOMString value)
                                         raises(DOMException);
  void                      removeAttribute(in DOMString name)
                                            raises(DOMException);
  Attr                      getAttributeNode(in DOMString name);
  Attr                      setAttributeNode(in Attr newAttr)
                                             raises(DOMException);
  Attr                      removeAttributeNode(in Attr oldAttr)
                                                raises(DOMException);
  NodeList                  getElementsByTagName(in DOMString name);
  void                      normalize();
};
interface HTMLElement : Element {
           attribute  DOMString            id;
           attribute  DOMString            title;
           attribute  DOMString            lang;
           attribute  DOMString            dir;
           attribute  DOMString            className;
};


interface CharacterData : Node {
           attribute  DOMString            data;
                                 // raises(DOMException) on setting
                                 // raises(DOMException) on retrieval
  readonly attribute  unsigned long        length;
  DOMString                 substringData(in unsigned long offset, 
                                          in unsigned long count)
                                          raises(DOMException);
  void                      appendData(in DOMString arg)
                                       raises(DOMException);
  void                      insertData(in unsigned long offset, 
                                       in DOMString arg)
                                       raises(DOMException);
  void                      deleteData(in unsigned long offset, 
                                       in unsigned long count)
                                       raises(DOMException);
  void                      replaceData(in unsigned long offset, 
                                        in unsigned long count, 
                                        in DOMString arg)
                                        raises(DOMException);
};

interface Text : CharacterData {
  Text                      splitText(in unsigned long offset)
                                      raises(DOMException);
};

interface DocumentFragment : Node {
};