文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强.
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
1 查找元素
1.1 直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
1.2 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
2 操作
2.1 内容
innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内的文本 outerText 设置(包括标签)或获取(不包括标签)对象的文本 value 值
看个例子，HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
color: #46FF1D;
background-color: #c70048;
}
</style>
</head>
<body>
<div id="i1">
<div>哈哈</div>
<div id="i2">。。呵呵
<input type="text"/>
</div>
</div>
</body>
</html>
浏览器console中：
var tag=document.getElementById("i1");
undefined
tag.innerHTML
"
<div>哈哈</div>
<div id="i2">。。呵呵
<input type="text">
</div>
"
-----------------------------------
tag.outerHTML
"<div id="i1">
<div>哈哈</div>
<div id="i2">。。呵呵
<input type="text">
</div>
</div>"
------------------------------------
tag.innerText
"哈哈
。。呵呵 "
-----------------------------------
tag.outerText "哈哈 。。呵呵 "
2.2 属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
2.3 class操作
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
2.4 标签操作
2.4.1 创建标签
// 方式一
var tag = document.createElement('a')
tag.innerText = "zingp"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/zingp"
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/zingp'>zingp</a>"
2.4.2 操作标签
// 方式一
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
2.5 样式操作
var obj = document.getElementById('i1')
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
2.6 位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
offsetHeight -> 可见区域：height + padding + border
offsetTop -> 上级定位标签的高度
scrollHeight -> 全文高：height + padding
scrollTop -> 滚动高度
特别的：
document.documentElement代指文档根节点
*/
2.7 提交表单
document.geElementById('form').submit()
2.8 其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
3 事件
对于事件需要注意的要点：
- this
this标签当前正在操作的标签。
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i1{
background-color: #c70048;
width: 500px;
height: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="i1 ">
我爱北京*
</div>
<script>
var tag = document.getElementsByClassName("i1");
console.log(tag);
tag[0].onmouseover = function () {
tag[0].style.backgroundColor = "#94C728";
};
tag[0].onmouseout = function () {
tag[0].style.backgroundColor = "red";
};
</script>
</body>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
var myTrs = document.getElementsByTagName("tr");
for(var i=0;i<myTrs.length;i++){
myTrs[i].onmouseover = function () {
this.style.backgroundColor = "red";
};
myTrs[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
</script>
</body>
</html>