对DOM的理解，及其相关的操作

 

     DOM（document object model）文档对象模型，它是w3c制定的一套标准，这套标准可以让我对 xml ,html文件的操作有一定的规范。下面对dom的层次结构做一定的了解：

1>document: 是所有元素节点的父类

       documentElement： document.documentElement

       documentType：

       documentFragment： 文档碎片,作用在向文档中添加数据时，为减少刷新频率可以用它来做缓存

           创建文档碎片：document.createDocumentFragment();

2>Element: 元素，从标签的开头到结束，包含所有的属性和文本

       attributes: elements.attributes.XX

       createElement(tagname);

3>Text: 文本节点，没有子节点 

       createTextNode(str);

 

上面列举的是最常用的document中的层次结构，接着说下对节点的操作及相关方法：

 Node Property：

   1>nodeType : 节点的类型

        nodeType==1  元素节点，nodeType==2  属性节点，nodeType==3文本节点

   2>nodeName:节点的名字 <==> tagname

   3>nodeValue : 节点值，具体情况具体分析

   4>parentNode:当前节点的父节点

   5>firstChild:当前元素的第一个子节点

   6>lastChild：当前元素的最后一个子节点

   7>childNodes:当前元素的所有子节点，包括文本节点

   8>previousSibling : 上一个兄弟节点

   9>nextSibling: 下一个兄弟节点

  

 Node Method:

   1>创建元素节点： document.createElement(tagname)

   2>增加节点：parentNode.appendChild(currentElement);

   3>删除节点：parentNode.removeChild(currentElement);

   4>替换节点：parentNode.appenChild(newElement，oldElement);

   4.1>前插： insertBefore(newElement,oldElement);

   5>判断元素是否有子节点： hasChildNodes()

   6>遍历节点：

    遍历方式一：NodeIterator

    var  iterator = document.createNodeIterator(fromElement,NodeFilter.show_all,HasNotNode,false);

         Arguments:

               fromElement:从哪里开始检索节点

               NodeFilter:节点过滤器，NodeFilter.show_all //现实所有节点

               HasNotNode: 要过滤其中的那些元素，自定义function

 

         Methods:

              iterator.nextNode()

  遍历方式二：NodeWorkerIterator

  var  iterator = document.createWorkerIterator(fromElement,NodeFilter.show_all,HasNotNode,false);

         Arguments:

             the same as iterator

         Methods:

            iterator.nextSibling();

 

对属性的操作：

  Attributes:

      items

  methods:

    getAttribute(name); <==> attributes.getNamedItem(name).value

    setAttribute(name,value);<==> attributes.getNamedItem(name).value = newValue;

    removeAttribute(name);<==> attributes.getNamedItem(name).value = "";