BOM
BOM是指浏览器对象模型， 通过BOM来操作浏览器提供的某些功能或设置
open() - 打开新窗口
close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)
history.forward() // 前进一页，其实也是window的属性，window.history.forward()
history.back() // 后退一页
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面
alert("你看到了吗？"); 警告框
confirm("你确定吗？") 确认框
prompt("请在下方输入","你的答案") 提示框。计时器
计时事件:在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行
setTimeout() 一段时间后做一些事情;参数1是个函数,参数2是毫秒,表示多久后执行
var timer = setTimeout(function(){alert(123);}, 3000)取消setTimeout设置
clearTimeout(timer); 参数必须是由 setTimeout() 返回的 ID 值。setInterval() 每隔一段时间做一些事情
setInterval("JS语句",时间间隔)
var timer = setInterval(function(){console.log(123);}, 3000)
clearInterval(timer); 参数必须是由 setInterval() 返回的 ID 值。
clearInterval(setinterval返回的ID值) 该方法可取消由 setInterval() 设置的 timeout。取消setInterval设置
clearInterval(timer); 参数必须是由 setInterval() 返回的 ID 值。DOM
DOM 是指文档对象模型，当网页被加载时，浏览器会创建文档对象模型,(将html的内容进行结构化成DOM树),通过它，可以访问HTML文档的所有元素。
查找标签
[^1] 所有的参数都是字符串形式
[^2] 如果查找出来的内容是个数组，那么就可以通过索引来取对应的标签对象
document.getElementById("标签ID") 根据ID获取一个标签,返回值就是这个标签
document.getElementsByClassName("标签类名") 根据class属性获取（标签类名为该值的都会被查找到,放进一个数组里返回)
document.getElementsByTagName("标签名") 根据标签名获取标签集,返回值就是这个标签集间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素节点操作
创建节点
语法:createElement("标签名")
var divEle = document.createElement("a"); //创建标签
divEle.href = "https://www.baidu.com"; //给a标签设置href属性的值
divEle.innerText="哈利路亚"; //为了能显示出来,给标签加文字
var cc=document.getElementById("div1"); //获取标签
cc.appendChild(divEle); //往这个标签里面添加自己创建的标签添加节点
cc.appendChild(divEle); //父节点.appendChild(子节点); 都不需要双引号删除节点
语法：获得要删除的元素，通过父元素调用该方法删除。
somenode.removeChild(要删除的节点)
var aa = document.getElementById("div1"); //父节点
var ccc = document.getElementById("div2"); //子节点
aa.removeChild(ccc); /父节点删除子节点替换节点：
语法：somenode.replaceChild(newnode, 某个节点);
somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉属性节点
var divEle = document.getElementById("d1")
divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML #获取的是该标签内的所有内容，包括文本和标签innerHTML能识别标签(注意:标签必须被引号裹起来,不能跟里面的引号冲突),inneText则不能,举例
var aa = document.getElementById("div1");
aa.innerHTML='asdf';设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="2
" #能识别成一个p标签attribute操作(取,设,删属性和值)
给标签设置属性,和值
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18") #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."获取标签值的操作
语法：elementNode.value
适用于用户输入或者选择类型的标签：input,select,textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);
class 的操作
className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个var tt = document.getElementById("div1");
tt.classList //返回值是个数组
tt.classList.contains(cls) // 数组种存在返回true，否则返回false指定CSS操作
语法:对象.style.css属性 = "xxx”;
[^1] 对于没有中横线的CSS属性一般直接使用style.属性名即可
[^2] 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.backgroundColor="red"事件
onclick 鼠标单击后,触发...
ondblclick 鼠标双击后,触发
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。事件的绑定方式 (scritpt标签 都放在body标签下面写)
点我
绑定事件的方式(了解即可,过时了)
window.onload(了解)
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
==.onload()函数存在覆盖现象。==
Title
我是div1
我是div2
计时器事件
Title
代码注释:
先定义三个标签,一个input标签显示框,两个点击的按钮,用button,用script给他们定义
在script里面
先获取到两个标签button
定义一个空的变量
定义一个时间函数,内容:获取12小时制时间,每调用一次,就把input标签的value值该成这个时间
定义一个点击开始按钮的事件,内容:执行时间函数,目的是提高显示的速度,消除卡顿,再设置间断执行
并且里面做判断,如果哪个空的变量还是空,就调用间断执行方法,目的:始终只有一个开始事件
再次定义结束按钮事件,内容:清空间断执行的设置,将变量的值初始化.地区选择事件
select联动