通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通过 JavaScript，操作 HTML 元素。
须首先找到该元素。有三种方法：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素
//通过 id 查找 HTML 元素:
var x=document.getElementById("intro");
/*如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
*/
//通过标签名查找 HTML 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
//通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
HTML DOM - 改变 HTML
改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
document.getElementById(id).innerHTML="新的 HTML"
//实例
Hello World!
//改变了 元素的内容：
Old Header
改变 HTML 属性
document.getElementById(id).attribute="新属性值"
//改变 ![]()
元素的 src 属性：
HTML DOM - 改变CSS
改变 HTML 样式
document.getElementById(id).style.property="新样式"
改变 元素的样式：
Hello World!
Hello World!
以上段落通过脚本修改。
使用事件
通过触发事件来执行代码。
元素被点击。
页面加载完成。
输入框被修改。
……
显示隐藏案例：
这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。
HTML DOM 事件
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
//点击时，会改变其内容
点击文本!
//从事件处理器调用一个函数：changetext(id)
点击文本!
HTML 事件属性
向 HTML 元素分配 事件，可以使用事件属性。
//向 button 元素分配 onclick 事件：
//使用 HTML DOM 来分配事件
//向 button 元素分配 onclick 事件：
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
输入你的名字:
/*当鼠标离开输入框后，函数将被触发，将小写字母转为大写字母。
*/
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
Mouse Over Me
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
HTML DOM EventListener
addEventListener() 方法
//在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
/*addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个、多个同类型的事件句柄。
可以向任何 DOM 对象添加事件监听
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）
*/
HTML DOM 元素 (节点)
创建新的 HTML 元素 (节点) - appendChild()
appendChild() 方法，它用于添加新元素到尾部
这是一个段落。
这是另外一个段落。
创建新的 HTML 元素 (节点) - insertBefore()
insertBefore() 方法，将新元素添加到开始位置
这是一个段落。
这是另外一个段落。
移除已存在的元素
要移除一个元素，需要知道该元素的父元素。
这是一个段落。
这是另外一个段落。
替换 HTML 元素 - replaceChild()
这是一个段落。
这是另外一个段落。
HTML DOM 集合(Collection)
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。
TMLCollection 对象类似包含 HTML 元素的一个数组。
获取文档所有的
元素：
var x = document.getElementsByTagName("p");
集合中的元素可以通过索引(以 0 为起始位置)来访问。
HTMLCollection 对象 length 属性
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
var myCollection = document.getElementsByTagName("p");//获取 元素的集合
document.getElementById("demo").innerHTML = myCollection.length;//显示集合元素个数
注意
HTMLCollection 不是一个数组！
HTMLCollection 看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
HTML DOM 节点列表
NodeList 对象是一个从文档中获取的节点列表 (集合) 。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
节点列表不是一个数组！