Dom入门
DOM= Document Object Model，文档对象模型
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.
• D：文档 – html 文档 或 xml 文档
• O：对象 – document 对象的属性和方法
• M：模型
• DOM 是针对HMTL和XML文档基于树的API(应用程序编程接口)
• DOM树:节点（node）的层次。
• DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
• DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点
根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：
• 整个文档是一个文档节点
• 每个 HTML 标签是一个元素节点
• 包含在 HTML 元素中的文本是文本节点
• 每一个 HTML 属性是一个属性节点
• 注释属于注释节点
Node层次
节点彼此都有等级关系。
• HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
节点
1、 节点
由结构图中我们可以看到，整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文本节点。
标签的属性是属性节点。
一切都是节点……
2、 节点树
节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
函数的声明方式：
window.onload=function(){//匿名函数的处理
/*var c=sum(2,3,4);
var d;
alert(c);
alert(d);*/
var c=f(2,3,4);
alert(c);
}
//声明函数，第一种方式
function sum(){
alert("声明函数，第一种方式");
return 10;
}
//第二种方式
var f=function test(a,b,c){
alert("声明函数，第二种方式");
}
Node接口的一些特性和方法：
Xxx.nodeName:获取xxx的名字
Xxx.nodeValue:获取xxx的value值
Xxx.nodeType:获取xxx的类型
//当窗体加载完毕之后触发的函数
window.onload = function(){ //匿名函数的处理
//根据id来获取指定的dom对象
var oneDom = document.getElementById("one");
元素节点 标签名称 null 1
属性节点 属性名 属性值 2
文本节点 #test 文本内容 3
function test2(){
var divDom = document.getElementById("two");
alert("当前节点的名称：" + divDom.nodeName + " 当前节点的value值" + divDom.nodeValue + "节点的类型" + divDom.nodeType);
//判断当前节点是否有子节点
if (divDom.hasChildNodes()) {
var son = divDom.childNodes;//可以遍历
alert("节点的大小是：" + son.length);//结果为1
}
//直接获取当前节点的孩子节点的第一个节点
if (divDom.hasChildNodes()) {
//获取孩子节点的第一个字节的 文本类型
var firstDom = divDom.firstChild;
alert("文本节点类型的名称" + firstDom.nodeName + " " + firstDom.nodeValue + " " + firstDom.nodeType)
}
}
function test1(){
//文档节点 document
//文档节点对象getElementById(id的名称) 根据指定的id名称获取节点对象，也称为dom镀锡
var inputDom = document.getElementById("uname");
//当前dom对象的属性值
alert(inputDom.type + " " + inputDom.value + " " + inputDom.id);
//节点属性 <input type="text" value="请输入用户名" id="uname"/>
alert("当前节点的名称：" + inputDom.nodeName + " 当前节点的value值" + inputDom.nodeValue + "节点的类型" + inputDom.nodeType);
//首先判断该节点是否是元素节点
if (inputDom.nodeType == 1) {
//attributes来获取该元素节点的属性
var attrs = inputDom.attributes;//仅用于元素节点
alert(attrs.length);//在ie中为136，在firxfox中为3
//遍历属性节点
for (var i = 0; i < attrs.length; i++) {
//得到一个具体的属性节点
var attr = attrs.item(i);//获取具体的属性
//输出属性节点的名称和节点类型值
alert("属性节点的名称：" + attr.nodeName + "属性节点的value值" + attr.nodeValue + "属性阶段的类型值" + attr.nodeType);
}
}
}
Document类型：
JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。Document节点具有如下列特征:
nodeType的值是9
nodeName的值为#document;
nodeValue的值为null
parentNode的值为null
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Instruction或Comment，Document类型可以表示为HTML页面或者其它基于XML的文档。不过，最常见的应用还是为作为HTMLDocument实例的对象，通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。
文档属性
l documentElement属性
l childNodes属性
l body属性
l doctype属性
l <html>外部注释解析
注意：以下属性是document对象除Document标准外的一些属性:
l title属性
l URL属性
l domain属性
l referrer属性
Element类型：
Element类型用于表示xml或html元素,提供了对元素标签名、子节点及特性的访问。Element节点具有如下特征:
nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或者Element
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
注意:在元素节点中除了可以使用nodeName属性，也可以使用tagName属性;这两个属性会返回相同的值。但element.tagName返回标签名是大写.