什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准，全称是文档对象模型（Document Object Model）。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
什么是 HTML DOM？
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
HTML DOM Document 对象
文档对象代表您的网页。如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
方法
document.getElementById(name) 通过css选择器的id来查找元素（id是唯一的，所以只返回一个元素，如果错误的用了多个id，那只返回第一个）。
document.getElementsByTagName(name) 通过标签名来查找元素（返回所有的后代节点中该标签名的元素，找不到返回null）
document.getElementsByClassName(name) 通过类名来查找元素（返回所有的后代节点中该类名的元素，找不到返回null）
element.attribute = "属性值" 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = '属性值' 改变 CSS样式值（注意用单引号）
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流（重新输出整个网页）
document.createTextNode(text) 创建文本节点，向一个元素添加文本时，必须首先创建文本节点。
element.insertBefore(para, child) 在child节点前面添加para节点。
HTMLCollection 并非数组！
它是document.getElementsByTagName(name)和document.getElementsByClassName(name)的返回值。
length 属性定义了 HTMLCollection 中元素的数量
您能够遍历列表并通过数字引用元素（就像数组那样）
不过，您无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()。
属性
document.innerHTML，可用于获取或替换 HTML 元素的内容。
document.baseURI 返回文档的绝对基准 URI
baseURI 是一个 DOMString ，代表当前 节点 所在文档的基 URI 。如果无法获取则可能返回 null 。该值是只读的，随时变化的。
document.body 返回 <body> 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 <html> 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.embeds 返回所有 <embed> 元素
document.forms 返回所有 <form> 元素
document.head 返回 <head> 元素
document.images 返回所有 <img> 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码（字符集）
document.lastModified 返回文档更新的日期和时间
document.links 返回拥有 href 属性的所有 <area> 和 <a> 元素
document.readyState 返回文档的（加载）状态
document.referrer 返回引用的 URI（链接文档）
document.scripts 返回所有 <script> 元素
document.strictErrorChecking 返回是否强制执行错误检查
document.title 返回 <title> 元素
document.URL 返回文档的完整 URL
通过 CSS 选择器查找 HTML 元素
document.querySelectorAll("p.intro") 返回所有class="intro"的p元素，CSS 选择器包括（id、类名、类型、属性、属性值等等）
不适用于 Internet Explorer 8 及其更早版本。
document.querySelector(selectors) 返回匹配到的第一个元素。selectors包含一个或多个要匹配的选择器的 DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串。
但是不能匹配伪元素伪类。如果用了，不会返回任何东西。
如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。
由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：
console.log('#foo\\bar') // "#foo\bar"
console.log('#foo\\\\bar') // "#foo\\bar"
document.querySelector('#foo\\\\bar') // 匹配第一个div元素
document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\\:bar') // 匹配第二个div
选择器也可以非常强大，如以下示例所示.
这里, 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)内包含一个name属性为"login"的input元素<input> (<input name="login"/>) ，如何选择，如下所示:
var el = document.querySelector("div.user-panel.main input[name='login']");
利用JavaScript实现简单动画：
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);//间歇调用，它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载.
//超时调用 setTimeout(frame, 5) 指定时间后调用函数一次，返回 数值ID，表示超时调用，clearInterval(id)可以取消调用。
function frame() {
if (pos == 350) {
clearInterval(id);//取消间歇调用
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
HTML属性值实现简单变化
<div
style="background-color: red; border: none; width: 150px; height: 60px; float:left; padding: 20px; font-size: 25px; color: #fff;"
onmouseover="this.innerHTML='谢谢您！'"
onmouseout="this.innerHTML='鼠标移上来！'"
>鼠标移上来！
</div>
JavaScript实现简单变化
<div
style="background-color: red; border: none; width: 150px; height: 60px; float:left; padding: 20px; font-size: 25px; color: #fff;"
onclick="clickMe(this)"
>点击我</div>
<script type="application/javascript">
function clickMe(obj) {
if (obj.innerHTML == "点击我") {
obj.innerHTML = "点击我<br>再次点击我";
return;
}
if (obj.innerHTML == "点击我<br>再次点击我") {
obj.innerHTML = "谢谢您";
return;
}
if (obj.innerHTML == "谢谢您") {
obj.innerHTML = "再见";
return;
}
if (obj.innerHTML == "再见") {
obj.style.display = "none";
return;
}
}
</script>
事件
document.getElementById("myBtn").onclick = function() { }; 点击事件,执行后面的函数。
onload 和 onunload 事件
当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
经常与输入字段验证结合使用。
<input type="text" id="fname" onchange="upperCase()">当用户改变输入字段内容时，会调用 upperCase() 函数。
onmouseover 和 onmouseout 事件
可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数。
首先当鼠标按钮被点击时，onmousedown 事件被触发；
然后当鼠标按钮被释放时，onmouseup 事件被触发；
最后，当鼠标点击完成后，onclick 事件被触发。
onfocus
当输入字段获得焦点时触发。
addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
（注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。）
JavaScript HTML DOM 导航
parentNode 父节点
childNodes[nodenumber] 第几个子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性
所以为了准确地找到相应的元素，会用
firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法，这是JavaScript自带的属性。
文本节点的值能够通过节点的 innerHTML 属性进行访问：
var myTitle = document.getElementById("demo").innerHTML;
访问 innerHTML 属性等同于访问首个子节点的 nodeValue：
var myTitle = document.getElementById("demo").firstChild.nodeValue;
也可以这样访问第一个子节点：
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 等同于标签名（大写）
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
最重要的 nodeType 属性是：
节点 类型 例子
ELEMENT_NODE 1 <h1 class="heading">W3School</h1> （元素）
ATTRIBUTE_NODE 2 class = "heading" （属性）（在 HTML DOM 中已弃用。XML DOM 中未弃用。）
TEXT_NODE 3 W3School （文本）
COMMENT_NODE 8 <!-- 这是注释 --> （注释）
DOCUMENT_NODE 9 HTML 文档本身 （<html> 元素的父文档）
DOCUMENT_TYPE_NODE 10 <!Doctype html> （文档类型）