标签：
一、DOM
简介：以一种独立于平台和语言的方式访问和修改（添加、移动、改变或移除的方法和属性）一个文档（主要是网页）的内容和结构。是表示和处理一个HTML或XML文档的常用方法。
节点的定义：D（Web网页文档）O（document对象）M（网页文档的树形结构）M中树形结构可以理解为由节点组成。把每个标签看作一个节点。
节点的分类：以一个完成的标签为例<div id ="box">测试Div</div>
元素节点：是标签<div></div>
文本节点：是标签内的纯文本，测试Div
属性节点: 是标签的属性，id="box"
二、获取节点：
既然要对页面进行操作首先获取界面的内容，主要是通过获取节点来对页面内容来进行操作。下面提供部分界面html，后面的js代码主要对给代码进行操作。
界面html：
<body>
<span>开始</span>
<div name="test" id = "box" aaa ="bbb" >
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
<div id ="pox">测试<em>倾斜</em>结尾</div>
<span>结束</span>
</body >js代码：
window.onload=function(){
var box = document.getElementById('box');
alert(box); //返回值HTMLDivElement表示Div的节点对象
lert(box.tagName); //返回元素节点对象的标签名
} ;
2)getElementByTagNamename() :通过元素节点名获取相同元素节点名的集合 window.onload=function(){
var p = document.getElementsByTagName('p');
alert(p); //返回一个数组集合，HTMLCollection
alert(p.length); //返回p数组的数量
alert(p[0]); //返回p的节点对象
alert(p.item(0)); //同上
alert(p[0].tagName); //LI
alert(p[0].innerHTML); //返回节点的文本内容：测试Div1
var all= document.document.getElementsByTagName('*');
alert(all.length) //网页中所有节点的数量
} 3)getElementByName() :通过name属性的值获取元素节点的集合。<pre name="code" class="javascript"> window.onload=function(){
var box = document.getElementsByName('test')[0];
alert(box); //返回节点对象
}
说明：name属性一般出现在表单中，在其他节点中添加name属性会认为为不合法属性，Firefox和Google可以获取HTML中不合法的name，低版本的IE获取不到。
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - -
（2）通过节点属性得到元素
1）node属性：来获取节点的名称、类型、值。
window.onload=function(){ 节点属性
var box = document.getElementById('box');
alert(box.nodeName); //显示DIV 元素名
alert(box.nodeType); //显示1 节点类型
alert(box.nodeValue); //显示null 原因元素节点本身没有内容
};注意：node只能获取当前节点的东西，在上面的js代码中node本身把节点指针放在元素<div></div>上，所以本身没有value值， 2）层次节点属性：层级节点可以分为父子节点和兄弟节点，通过当前节点可以获取其他层次的节点。
2.1）子节点childNodes、第一个字节点firstChilds、最后一个子节点lastChilds。
js代码：
window.onload=function(){ 子节点
var pox = document.getElementById('pox');
alert(pox.childNodes.length) //子节点数量
alert(pox.childNodes[0].nodeValue); // 第一个子节点的内容
alert(pox.firstChild.nodeValue); // 第一个子节点的内容
alert(pox.lastChild.nodeValue); // 最后一个节点的内容
};
2.2）父节点parentChild、兄弟节点previousSibing,nextSibing。
js代码：
window.onload=function(){ 父节点，上下节点
var pox = document.getElementById('pox');
alert(pox.parentNode); //pox节点的父节点body节点
alert(pox.firstChild.nextSibling); //pox节点的子节点中第一个节点的下一个节点
alert(pox.lastChild.previousSibling); //pox节点的子节点中最后一个节点的上一个节点
alert(pox.lastChild.previousSibling.nodeName)
};
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - --
- - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - -
- - - - -
2、属性节点
1)直接.出HTML属性的属性值。
js代码：
window.onload=function(){
var box = document.getElementById('box');
alert(box.id); //返回值为box
alert(box.aaa); // 不显示定义的属性值。返回undefined
alert(box.class); //返回undefined class为js的关键字
alert(box.className); //返回class属性的值cd
} 2）getAttribute()获取某个属性的属性值。
js代码：
window.onload=function(){
var box = document.getElementById('box');
alert(box.getAttribute('aaa')) //这种方式可以获得自定义属性的属性值。
alert(box.getAttribute('className')) //返回为null
alert(box.getAttribute('class') ) //返回class属性的属性值
}
3）通过节点属行获得
js代码：
window.onload=function(){ 属性
var pox = document.getElementById('pox');
alert(box.attributes); //集合数组，保存元素节点的属性列表
alert(pox.attributes.length); //该节点的属性的个数
alert(pox.attributes[0]); //Attr ，属性节点
alert(pox.attributes[0].nodeName); //第一个属性的属性名
//遍历属性集合读取属性的时候，是从后向前进行的。
}; window.onload=function(){
var box = document.getElementById('box');
alert(box.setAttribute('title','标题')) //添加title属性和值
alert(box.setAttribute('style','color:red')) //添加style属性和值
} window.onload=function(){
var box = document.getElementById('box');
alert(box.removeAttribute('title')) //移除title属性
}
- - - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - - --
- - - - - - - - - - - - - - - - - - -- - - - - - - - - - - - - - - - - - -
- - - - -
3、内容节点
1）innerHTML获取当前元素节点的文本内容
js代码：
window.onload=function(){
var box = document.getElementById('box');
alert(box.innerHTML); //显示当前元素节点中的文本内容（包括HTML）
//var box = document.getElementById('box');
//box.innerHTML='玩转<strong>JS</strong>'; //赋值，可以解析里面的HTML。
} 2）文本节点nodeVlaue和innerhTML的区别 window.onload=function(){
var pox = document.getElementById('pox');
pox.childNodes[0].nodeValue='测试<strong>Pox</strong>'; //测试<strong>Pox</strong>倾斜结尾
//pox.innerHTML='测试<strong>Pox</strong ; 测试Pox（Pox大写）
};
注意：区别1：前者把赋值的文本中html解析为特殊字符，后者当做html来显示。
区别2：前者是得到文本节点来显示文本，后者是通过元素节点（.）点出该节点的文本内容。
三、总结
主要讲解了下Dom基础中如何获得三种的节点，然后通过三种节点来进行基本的操作，Dom作为对页面的操作还有更多的内容需要学习，而且只有在应用中才能更好的理解。现在只是基本的知识总结，以后随着认识的加深在做相应的总结。
标签：
原文地址：http://blog.csdn.net/u010928364/article/details/43935875
