1.DOM
DOM（document object model）的缩写，文档对象模型
document对象：js会将整个当前网页转换成一个js对象--document;
如果想要通过js来获取网页中的内容，必须通过document来获取；
这个对象系统自动创建，程序员只需要使用
document结构：是一个树结构，树下面就是各种节点（Node, 是js中element对象指向的html中的标签）
element对象有哪些属性，就看element对应的标签有哪些
1.获取节点
1.1 直接获取
a.通过id值来获取节点: document.GetElementById(属性值) -- 返回是标签对应的节点对象
补充：html标签在js全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性
innerHTML指向的是内容的文本和标签：innerText只指向内容中的文本 -- 返回到的是字符串
b.通过class值获取节点 -- 返回一个数组
c.通过标签名获取节点： -- 返回一个数组
d.通过name属性获取节点 -- 返回数组
1.2.获取父节点 -- 子节点.parentElement:获取指定节点对应的父节点
1.3.获取子节点 -- 获取指定节点的所有子节点
a.获取所有的子节点 -- 节点.children
b.获取第一个子节点 - 节点.firstElementChild
c.获取最后一个子节点 -- 节点.lastElementChild
2.创建节点
document.createElement(标签名) -- 创建指定标签对象的节点对象
注意：创建的节点在没有添加在网页中的时候是不会显示的
3.添加节点
节点1.appendChild(节点2) -- 在节点1的最后添加节点2
节点1.insertBefore(节点2，节点3) -- 在节点1的子节点3之前插入节点2
4.拷贝节点
节点.cloneNode() -- 复制指定节点，产生一个新的节点
5.删除节点
a.节点1.removeChild(节点2) -- 删除节点1中的节点2
b.直接删除某个节点
2.BOM
1.BOM(browser object model)
js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
2.window基本操作
1)打开新的窗口：
a.open(url) -- 在新的窗口打开网址
2)打开新的窗口，同时设置窗口的宽度和高度 --
3)关闭窗口 --window.close()
3)移动当前窗口 -- new_window2.moveTo(100, 100)
4)获取窗口的宽度和高度 -- innerWidth，innerHeight -- 获取浏览器能够显示内容的部分的宽高
- outerHeight，outerWidth -- 获取窗口的宽高
3.弹框
1）只有确定按钮再加提示信息的弹框
alert('提示信息')
2）一个提示信息，再点击确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消
result = confirm('是否删除')
3）一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定
prompt('提示信息1', '提示信息2')
1.定时时间
1）.setTimeout -- 开启定时
setTimeout(函数，定时时间，实参对象) -- 指定时间后调用指定函数，并且传入指定的参数；返回一个定时器对象
函数 - 可以匿名函数，也可以是普通函数的函数名
定时时间 - 单位是毫秒
实参列表 - 给函数提供参数
2）setInterval(函数,定时时间,参数列表) -- 每隔指定时间调用一次函数
2.清除定时
定时对象.clearTimeout()
定时对象.clearInterval
3.事件
js是事件驱动语言
1.事件三要素：事件源、事件、事件驱动程序
事件源发生某个事件就做什么事情（事件驱动程序）
function btnClick(){
result = confirm('是否删除？')
if (result){
document.getElementById('btn1').remove()
}
}
2.事件的绑定
1）在标签内部给标签的事件属性赋值
注意：这种方式绑定的时候，this指向的是window
2）.通过给节点对象的事件属性赋值来绑定
注意：这种方式绑定的时候，this指向的是事件源
btnNode = document.getElementById('btn3')
btnNode.onclick = btnClick
3)通过addEventListener方法来进行绑定
a.语法：事件源.addEventListener(事件名称，函数-事件驱动程序)
b.说明: 事件名称 - 事件属性名去掉on
事件驱动程序 - 事件发生后需要调用的函数
c.注意: this指向事件源
可以给同一个节点的同一个事件绑定不同的事件驱动程序
常见事件类型
1.onload事件 - 页面加载完成对应的事件（标签加载成功）
window.onload = function(){
//写在onload里面的代码，在页面加载完成后才会执行
pNode = document.getElementById('p1')
}
2.鼠标事件
1）onclick -- 鼠标点击事件
2）onmouseover
- onmouseout
3.键盘事件 -- 键盘事件一般绑定在输入框对应的标签上
1）onkeypress - 键盘按下弹起
2）onkeydown - 按键按下， onkeyup -- 按键弹起
4.输入框事件
onchange -- 输入框的内容发生改变
oninput - 正在输入
5.事件对象（event） -给事件驱动参数加参数event
每个事件驱动程序中，都可以设置一个参数，来表示当前事件对象，不同类型的事件对应事件类型和事件属性不同
1）鼠标事件对象
clientX/clientY -- 鼠标的位置到浏览器左边和顶部的距离
offsetX/offsetY -- 鼠标的位置到事件源标签左边和顶部的距离
2）键盘事件对象
key - 那个按键被按下