DOM文档对象模型

DOM对象：

• 　　document object model文档对象模型,dom是W3C的标准，
•        DOM定义了访问HTML和XML的标准，中立与平台和语言的接口，它允许脚本动态的访问文本的内容、结构、样式 
•        HTML-页面结构，CSS-页面样式，JAVASCRIPT-页面行为操作
•        DOM是打通HTML,CSS,JS之间壁垒的一个工具

　　　　
我是文本

                DOM的三个节点，节点都是对象，div是元素节点，title="我是属性"是属性节点，"我是文本"是文本节点

 

                 查找元素节点的方法

                         document.getElementById("btn") 

                         属性

                         tagName,获取标签名

                         innerHtml,标签之间的所有内容  innerHtml = "

hello

"; 

                    　　也包括 HTML中的一些属性，

                         id, btn.id = "btn1";  btn.id或者 btn[id]

                         className,获取class的时候不能直接用 class，用 className，  btn.className = "box1"; 

                         title,

                         style:

                              btn.style.width = "300px"; 如果属性中有 -，比如 background-Color要写成 backgroundColor

                             问题：用 js只能找到行间的样式，如果现在头部 STYLE或者引用 css，则无法找到属性的返回值。

                            获取当前有效样式（火狐/谷歌/ safari支持）： getComputedStyle(元素节点)["样式类型"]，IE：元素节点. currentStyle["样式类型"];

                              getComputedStyle(btn)["width"]; 

                             浏览器兼容性构造函数封装

　　　　　　　　function getStyle(el,styleStr){
      　　　　　　return el.currentStyle ? el.currentStyle[styleStr] : getComputedStyle(el)[styleStr];//兼容IE
　　　　　　　　}

                     node.getElementByTagName();

 　　　　　　var div1 = node.getElementByTagName("div")
　　　　　　 var ul1 = div1.getElementByTagName("ul");//获取div下面的所有ul的标签，获取的是一个数组，ul1[i]或者ul1.item(i);也可以

                     document.getElementByName("hello")

                         getElementByName查找 node节点下所有相同名称的节点，不支持从某个节点开始查找，

                         Name属性一般只有文本输入的节点才会有。

                     document.getElementByClassName("hello")

                        查找 node节点下所有相同名称的节点，支持从某个节点开始查找，在低版本的IE浏览器不支持，可以封装一个

                         IE兼容函数

             function elementByClassName(parent,classStr){
                 var child = parent.getElementByTagName("*");//*代表所有类型的节点
                 var getE = [];//用来记录符合的元素节点数组
                 for(i=0;i){
                     if(child[i].className == classStr){
                     getE.push(child[i]);
                 　　 }
                 }
                 return getE;
              }

 

             set/getAttribute();

                     都是操作元素节点的某个属性，

         var div1 = document.getElementById("div1");
         div1.className;
         div1.getAttribute("class");//两个是一样的,但是一个是通过className,一个是通过class
         div1.className = "sdf";
         div1.setAttribute("class","dsf");

 

                 不同点：

                      div1.xxx = "yyy"; 无法赋值，

                      div1.setAttribute("xxx","yyy"); 是可行的，在浏览器控制台可以查看

                    如果 div本身行中写入 xxx="yy",用 div1.xxx属性访问是访问不了的。 getAttribute是可以的

             removeAttribute();

                删除属性，  div1.removeAttribute("title"); 

             childNodes;

                当前元素节点内的所有子节点。

                        　　 nodeName     nodeType      nodeValue

            　元素节点     元素名称         1           　　null

            　属性节点     属性名称         2          　　属性值

            　文本节点      #text             3         　　文本内容

                共同有的属性， nodeName, nodeValue, nodeType

　　　　　　<div id="div1"><em>ffem>文本<strong>sdfdstrong>div>

           var oDiv = document.getElementById("div1");
           alert(oDiv.childNodes[0].nodeName);//返回EM
           alert(oDiv.childNodes[0].nodeType);//返回1
           alert(oDiv.childNodes[0].nodeValue);//返回null
 
           alert(oDiv.childNodes[1].nodeName);//返回#text
           alert(oDiv.childNodes[1].nodeType);//返回3
           alert(oDiv.childNodes[1].nodeValue);//返回 文本    

 

             firstChild  第一个子节点

　　　　alert(oDiv.firstChild.nodeName);//返回EM

 

             lastChild   最后一个子节点

　　　　alert(oDiv.lastChild.nodeName);//返回strong

 

         删除空白节点

            两种格式排列

            1. 

ff文本sdfd

 

            2.

　　　　<div id="div1">
           <em>ffem>
           文本
           <strong>sdfdstrong>
       div>

 

            这样用 oDiv.childNodes.length是不同的上面返回3,下面返回5，包括回车，换行，tab键，空格键，都会产生子节点，虽然我们看不见这个键，但它们都是字符。

            识别空白节点，正则表达式 /^\s+$/.test();返回 true false

                  /^\s+$/.test(" "); 

             封装函数，识别掉空白节点

       function defineSpaceNode (nodes){
           var result = [];//先定义一个数组，将结果返回
           for (i = 0; i < nodes.length; i++){//遍历节点
               if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){//如果节点即是文本节点又是空白字符返回true
                   continue;//结束本次循环，开始下次循环
               }
               result.push(nodes[i]);//如果结果false，那么将结果加入数组返回
            }
            return result;
       }

 

             封装函数，识别删除空白节点，/^\s+$/

                [1,2,3,4,4,3,2]     [1,2,3,4,3,2]

                为何需要倒序删除，因为当删除一个元素之后，后面一个元素就顶替了前面这个元素的下标，就会被直接忽略判断。

          function removeSpaceNode (parent){
             var nodes = parent.childNodes;
             for (i = nodes.length - 1; i <= 0; i--){//需要倒序删除
                 if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
                     parent.removeChildNodes(nodes[i]);
                 }
             }
          }
          var oDiv = document.getElementById("div1");
          var divNodes = defineSpaceNode(oDiv.childNodes);//识别掉空白节点赋值给divNodes
          alert(divNodes.length);//返回3

 

             ownerDocument;

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

                  alert(oDiv.ownerDocument == document); 返回 true

             parentNode        属性返回该节点的父节点

                 

 

                  oDiv.parentNode.nodeName; 返回 body

             previousSibling   属性返回该节点的前一个同级节点 em

             nextSibling       属性返回该节点的后一个同级节点 strong

 

             attributes属性节点

                 

 

                返回该节点的属性节点的【集合】,1,不重复，2，无序。这和数组不一样

                  oDiv.attribute; 返回 [object NamedNodeMap]

                  oDiv.attributes.length; 返回个数4

                 getNamedItem();

                      oDiv.attributes.getNamedItem("id"); 返回 object Attr

                    或者  oDiv.attribute["id"]; 

                      oDiv.attributes["id"].nodeName; 返回id

                      oDiv.attributes["id"].nodeType; 返回2，属性节点

                      oDiv.attributes["id"].nodeValue; 返回div1

             creatElement();创建一个元素节点

                格式: document.creatElement("node");

                var nodeSpan = document.createElement("span");//创建一个span节点
                var oText = document.createTextNode("文本内容");//创建一个文本节点
                nodeSpan.appendChild(oText);//span带上了文本
                oDiv.appendChild(nodespan);//将span插入最后

 

          封装一个带文本的节点

                function creatElementWithTxt(el,txt){
                    var nodeSpan = document.createElement(el);//创建一个span节点
                    var oText = document.createTextNode(txt);//创建一个文本节点
                    return nodeSpan.appendChild(oText);//span带上了文本
                }

 

             document.write();会将原有内容覆盖

             appendChild();将新节点移到节点末尾

                格式: parent.appendChild(node);

             creatTextNode();创建一个文本节点

                格式: document.creatTextNode(txt);

             insertBefore();在元素前面插入一个新节点

                格式： 父节点parent.insertBefore(newNode，oldNode);

                var oSpan = creatElementWithTxt(span,"文本");
                var oEm = document.getElementByTagName("em")[0];//找到要插入的第一个元素节点
                oEm.parentNode.insertBefore(oSpan,oEm);//在em之前插入一个带文本的span

 

 

         封装函数，插入到元素节点后边

        function insertAfter(newNode,oldNode){
           var parent = oldNode.parentNode;
           if(oldNode == parent.lastChild){如果是最后一个节点
               parent.appendChild(newnode);
           }else{
               parent.insertBefore(newNode,oldNode.nextSibling);
           }
       }

 

             repalceChild();

                格式: parent.raplaceChild(newNode，oldNode);

             cloneNode();

                格式: node.cloneNode();参数：true(复制元素节点中的innerHtml),默认false

                对象是唯一的，如果用 insertBefore();节点会移动，

                 var node = oDiv.cloneNode(); 克隆一个节点，默认不克隆节点中的文本节点，然后用一些方法添加到节点中

                 var node = oDiv.cloneNode(true);

             removeChild();

                格式: parent.removeChild(node);

            

      兼容IE获取className相应的节点的封装函数

　　function elementByClassName(parent,classStr){
       var child = parent.getElementsByTagName("*");//*代表所有类型的节点
       var getE = [];//用来记录符合的元素节点数组
       for(i=0;i){
            if(child[i].className == classStr){//遍历节点的className查找需要的
               getE.push(child[i]);
            }
       }
       return getE;
   }

 

        id,tagName,name,class简化操作封装函数，获取上述节点 name=

            function $(elStr){
                switch(elStr[0]){
                    case "#"://判断是否是ID
                        return document.getElementById(elStr.substring(1));
                        break;
                    case "."://className
                        return elementByClassName(document,elStr.substring(1));
                        break;
                    default:
                        if(elStr.substring(0,5) == "name="){//name
                            return document.getElementsByName(elStr.substring(5));
                    　　}
                    　　else{
                      　　  return document.getElementsByTagName(elStr);//tagName
                    　　}
                    　　break;
           　　 }
       　　 }

　　 　　　　
111
    　　　　
222
    　　　　
333
    　　　　
444

 　　　　　　window.onload = function(){
            　　alert($("#divId").innerHTML);
            　　alert($(".divClass").length);
            　　alert($(".divClass")[1].innerHTML);
            　　alert($("name=divName")[0].innerHTML);
            　　alert($("div").length);
            　　alert($("div")[1].className);
        　　}