您的位置: 首页  >  IT文章  >  DOM节点的创造与操作[转载]

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

分类: IT文章 • 2023-11-12 11:45:12
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

相关推荐