前段时间学习了JavaScript的一些基本语法，但是学完之后发现和浏览器没有任何交互，因此还有需要学习DOM和BOM的相关知识，才能真正实现与浏览器的交互。
BOM（Browser Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行"对话"。
DOM（Document object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
一.window的子对象介绍
1.location对象
window.location对象用于获得当前页面的地址（URL）,并把浏览器重定向到新的页面。
常用的属性和方法：
location.href //获取URL
location.href="URL" //跳转到指定页面
location.reload() //重新加载页面
2.弹出框
可以在JavaScript中创建三种消息框：警告框、确认框、提示框
/*警告框*/
alert("今天天气真好！")
/*确认框*/
confirm("请点击确定！")
/*提示框*/
prompt("请在下方输入"，"你的答案")
3.计时相关
通过使用JavaScript，我们可以在一定时间间隔之后来执行代码，而不是立即执行。
语法：
var t = setTimeout("JS语句"，毫秒)
setTimeout()执行完毕后会返回某个值，存入到定义的变量中，如果想取消该计时，可以通过使用clearTimeout() 清楚该变量的值，从而达到取消计时的目的。
//在指定时间之后执行一次函数
var t = setTimeout(function(){alert(123);},3000) //3秒后执行alert(123)
//取消setTimeout计时
clearTimeout(t)
setTimeout()方法在规定时间内只执行一次改函数，但是setInterval()方法可在相同时间间隔内不停的调用函数，直到clearInterval()方法或者关闭窗口才会停止执行，用法与setTimeout()类似。
二.DOM介绍
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型。
1.查找标签
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
间接查找：
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
2.节点操作
创建节点
实例：var divEle = document.createElement("div");
添加节点
追加一个子节点
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
把增加的节点放到某个节点的前面：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "www.12345.com");
删除节点
somenode.removeChild(要删除的节点) //somenode是要删除节点的父元素
替换节点
somenode.replaceChild(newnode, 某个节点); //somenode是要删除节点的父元素
属性节点
divEle.innerText
divEle.innerHTML //获取文本节点的值
divEle.innerText="1"
divEle.innerHTML="<p>2</p>" //设置文本节点的值
attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
在表单中（input select textarea）如果要查看内容：
elementNode.value //查看上述三个标签中的内容
class操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
3.事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。