DOM树
文档：一个页面就是一个文档，document表示
元素：页面中的所有标签，element表示
节点：所有内容（标签、属性、文本、注释），node表示
以上内容都看作对象
获取元素
根据 ID 获取：document.getElementById('ids');
根据标签获取：document.getElementsByTagName('li');
根据类名查找：document.getElementsByClassName('tage');
H5新增（常用）
获取该元素的第一个对象：document.querySelector('li')；
获取该元素的所有对象：document.querySelectorAll('li')；
特殊元素获取<body><html>
body对象：document.body；
html对象：document.documentElement；
事件基础
简单理解：触发——响应机制
事件三要素：
事件源：事件触发的对象（按钮）：var btn = document.querySelector('button')；
事件类型：触发后执行的事件（鼠标点击、鼠标经过）：onclick
事件处理程序：通过一个函数赋值的方式完成：btn.onclick = function( ){ }
执行事件步骤
获取元素：var btn
注册事件：btn.onclick
添加事件处理程序：btn.onclick = function( ){ }
innerText与innerHTML
innerText：可以改变元素对象的内容，将标签只读不执行地打印出来（标签、换行、空格）
innerHTML：可以改变元素对象内容，将标签执行输出
修改元素属性
修改属性后，在<font color="#f44336"><b>行内样式</b></font>中生成
element.style.~ = ' ';
获取自定义属性
原本获取属性方法：element.属性；
获取自定义属性方法：element.getAttribute('属性')； //attribute 属性
区别：
element.属性：用来获取内置属性（className、display）
element.getAttribute('属性')：用来获取开发者自定义的属性（index、err）
设置自定义属性：element.setAttribute('属性', '值')；
移除自定义属性：element.removeAttribute('属性')；
自定义属性命名规范：在开头添加 data- （data-index、data-list-name）
自定义获取方法（H5新增）
div.element.Attribute('data-index')
div.element.Attribute('data-list-name')
div.dataset.index；
div.dataset.listName；
div.dataset['index']；
div.dataset['listName']
事件高级导读
事件监听：element.addEventListenner('事件【不加on】', fn( ) )
移除事件监听：element.removeEventListenner('事件【不加on】', fn( ) )
DOM事件流过程
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
注意：
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
element.addEventListenner('事件【不加on】', fn( ) ，【布尔值】)
false：冒泡阶段（默认为false）
true：捕获阶段
事件对象
在 element.addEventListenner('click', function(<b><font color="#f44336">event</font></b>){ } ) 中 <font color="#f44336"><b>event </b></font>就是事件对象
事件对象只有存在事件才会存在，系统自动创建，不用传参
事件对象是事件的一系列相关数据的集合（属性、方法）
可以自己拟定命名
e.target 和 this 区别
在<font color="#f44336"><b>点击</b></font>事件中存在<font color="#f44336"><b>父级</b></font>和<b><font color="#f44336">子级</font></b>时
点击父级和子级，返回的都是调用对象
点击子/父级时，返回的是子/父级对象
阻止默认行为
事件对象.preventDefault( )；根据事件来阻止事件的默认行为
如：onclick事件默认阻止点击、oncontextmenu事件默认阻止右键菜单
阻止冒泡行为
事件对象.stopPropagation( )；
如：在父子级弹出框中，点击子级框可以阻止父级框弹出
事件委托
在 ul 和 li 结构之间为减少请求 ，利用 ul设置监听器， target 获取子节点来实现事件委托
在 ul 的 onclick 事件监听器里面 通过 事件对象.target来获取子节点，改变子节点样式
获取鼠标的坐标
1. client 鼠标在可视区的 x 和 y 坐标
2. page 鼠标在页面文档中的 x 和 y 坐标
3. screen 鼠标在电脑屏幕的 x 和 y 坐标
常见的键盘事件
onkeyup：按键弹起的时候触发
onkeydown：按键按下的时候触发
onkeypress：按键按下的时候触发（功能键无法触发，如enter、ctrl）
