一、理解JS中的DOM
1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。
2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。
3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
二、JS中的DOM改变页面中内容的步骤：
1.获取HTML元素（三种方法）
1）根据id获取HTML元素：document.getElementById("id名")
2）根据标签名获取HTML元素：document.getElementsByTagName("标签名");
3）根据类名获取HTML元素：document.getElementsByClassName("类名");
2.改变HTML
1）改变页面中的 HTML 内容
document.getElementById(id).innerHTML=新的 HTML
例子：
结果：
搜狐变成百度
3）改变页面中的HTML 样式
document.getElementById(id).style.property=新样式
例子： 
结果
3.创建、删除、替换HTML元素
1）创建HTML元素
appendChild()：添加新元素到尾部。
insertBefore()：添加新元素到该元素之前。
appendChild()的例子：
结果：
2）删除HTML节点：removeChild()
3）替换 HTML 元素 ：replaceChild()
DOM扩展
querySelectorAll与querySelector两者的区别
下面是几个简单的例子
找出body标签下的第一个div
document.body.querySelectorAll("div")[0]
找出所有标签
document.querySelectorAll("*")
找出head下所有的标签
document.head.querySelectorAll("*")
找出所有class=box的标签
document.querySelectorAll(".box")
找出所有id=lost的标签
document.querySelectorAll("#lost")
找出所有p标签并且id=num的标签
document.querySelectorAll("p#num")
找出所有name=arr的标签
document.querySelectorAll("*[name=arr]")
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
找出所有class=end并且存在name属性的p标签
document.querySelectorAll("p.end[name]")
document.querySelectorAll("p[class=end][name]")