js高程 （DOM)

`DOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口）.DOM描绘了一个层次的节点树，运行开发人员添加、删除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

DOM介绍

    DOM中的三个字母,D(文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对           象;M(模型）可以理解为网页文档的树形结构

 PS:IE的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。

  1.节点

      加载HTML页面时，Web浏览器生成一个树形结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html子标签，meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。

PS:后面我们经常把标签称作元素，是一个意思。

2.节点种类：元素节点、文本节点、属性节点。

  <div title="属性节点”>测试Div</div>

二 查找元素

  W3C提供了比较方便简单的定位节点的方法和属性，以便人们快速的对节点进行操作，分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute() 获取特定元素节点属性的值、setAttribute() 设置特定元素节点属性的值和removeAttribute()移除特定元素节点属性。

 1.getElementById()方法

   当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

   元素节点属性

    

     ex:<div id="box">测试Div</div>

          document.getElementById('box').tagName; //DIV

          document.getElementById('box').innerHTML; //测试Div

    HTML属性的属性

   

    ex:

        document.getElementById('box').id;               //获取Id

        document.getElementById('box').id='person';//设置id

        document.getElementById('box').title;            //获取title

        document.getElementById('box').title='标题’  //设置title

        document.getElementById('box').style.color;                      //获取style对象中color的值

        document.getElementById('box').style.color="blue";          //设置style属性值

        document.getElementById('box').className;    //获取class

        document.getElementById('box').className='box';  //设置class

2.getElementsByTagName()方法

   getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

    document.getElementsByTagName('*');  //获取所有元素

    PS:IE浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点

        document.getElementsByTagName('li'); //获取所有 li 元素,返回数组

        document.getElementsByTagName('li')[0]; //获取第一个 li 元素,HTMLLIElement

        document.getElementsByTagName('li').item(0) //获取第一个 li 元素,HTMLLIElement

        document.getElementsByTagName('li').length;//获取所有 li 元素的数目 

3.getElementsByName()方法

   getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList).

   ex:<input type="checkbox" name="add" value="hobby" checked="checked">

   document.getElementByName('add')   //获取input元素

   document.getElementByName('add')[0].value  //获取input元素的value值

   document.getElementByName('add')[0].checked //获取input元素的checked值

   PS::对于并不是HTML合法的属性，那么在JS获取的兼容性上也会存在差异，IE浏览器支持本身合法的name属性，而不合法的就会出现不兼容的问题。

4.getAttribute()方法

   getAttrubyte()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有一定区别。

   document.getElementById('box').getAttribute('id'); //获取元素的id值

   document.getElementById('box').id;                           //获取元素的id值

   document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值

   document.getElementById('box').mydiv //获取元素的自定义属性值,非 IE 不支持

   document.getElementById('box').getAttribute('class');//获取元素的 class 值,IE 不支持

   document.getElementById('box').getAttribute('className');//非 IE 不支持 

5.setAttribute()方法

   setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会覆盖。

   不建议使用

6.removeAttribute()方法

   removeAttribute()可以移除HTML属性。

   document.getElementById('box').removeAttribute('style');//移除属性

   PS:IE及更低版本不支持removeAttribute()方法

三 dom节点

     1.node节点属性

       节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为:nodeName、nodeType和nodeValue

        

         document.getElementById('box').nodeType; //1,元素节点

     2.层次节点属性

        节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

        

      1.childNodes属性

         childNodes属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点

          var box=document.getElementById('box');  //获取一个元素节点

           alert(box.childNodes.length);                         //获取这个元素节点的所有子节点

           alert(box.childNodes[0]);                                 //区取第一个子节点对象

           PS:使用childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如HTMLElement;也有可能返回的是文本子节点，比如Text.元素子节点可              以使用nodeName或者tagName获取标签名称，而文本子节点可以使用nodeName或者tagName获取标签名称，而文本子节点可以使用nodeValue              获取。

     innerHTML 和nodeValue的区别

           1.在获取到文本节点的时候，是无法使用innerHTML这个属性输出文本内容。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本。

            换言之，innerHTML是获取元素里面的文本，而文本节点,他本身就是文本，自然不可以用innerHTML来获取

            2在赋值的时候，nodeValue会把包含在文本里的HTML转义成特殊字符，从而达到形成单纯文本的效果

                oDiv.firstChild.nodeValue='<strong>abc</strong>';  //<strong>abc</strong>
                oDiv.innerHTML='<strong>abc</strong>';                     //abc

      firstChild和lasChild属性

         firstChild用于获取当前元素节点的第一个子节点，lastChild获取当前元素节点的最后一个子节点

       ownerDocument属性

          ownerDocument属性返回该节点的文档对象根节点，返回的对象相当于document.

              alert(box.ownerDocument===document); //true,要的节点

        parentNode、previousSibling、nextSibling属性

           parentNode属性返回该节点的父节点，previousSibling属性返回该节点的前一个同级节点，nextSibling属性返回该节点的后一个同级节点

           alert(box.parentNode.nodeName);//获取父节点的标签名

           alert(box.lastChild.previousSibling); //获取前一个同级节点

           alert(box.firstChild.nextSibling);       //获取后一个同级节点

     5.attributes属性

        attributes属性返回该节点的属性节点集合；

         document.getElementById('box').attributes; //NamedNodeMap

         document.getElementById('box').attributes.length; //返回属性节点个数

         documen.getElementById('box').attributes['id'];//Attr,返回属性为id的节点

         documen.getElementById('box').attributes['id'].nodeValue;//box的Id值

    6.忽略空白文本节点

       在非IE中，标准的DOM具有识别空白文本节点的功能，而IE自动忽略了空白文本节点，如果我们要保持一致的子元素节点，需要手工忽略掉它。

       忽略空白节点

        function filterSpaceNode(nodes){

              var ret=[];

              for(var i=0;i<nodes.length;i++){

               if(nodes[i].nodeType==3&&/^\s+$/.test(nodes[i].nodeValue))continue;

                   ret.push(nodes[i]);

               }

                return ret;

               }

         删除空白节点

       

function filterSpaceNode(nodes){

for(var i=0;i<nodes.length;i++){

 if(nodes[i].nodeType===3&&/^\s+$/.test(nodes[i].nodeValue)){

  nodes[i].parentNode.removeChild(nodes[i]);

 }

}

return nodes;

}

      如果firstChild、lastChild、previousSibling和nextSibling在获取节点的过程中遇到空白节点，我们该怎么处理掉呢

       

     function removeWhiteNode(nodes){
                for(var i=0;i<nodes.childNodes.length;i++){
          if(nodes.childNodes[i].nodeType===3&&/^\s+$/.test(nodes.childNodes[i].nodeValue)){
                nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
                        }
                      }
                       return nodes;
                   }

 四 节点操作

      DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

      

      1.write()方法

         write()方法可以把任意字符串插入到文档中去。但是一般来说只会在测试的时候用，他会覆盖掉html里原有的东西

      2.createElement()方法

         createElement()方法可以创建一个元素节点；

         document.create('p');   //创建一个元素节点

      3.appendChild()方法

          appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上

            var box=document.getElementById('box'); //获取某一个元素节点

             var p=document.createElement('p');  //创建一个新元素节点<p>

              box.appendChild(p);                         //把新元素节点<p>添加子节点末尾

       4.createTextNode()方法

           createTextNode()方法创建一个文本节点

            var text=document.createTextNode('段落');    //创建一个文本节点

             p.appendChild(text);                                       //将文本节点添加到子节点末尾

        5.insertBefore()方法

            insertBefore(0方法可以把节点创建到指定节点的前面。

           box.parentNode.insertBefore(p,box)   将p放在box节点前面

        PS:insertBefore()方法可以给当前元素的前面创建一个节点，但却没有提供给当前元素的后面创建一个节点。我们可以用已有的知识创建一个insertAfter()函数

             function insertAfter(newElement,targetElement){

             var parent=targetElement.parentNode;

              if(parent.lastChild==targetElement){

               parent.appendChild(newElement);             

             }else{

             parent.insertBefore(newElement,targetElement.nextSibling)

            }

          }

       PS:createElement在创建一般元素节点的时候，浏览器的兼容性都还比较好。但在几个特殊标签上，比如iframe中的radio和checkbox\buttonfqgxk，可能会在IE6,7以下的浏览              器存在一些不兼容。

       6.replaceChild()方法

          replaceChild()方法可以把节点替换成指定的节点

          box.parentNode.replaceChild(p,box);//把<div>换成了</p>

       7.cloneNode()方法

          cloneNode()方法可以把子节点复制出来。

          var box=document.getElementById('box');

          var clone=box.firstChild.cloneNode(true);

           box.appendChild(clone); //此处要注意一个空白文本节点的问题,要去除一下空白文本节点。

     8.removeChild()方法

         box.parentNode.removeChild(box);