这篇笔记长且繁琐。写的头痛，看的更头痛。。。
通过HTML DOM可以访问JavaScript HTML文档的所有元素
HTML DOM非常强大，通过它，JavaScript可以创建动态的HTML，For Example：
- 改变页面中所有HTML元素
- 改变页面中所有HTML属性
- 改变页面中所有CSS样式
- 能够对页面中所有事件做出反应
一、查找HTML元素
① 通过id来查找：document.getElementById("demo");
② 通过标签名查找：document.getElementsByTagName("p");
③ 通过类名查找：document.getElementsByClassName("mystyle");
刚刚学习这里的时候进入了一个误区
？通过标签名查找getElementsByTagName("p");
查找到的是一个数组，因此需要以带数组下标的形式捕捉到
二、改变HTML
1、改变HTML输出流：document.write(“改变一段文字”);
2、改变HTML内容
看了一篇innerHTML、InnerText、textContent获取和设置标签内容的区别。
innerHTML：主要的作用是设置新的html标签内容，是有标签效果的，也可以设置文本内容；
textContent、innerText：设置 / 获取标签中的文本内容。
※ innerHTML才是真正获取标签中间的所有内容
3、改变HTML属性：document.getElementById("id").attribute = 新属性值;
三、改变CSS
1、改变HTML样式：document.getElementById("id").style.property = 新样式;
2、使用事件：通过触发事件来执行代码改变CSS
四、DOM事件
HTML事件
常见事件（换言之本菜鸡见过的）：
1、页面事件相关
- onload：页面加载完成时
- unonload：页面关闭时
- onresize：浏览器窗口大小被改变
2、表单事件
- onchange：元素被改变时（ex：输入框值被改变时）
- onfocus：元素获得焦点时
- onselect：选取元素时
- onsubmit：提交表单时
3、键盘事件
- onkeydown：按下按键时
- onkeypress：按下并松开按键时
- onkeyup：松开按键时
4、鼠标事件
- onclick：单击鼠标时
- ondblclick：双击鼠标时
- onmousedown：按下鼠标按钮时
- onmousemove：鼠标指针移动时
- onmouseout：鼠标指针移出元素时
- onmouseover：鼠标指针移入元素时
- onmouseup：松开鼠标按钮时
五、EventListener监听事件
- 添加监听事件
addEventListener（）方法用于向指定元素添加事件句柄，可以同时向一个元素添加多个事件句柄，且不会覆盖
- 传递参数：当传递参数时，使用“匿名函数”调用带参数的函数
- 向window对象添加事件句柄
- 事件冒泡或事件捕获
addEventListener(event, function, useCapture);
第一个参数是事件类型，第二个参数是事件触发后调用的函数，第三个参数用于描述事件是冒泡还是捕获，类型为布尔值，该参数是可选的。
默认值为false——即为冒泡传递；（先触发内部元素，再触发外部元素）
当改为true时——事件使用捕获传递。（先触发内部元素，再触发外部元素）
- 移除监听事件
removeEventListener（）
五、DOM元素（节点）
1、创建新的HTML元素（节点）
appendChild（）用于添加新元素到尾部；
insertBefore（）用于添加元素到开始位置。
2、移除已存在的元素removeChild（）
3、替换HTML元素replaceChild（）
太多记不住，脑子真的不够用啊啊啊( ⊙ o ⊙ )啊！
