DOM文档对象模型

Posted 2022-12-24 solaris-wwf

DOM对象：

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

　　　　<div title="我是属性">我是文本</div>

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

 

                查找元素节点的方法

                        document.getElementById("btn") 

                        属性

                        tagName,获取标签名

                        innerHtml,标签之间的所有内容 innerHtml = "<h1>hello</h1>"; 

                    　　也包括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<child.length;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>ff</em>文本<strong>sdfd</strong></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. <div id="div1"><em>ff</em>文本<strong>sdfd</strong></div> 

            2.

　　　　<div id="div1">
           <em>ff</em>
           文本
           <strong>sdfd</strong>
       </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        属性返回该节点的父节点

                 <em></em><div></div><strong></strong> 

                 oDiv.parentNode.nodeName; 返回body

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

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

 

            attributes属性节点

                 <div id = "div1" title = "dd" name = "bbb" class = "aa"></div> 

                返回该节点的属性节点的【集合】,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);

                <div><em></em><strong></strong></div>

                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<child.length;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;
           　　 
       　　 

　　 　　　　<div name = "divName">111</div>
    　　　　<div class = "divClass">222</div>
    　　　　<div class = "divClass">333</div>
    　　　　<div id = "divId">444</div>

 　　　　　　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);