JS 操作 DOM - 爱码网

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

节点：（例如：<div >测试</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 >测试文本一<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 >
　　<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