DOM文档对象模型

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>

　　　　<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,2] [1,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);

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

相关推荐