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

View Code

八、操作属性节点

<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();//将指定的节点滚动到可见区域

View Code

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

View Code

十一、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
　　};
}

View Code