DOM入门
一 DOM的介绍
DOM=DocumentObject Model 文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，换句话说：这是表示和处理一个HTML或XML文档常用的方法。有一点很重要的是DOM的设计是以对象管理组织的规约为基础，因此可以用于任何编程语言
D ： 文档 -- html文档或xml文档
O ： 对象 – document对象的属性和方法
M ： 模型
DOM是针对HTML和XML文档 基于树的API（应用程序编程接口）
DOM树：节点（node）层次
DOM把一个文档表示为一棵家谱树（父、子、兄弟）
DOM定义了node的接口以及许多节点类型来表示XML节点的多个方面
二 节点的介绍
1．节点的介绍
根据DOM，HTML文档中的每一个成分都是一个节点，DOM的规定为：
（1）整个文档是一个文档节点
（2）每个HTML标签是一个元素节点
（3）包含在HTML元素中的文本是文本节点
（4）每一个HTML属性是一个属性节点
（5）注释属性注释节点
2． Node层次
节点彼此都有等级关系
（1）html文档中的所有节点组成一个文档树
（2）html文档中的每一个元素、属性、文本等都代表着树中的一个节点，树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止
（3）每一个html标签都是一个元素节点
（4）标签中的文字则是文本节点
（5）标签中的属性是属性节点
3．Node类型
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点实现。这个接口在js中是作为Node类型实现，除了IE之外，在其他所有浏览器中都可以访问这个类型，js中的所有节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法，每一节点都是一个NodeType属性，用于表名节点的类：
主要学习的几个类型为：
Node.ELEMENT.NODE(1)
Node.ATTRIBUTE.NODE(2)
Node.TEXT.NODE(3)
4 . NODE接口的 特性和方法
nodeName 节点的名字：根据节点的类型
nodeValue 节点的值：根据节点的类型而定义
nodeType 节点的类型常量值之一
。。。。
三 举例
1．document的documentElement举例
window.onload = function(){
//document类型，返回的是文档的根节点
var root = document.documentElement;
alert("节点的名称"+root.nodeName+"\n节点的值"+root.nodeValue+"\n节点的类型"+root.nodeType);
//节点的名称HTML 节点的值null节点的类型1
}
注：在引入js文件的时候，如果在html页面中引入js文件，在访问的时候可以使用本地的地址访问：file://D:/extjs/ajaxWeb/WebRoot/dom/domNode.html
也可以使用：http://localhost:8080/ajaxWeb/dom/domNode.html访问，但是如果js文件在html外面写，在访问的时候只能用loclahost访问，并且要修改html页面的编码方式为GBK，在html引入js的时候注意引入的方式为：
<script type="text/javascript" src="/ajaxWeb/dom/dom.js"></script>
是绝对的，不可以只写/dom/dom.js，这样访问不到。
2．文档节点 document的举例
//文档节点对象getElementById(id的名称)根据指定的id名称获取节点对象，也称为dom对象
varinputDom = document.getElementById("uname");
//当前dom对象的属性值
alert(inputDom.type + " " +inputDom.value + " "+ inputDom.id);
//节点属性<input type="text" value="请输入用户名" id="uname"/>
//元素节点名称就是标签名称 value值为null 元素节点的值为1
alert("当前节点的名称：" + inputDom.nodeName + " 当前节点的value值" +inputDom.nodeValue + "节点的类型" + inputDom.nodeType);
//首先判断该节点是否是元素节点
if(inputDom.nodeType == 1) {
//attributes来获取该元素节点的属性
varattrs = inputDom.attributes;//仅用于元素节点
alert(attrs.length);//在ie中为136，在firxfox中为3
//遍历属性节点
for(vari = 0; i < attrs.length; i++) {
//得到一个具体的属性节点
varattr = attrs.item(i);//获取具体的属性
//输出属性节点的名称和节点类型值
alert("属性节点的名称：" + attr.nodeName + "属性节点的value值" +attr.nodeValue + "属性阶段的类型值" + attr.nodeType);
}
}
//判断当前节点是否是子节点
if(inputDom.hasChildNodes()) {
varson = inputDom.childNodes;//可以遍历
alert("节点的大小是：" + son.length);//结果为1
}