文档对象模型（Document Object Model，DOM）是使用 W3C 定义的 API (Application Program Interface) 来操作 HTML 文档 （此处不局限于 HTML，亦可操作 XHTML、XML 等），使用户可以与进行页面交互。

它使用对象的表示方式来表示对应的文档结构及其中的内容。

通过使用 DOM 提供的 API (Application Program Interface) 可以动态的修改节点（node），也就是对 DOM 树的直接操作。 浏览器中通过使用 JavaScript 来实现对于 DOM 树的改动。

动态的修改节点可以分为两步，1. 找到一个节点或者说标签 2. 操作这个标签。

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签document.getElementsByName          根据name属性获取标签集合document.getElementsByClassName     根据class属性获取标签集合document.getElementsByTagName       根据标签名获取标签集合

2、间接查找

// 包含标签中间的文本parentNode          // 父节点childNodes          // 所有子节点firstChild          // 第一个子节点lastChild           // 最后一个子节点nextSibling         // 下一个兄弟节点previousSibling     // 上一个兄弟节点 //不包含标签中间的文本parentElement           // 父节点标签元素children                // 所有子标签firstElementChild       // 第一个子标签元素lastElementChild        // 最后一个子标签元素nextElementtSibling     // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

二、操作

1、内容

innerText   纯文本outerTextinnerHTML   HTML内容,可以包含标签outerHTML  value       表单标签选中的值

2、属性

attributes                // 获取所有标签属性setAttribute(key,value)   // 设置标签属性getAttribute(key)         // 获取指定标签属性 /*var atr = document.createAttribute("class");atr.nodeValue="http://www.mamicode.com/democlass";document.getElementById(‘n1‘).setAttributeNode(atr);*/

3、class操作

className                // 获取所有类名classList                // 获取所有类名，以列表形式classList.remove(cls)    // 删除指定类classList.add("cls")       // 添加类document.getElementById(‘gettxt‘).classList>> ["c1","hide"]

4、标签操作

a.创建标签

// 方式一var tag = document.createElement(‘a‘)tag.innerText = "dyan"tag.className = "c1"tag.href = "http://www.cnblogs.com/***" // 方式二var tag = "<a class=‘c1‘ href=http://www.mamicode.com/‘http://www.cnblogs.com/***‘>dyan"

b.操作标签

// 方式一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])

5、样式操作

var obj = document.getElementById(‘i1‘) obj.style.fontSize = "32px";obj.style.backgroundColor = "red";

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="http://www.mamicode.com/请输入关键字" style="color: gray;" /><script>   function Focus(ths){       ths.style.color = "black";       if(ths.value =http://www.mamicode.com/= ‘请输入关键字‘ || ths.value.trim() ==""){           ths.valuehttp://www.mamicode.com/= "";       }   }   function Blur(ths){       if(ths.value.trim() == ""){           ths.value = http://www.mamicode.com/‘请输入关键字‘;"black";       }   }</script>

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代指文档根节点*/

7、提交表单

document.geElementById(‘form‘).submit()

8、其他操作

console.log                 输出框alert                       弹出框confirm                     确认框  // URL和刷新location.href               获取URLlocation.href = "http://www.mamicode.com/url"       重定向location.reload()           重新加载  // 定时器setInterval                 多次定时器clearInterval               清除多次定时器setTimeout                  单次定时器clearTimeout                清除单次定时器

三、事件

对于事件需要注意的要点：
a 绑定

方式一<button onclick="displayDate()">试一试</button>方式二<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>

b 事件触发

this标签当前正在操作的标签，event封装了当前事件的内容

• this 触发当前事件的标签
• event 触发当前标签的事件内容 keycoode
• 事件链以及跳出
• 自定义事件>默认事件

<a href ="http://baidu.com" onclick="return Func();">sou baidu</a>// 自定义事件优先级大于默认事件// 阻止默认事件 加上 return <script>function Func(){    alert(转去百度)；    return false；  //true执行默认事件，false不执行默认事件}</script>

DOM编程从入门到忘记