Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示，同时也定义了一种通过程序来改变文档结构，风格，以及内容的方式。
DOM用一组结构化的节点以及对象来表示文档。本质上就是将网页和脚本语言以及编程语言连接起来。
DOM被设计为独立于任何特定的编程语言，通过协调一致的API以确保这种文档的结构化表现形式是有效的。
DOM标准主要要为：微软DOM与W3C DOM，一般IE实现的是微软DOM，而其它浏览器则不同程度的实现了W3C DOM。
DOM很大程度上受到浏览器中动态HTML发展的影响，但W3C还是将它最先应用于XML。
DOM与BOM的关系：BOM包含DOM
文档对象模型-DOM,就是使用树视图来形容HTML代码,看下面的一张HTML页面的源代码
1 <html> 2 <head> 3 <title>树!树!到处都是树!</title> 4 </head> 5 <body> 6 <h1>树!树!到处都是树!</h1> 7 <p>HTML那层层嵌套的代码就像一棵<em>树</em>一样!</p> 8 <div>一层一层的树<img src="../images/stach_heap.gif" /> </div> 9 </body> 10 </html>
浏览器接受该页面并将之转换为树形结构
节点基础
文档根节点
var de = document.documentElement; alert(de.tagName);
获取head与body
//本来可以使用getElementsByTagName的
var head = document.getElementsByTagName("head")[0];
var body = document.getElementsByTagName("body")[0];
还可以使用节点,在使用节点前，先了解一些节点基础知识
常用节点类型
- 元素节点——文档中具有标签的节点
- 文本节点——标签中不是注释的文本块
常用的节点属性
- nodeType——节点类型，元素节点是1，文本节点是3
- nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容
- firstChild——该元素节点包含的第一个子节点
- lastChild——该元素节点包含的最后一个子节点
- nextSibling——该节点的后一个兄弟节点
- previousSibling——该节点的前一个兄弟节点
- childNodes——子节点列表,可以通过node.childNodes[index]（或node.childNodes.item(index)）来获取子节点
- nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text
考虑下面的HTML代码所表示的节点结构
<p> Some Text </p>
上面的HTML代码将会解析成两个节点:元素节点——p标签，文本节点——Some Text.也就是说，标签中包含的一些文本也是节点，那么空格之类的非打印字符会不会被当作文本节点呢？
不同浏览器在判断何为Text节点上存在一些差异。某些浏览器，如Mozilla，认为元素之间的空白(包括换行符)都是Text节点；而另一些浏览器，如IE，会全部忽略这些空白!!
var de = document.documentElement; var head = de.firstChild;//html下面第一个元素，可能是head var body = de.lastChild;//html下面最后一个元素，可能是body
答案并不确定，但是仍然有办法解决——使用节点类型检测,每个节点都有nodeType属性，指明它的节点类型。对于元素节点，它的值是1，而对于文本节点，它的值是3
var de = document.documentElement; var head = de.firstChild.nodeType==1?de.firstChild:de.firstChild.nextSibling; var body = de.lastChild.nodeType==1?de.lastChild:de.lastChild.previousSibling;] //还可以使用childNodes var de = document.documentElement; var head = de.childNodes[0].nodeType==1?de.childNodes[0]:de.childNodes[0].nextSibling; var head = de.childNodes[1].nodeType==1?de.childNodes[1]:de.childNodes[1].previousSibling;
HTML DOM
HTML DOM用对象来表示HTML标签,考虑下面的代码——
<img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('Hello!')" />
//对于上面的img标签，浏览器解析时会将其转换成下面的对象
{
src:"../images/stack_heap.jpg",
alt:"内存堆栈",
onclick:"alert('Hello!')",
tagName:"IMG"
};
//其实不止这些属性
一般所说的DOM是指XML DOM，而W3C也为HTML页面提供了更快捷的DOM——HTML DOM!使用HTML DOM，能使访问HTML标签的属性就像访问JavaScript创建的对象的属性一样简单.
var imgObj = document.getElementById("imgObj");
alert(imgObj.src);//获取src属性如此简单
使用HTML DOM也使得访问页面一些元素变得更加简单
var bodyTag = document.documentElement.lastChild;//DOM标准方式
bodyTag = document.body;//HTML DOM方式
var titleTag = document.getElementsByTagName("title")[0].firstChild.nodeValue;//DOM标准方式
titleTag = document.title;//HTML DOM方式
//HTML DOM不仅仅可以用来获取内容，也可以设置
document.title ="Change The Title!!!";
方法总结：
JavaScript→Dom就是C#→.Net Framwork。
window对象：
alert方法，弹出消息对话框。
confirm方法，显示“确定”、“取消”对话框。
navigate方法，重新导航到指定的地址。
setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次。
clearTimeout也是清除定时。
showModalDialog弹出模态对话框。
showModelessDialog弹出非模态窗口。
window.location.href='http://www.baidu.com'，重新导向新的地址。
window.location.reload() 刷新页面。
window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。
clientX、clientY 发生事件时鼠标在客户区的坐标；
screenX、screenY 发生事件时鼠标在屏幕上的坐标；
offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
.srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
keyCode，发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性
screen对象，屏幕的信息
clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。
【<input type="button" value="推荐给好友" onclick="clipboardData.setData('Text','推荐给你一个网站，很好玩'+location.href);alert('已经将网址放到粘贴板中，发给你的好友即可');"/>
重复帐号：<input type="text" onpaste="alert('为保证帐号的正确，请勿粘贴帐号');return false;" />】
【clipboardData.setData('Text', clipboardData.getData('Text') + '本文来rohelm博客，转载请注明来源。' + location.href);】
body对象的事件
onload：网页加载完毕时触发。
onunload：网页关闭（或者离开）后触发。
onbeforeunload：在网页准备关闭（或者离开）后触发。在事件中为"window.event.returnValue赋值（要显示的警告消息），这样窗口离开（比如前进、后退、关闭）就会弹出确认消息
document对象的事件
document.write('<font color=red>你好</font>');
getElementById方法，根据元素的Id获得对象,getElementsByName返回值是对象数组。
getElementsByTagName，获得指定标签名称的元素数组.
createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下。
效果演示：
全选
code
1 <script type="text/javascript"> 2 function SetCheckedAll() { 3 var allbtns = document.getElementsByName("setall"); 4 var setopenbtn = document.getElementById("all"); 5 for (var i = 0; i < allbtns.length; i++) { 6 allbtns[i].checked = setopenbtn.checked; 7 allbtns[i].onclick = function () { 8 9 var b = true; 10 for (var i = 0; i < allbtns.length; i++) { 11 if (!allbtns[i].checked) { 12 b = false; 13 break; 14 } 15 } 16 setopenbtn.checked = b; 17 } 18 } 19 } 20 21 </script> 22 <body> 23 <input type="checkbox" name="setall"> 24 <input type="checkbox" name="setall"> 25 <input type="checkbox" name="setall"> 26 <input type="checkbox" name="setall"> 27 <input type="checkbox" name="setall"> 28 <input type="checkbox" name="setall"> 29 <input type="checkbox" name="" id="all" onclick="SetCheckedAll()"> 30 </body>
Value 获取表单元素。
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。效果:动态添加blog列别
Code
1 <head> 2 <title>动态添加blog列别</title> 3 <script type="text/javascript"> 4 function CreateTable() { 5 var div = document.getElementById("news"); //获取位置层 6 var table = document.createElement("table"); //创建具有指定的table对象 7 table.border = 1; 8 var newsblog = { "学生博客": "http://www.cnblogs.com/rohelm", "菜鸟博客": "http://www.cnblogs.com/rohelm" }; 9 //创建一个数组（地址） 10 for (var name in newsblog) { 11 var tr = document.createElement("tr"); //创建指定的tr对象 12 var td1 = document.createElement("td"); //创建指定的td对象(第一列) 13 td1.innerText = name; 14 tr.appendChild(td1); 15 var td2 = document.createElement("td"); //创建指定的td对象(第二列) 16 td2.innerHTML = "<a href=" + newsblog[name] + ">" + newsblog[name] + "</a>" 17 tr.appendChild(td2); 18 table.appendChild(tr); //添加元素 19 } 20 21 div.appendChild(table); 22 table.style.listStyle = "none"; 23 table.style.color = "yellow"; 24 25 } 26 </script> 27 </head> 28 <body> 29 <input type="button" onclick=" CreateTable()" value="生成列表"/> 30 <div id="news"> 31 </div> 32 </body>
火狐不支持InnerText。
所以动态加载网站列表的程序修改为：
1 var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数 2 var td1 = tr.insertCell(-1); 3 td1.innerText = key; 4 var td2 = tr.insertCell(-1); 5 td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";
事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象
获取和设置元素属性——getAttribute与setAttribute方法
var p1 = document.getElementById("p1");
alert(p1.getAttribute("id"));
p1.setAttribute("title","Value");