元素与节点
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Js通过操作dom来控制页面
Js操作的不只是元素，还包括元素的属性、内容、元素外的文本等等，所以Js的dom对象对页面进行了更详细的划分，称为节点。
在 HTML DOM （文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）
- 注释是注释节点
元素是节点的一种，节点包括了元素
Js通过控制节点来对html做各种改变
- 改变页面中的所有 HTML 元素
- 改变页面中的所有 HTML 属性
- 改变页面中的所有 CSS 样式
- 对页面中的所有事件做出反应
输出
document.write()
在文档加载完成后使用会覆盖原文档内容
改变元素
获取元素
document.getElementById() //获取id
document.getElementByClassName() //获取class
document.getElementByTagName() //获取标签名
document.getElementByName() //获取属性
document.querySelector() //返回匹配指定选择器的第一个元素
document.querySelectorAll() //返回匹配指定选择器的所有元素
id和querySelector 获取的是单个元素，其它获取的是元素集合
元素集合类似数组但不是数组，无法使用数组方法 valueOf，push等
改变内容
innerHTML();
innerText();
改变属性
title,className,src 等
改变样式
Element.style.property = " "
增删元素
创建元素 createElement()
创建文本节点 createTextNode()
向元素末尾添加元素或节点 appendChild()
向元素开始添加元素或节点 insertBefore()
移除已存在的元素 removeChild （需要知道该元素的父元素）
替换元素 replaceChild(新元素，旧元素) （也需要知道父元素）
注：创建的元素只能使用一次，添加到文档之后就不能再次添加，必须重新创建
增删改流程说明
响应事件
浏览器事件：加载完成onload，页面卸载 onunload 等
用户操作： 鼠标事件，键盘事件等
添加事件的三种方式
（1）在元素中添加onclick属性，
（2）在js中获取元素然后添加onclick，
（3）添加事件监听addeventlistener
事件汇总
鼠标事件
onclick 单击事件
ondblclick 双击事件
oncontextmenu 右键事件
onmouseover / onmouseenter 鼠标滑过
onmouseout/onmouseleave 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动
表单事件
onfocus 获取焦点
onblur 失去焦点
onchange 表单改变
onselected 选中事件
oninput 正在输入事件
onsubmit 表单提交
onreset 表单重置
提交和重置需要元素form驱动