HTML DOM 树
DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1.整个文档是一个文档节点 2.每个 HTML 元素是元素节点 3.HTML 元素内的文本是文本节点 4.每个 HTML 属性是属性节点 5.注释是注释节点
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
访问 HTML 元素（节点）
您能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用H5新增 getElementsByClassName() 方法
通过使用H5新增的方法document.querySelectorAll()
通过使用H5新增的方法document.querySelector()
特殊节点的获取
获取body元素
document.body
获取html元素
document.documentElement
改变/获取节点的内容
innerText 不能识别html标签
innerHTML 能识别html标签
value 表单
改变/获取节点的属性值
href
src
title
alt
表单元素的属性操作
type
value
checked
selected
disabled（表单被禁用 true）
修改节点样式属性
element.style 行内样式
element.className 类名样式
ie10 及以上 document.getElementsByClassName('t1').classList.add('t2')
全兼容 document.getElementsByClassName('t1')[0].className='t2'
ie8 及以上 document.getElementsByClassName('t1')[0].setAttribute('class','t2')
通过节点关系获取节点对象
父（parent）
子（child）
同胞（sibling）
父节点拥有子节点，同级的子节点被称为同胞
创建和删除节点
1.创建节点
2.添加节点
3.删除节点
元素注册事件
事件的执行步骤：
获取事件源
注册事件
编写事件处理逻辑
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onkeyup | 用户弹起键盘按键 |
| onload | 浏览器已完成页面的加载 |
注册事件的两种方式：
1.element.onclick = function(){}
2.element.addEventListener('click',function(){})
移除事件
1.element.onclick = null
2.select1.removeEventListener('click',fn)
事件的传播方式：
1.捕获阶段 document -> html - >body ->目标节点
2.目标阶段
3.冒泡阶段 目标节点 ->body->html->document