JS 操作 DOM

定义：文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，
可以改变文档的内容和呈现方式

节点：（例如：<div id="属性节点">测试</div>）

 　　元素节点：标签元素<div>

 　　文本节点：标签内的所有纯文本 “测试”

      属性节点 ：标签的属性   ‘id’

　　IE 浏览器是以com实现的DOM 返回一个Object
一、获得元素节点
　　var ele = document.getElementById("purchases");//根据ID获得DOM   没有 返回 null （IE5-  不兼容）

　　var eles = document.getElementsByTagName("li");//根据元素名获得DOM集合
　　var eless = document.getElementsByTagName("*");//*匹配符 获得文档中所有的DOM集合

二、获得属性值  getAttribute()  此方法兼容性不好。

       getAttribute('属性名字'); 根据属性名 获得属性值 (自定义的属性也可以)；

      getAttribute("style");   非IE 返回style 属性值（字符串类型）       IE返回的是object类型
　　var pAttr=ele.getAttribute("title");//获得ele节点的title属性值
三、设置属性值
　　setAttribute("属性名"，"属性值"); //根据给属性重新赋值
　　ele.setAttribute("title","ul_title"); //把ele节点的title属性值设置未ul_title

      注意：对于 style/onclick 属性 使用setAttribut( )方法  赋值 IE7- 不兼容 

四、移除元素属性 removeAttribute('属性名')  IE6-  不存在

五、操作元素节点的文本

   1..获得元素节点的纯文本 nodeValue

             $p.childNodes[0].nodeValue; //获得$p 元素节点的纯文本内容

    2. innerHTML 可以获得元素节点的文本信息（包括HTML标签） 非W3C 标准

              var text= document.getElementById("ul").innerHTML;

              可以给元素节点赋值（包括标签元素）

             document.getElementById("ul").innerHTML="<span>AAAAAA</span>";

六 、获得元素节点的标签名

         var tagName=$dom.nodeName;

          var tagName=$dom.tagName;  两种方式等价

七、层次节点

      nodeType：判断当前节点类型是什么

           .如果只希望遍历元素节点，建议使用nodeType属性则更为直接方便！ 
　　　　nodeType==1：表示元素节点
　　　　nodeType==2:表示属性节点
　　　　nodeType==3:表示文本节点

      1. childNodes属性返回元素的所有子节点，包含了文本节点与元素节点。

         例如：<div id="test">测试文本一<em>斜体文本</em>测试文本二</div>

                  var len=document.getElementById("test").childNodes.length; 等于3

                 　　 第一个子节点是文本节点： 测试文本一       

                 　　 第二个子节点是元素节点：<em>斜体文本</em>

                  　　第三个子节点是文本节点： 测试文本二

           获得 第一个子节点：

                    document.getElementById("test").childNodes[0] ==document.getElementById("test").firstChild;

          获得 最后一个子节点： 

                   document.getElementById("test").childNodes[len-1] ==document.getElementById("test").lastChild;

          获得上一个兄弟节点： document.getElementById("test").childNodes[1].previousSbiling;

　　    获得下一个兄弟节点： document.getElementById("test").childNodes[1].nextSbiling;

          获得父类节点： document.getElementById("test").childNodes[1].parentNode;

    2. children 获得元素的忽略空行的子节点    非W3c标准支持IE5+

<ul id="ul">
　　<li>AAAAAA</li>
　　<li>AAAAAA</li>
　　<li>AAAAAA</li>
　　<li>AAAAAA</li>
</ul>

var $p=document.getElementById("ul");
alert($p.childNodes.length); //9
alert($p.children.length);//4

八、操作属性节点

          <div id="ul" title="无序列表" class="ulc">AAAAAAAAAAAAAAA</div>

　　　　　　var $p=document.getElementById("ul").attributes;  //获得 NamedNodeMap 类型
                 var $p1=$p[0].nodeName;  等于 class    //从后往前遍历

 　　　　　　var titleValue=$p['title'].nodeValue;  等于 ulc 

九、创建节点

       1.创建元素节点  　　　

　　　　var $ul=document.getElementById("ul");
　　　　var $li=document.createElement("li");//只是创建了一个li元素节点只是在内存中 还没有添加到文档上；
　　　　$ul.appendChild($li);//给 $ul 追加一个 子元素
　　　　var text=document.createTextNode("测试文本"); //创建文本
　　　　$li.appendChild(text); // 将文本 添加到 $li 元素中
　　　　var $p=document.createElement("p"); //创建p元素
　　　　$ul.parentNode.insertBefore($p,$ul);// 在$ul元素节点前添加$p元素节点

　　　　//IE7- 不兼容
　　　　var input=document.createElement("input");
　　　　input.setAttribute("type","radio");
　　　　input.setAttribute("name","sex");
　　　　$ul.parentNode.insertBefore(input,$ul);

十、常用方法

        innerHTML   

               1.获得文本 (包括HTML标签)

               2.赋值文本 如果文本包含标签也可以

       innerTEXT 

　　　　　　1.获得文本   过滤掉HTML标签     火狐不支持  使用textContent 

var html=document.documentElement;//获得HTML元素节点
var body=document.body;//获得body元素节点
var title=document.title;//获得页面title属性值
var url=document.URL;//获得页面路径  页面必须在服务器打开
var imgs=document.images;//获得页面的img元素集合
var doc=document.compatMode;//获得浏览器模式 CSS1Compat:标准模式  BackCompat：怪异模式
var width=document.documentElement.clientWidth; // 获得页面宽度 IE 在 CSS1Compat:标准模式 下
var width=document.body.clientWidth;  // 获得页面宽度 IE 在BackCompat：怪异模式 下
var show=document.getElementById("div").scrollIntoView();//将指定的节点滚动到可见区域

var $ul=document.getElementById("ul");
var li=$ul.firstChild;
var flag=$ul.contains(li);//判断li是否是$ul的子元素 火狐3.6+支持 其他浏览器均支持
var flag1=$ul.compareDocumentPosition(li);// flag1 >16 表示li是$ul的子元素   火狐3.6- 

//兼容性写法一个元素（refNode）是另一个元素（otherNode）的父元素 返回 boolen类型值
function myContains(refNode,otherNode){
    if(typeof refNode.contains!='undefined'){
        return refNode.contains(otherNode);
    }
    else if(typeof refNode.compareDocumentPosition=='function'){
        return refNode.compareDocumentPosition(otherNode)>16;
       }
 }

 十一、DOM元素尺寸

　　方式一  获得元素尺寸 返回值是字符串 这两种方式 只能获得css定义的尺寸 如果加padding值不会计算实际尺寸
1、   var box=document.getElementById("box");
　　  var width=box.style.width;//获得行内  内连样式

2、　 var style=window.getComputedStyle?window.getComputedStyle(box,null):null || box.currentStyle;
　　　var height=style.height;//如果没值IE=auto 非IE=默认大小

　　 方式二    获得计算后的实际尺寸（如果单位不是px 则自动计算为px单位） number类型 默认单位是px
            边框和外边距不算入实际值 内边距和滚动条算入实际值
             如果没有设置尺寸 没有设置内边距和滚动条 非IE=默认大小 IE=0
　　　　var width2=box.clientWidth;
　　　　var height2=box.clientHeight;

　　 方式三   获得元素实际尺寸 对于内边距和边框计算实际值 边框和外边距不算入实际值 浏览器都支持 （推荐使用)
　　　　var width3=box.offsetWidth;
　　　　var height3=box.offsetHeight;

十二、获得元素位置

　　1、获得元素相对于父元素的位置 当前元素要加上样式 position:relative;left:10px;top:10px;
　　　　var top=box.offsetTop;
　　　　var left=box.offsetLeft;

　2、获得元素相对于根元素的位置 IE存在兼容问题
　　var top=box.getBoundingClientRect().top;
　　var left=box.getBoundingClientRect().left;
　　var right=box.getBoundingClientRect().right;
　　var bottom=box.getBoundingClientRect().bottom;

//兼容性写法
function getRect(ele){
var rect=ele.getBoundingClientRect();
var clientTop=document.documentElement.clientTop;
var clientLeft=document.documentElement.clientLeft;
return {
　　top:rect.top-clientTop,
　　bottom:rect.bottom-clientTop,
　　left:rect.left-clientLeft,
　　right:rect.right-clientLeft
　　};
}