访问DOM
第一次使用getElementsByTagName()
p1
p2
p3
第一次使用getElementsByClassName
6.DOM修改
修改HTML=改变元素、属性、样式和事件。修改HTML DOM包括修改HTML内容、改变CSS样式、改变HTML属性、创建新的HTML元素、删除已有的HTML元素和改变事件（处理程序）。
6.1 改变HTML内容
使用innerHTML属性来改变元素内容。具体做法就是在
浏览器中直接显示为"New text!"
6.2 改变HTML样式
通过HTML DOM，能够访问HTML元素的样式对象。
DEMO1
Hello world!
Hello world!
6.3 改变HTML属性
通过HTML DOM，能够修改HTML元素的属性。具体可以通过setAttribute()实现：
DEMO1
点我
6.4 创建HTML元素
appendChild(节点名)--将元素作为父元素的最后一个子元素进行添加。
首先必须创建该元素（元素节点）（createElement(元素名)、createTextNode(文本))，然后把它追加到已有的元素上。如：
DEMO1
This is a paragraph.
This is another paragraph.
insertBefore()--将元素作为父元素的第一个子元素进行添加
DEMO1
This is a paragraph.
This is another paragraph.
6.5 删除HTML元素
找到需要删除的子元素，然后使用parentNode属性来查找其父元素删除（常用）：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);removeChild(子节点)--由父节点调用，删除子节点
如果需要删除HTML元素，必须清楚该元素的父元素。
DEMO1
This is a paragraph.
This is another paragraph.
remove()--通过找到该元素节点，由document.访问节点方法.remove()
DEMO1
This is a paragraph.
This is another paragraph.
6.6 替换HTML元素
使用replaceChild(新子节点，旧子节点)
DEMO1
This is a paragraph.
This is another paragraph.
7.DOM事件
当事件发生时，可以执行JavaScript，比如当用户点击一个HTML元素时，把JavaScript代码添加到HTML事件属性中。
HTML事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当HTML表单被提交时
当用户触发按键时7.1 HTML事件属性
如需向HTML元素分配事件，可以使用事件属性。如：向button元素分配一个onclick事件：
点击按钮来执行 displayDate() 函数。
7.2 使用HTML DOM来分配事件
点击按钮来执行 displayDate() 函数。
和上面例子的效果一模一样。
7.3 onload和onunload事件
当用户进入或离开页面时，会触发onload和onunload事件。onload事件可用于检查访客的浏览器类型和版本，以便这些信息来加载不同版本的网页。onload和onunload事件可以用于处理cookies。
弹出的提示框会告诉你浏览器是否已启用cookie。
7.4 onchange事件
onchange事件常用于输入字段的验证。
请输入你的英文名： 当你离开输⼊框时，被触发的函数会把你输入的文本转换为大写字母。
7.5 onmouseover和onmouseout事件
onmouseover和onmouseout事件可用于在鼠标指针移动到或离开元素时触发函数。
Mouse Over Me
7.6 onmousedown、onmouseup以及onclick事件
onmousedown、onmouseup和onclick事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发onmousedown事件，然后当鼠标按钮被松开时，会触发onmouseup事件，最后当鼠标点击完成时，触发onclick事件。
点击这里
8.DOM导航
通过HTML DOM，能够使用节点关系在节点树中导航。
8.1 HTML DOM节点列表
getElementsByTagName()返回节点列表。节点列表是一个数组。
var x=document.getElementsByTagName("p");//选取文档中的所有节点
y=x[1];//通过下表号1访问第二个
节点
注意：下标号从0开始。
8.2 HTML DOM节点列表长度
length属性定义节点列表中节点的数量。可以使用length属性来循环节点列表。
Hello World!
DOM 很有⽤！
本例演示
length 属性。
8.3 导航节点关系
可以使用三个节点属性：parentNode、firstChild以及lastChild，在文档结构中进行导航。
Hello World!
DOM 很有⽤！
本例演示节点关系
首个
元素是
元素的首个子元素(firstChild)，元素和
firstChild属性可用于访问元素的文本：
Hello World!
8.4 DOM根节点
有两个特殊的属性，可以访问全部文档：document.documentElement--全部文档 和 document.body--文档的主体。
Hello World!
DOM 很有⽤！
本例演示 document.body 属性。
8.5 childNodes和nodeValue
除了使用innnerHTML属性，也可以使用childNodes和nodeValue属性来获取元素的内容。
Hello World!