DOM节点的创造与操作[转载]

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

查看更多 下一篇