前言
学习了 JavaScript，如何关联 HTML 和 CSS 呢？没错，DOM 就是干这个的。
DOM
Document Object Model，文档对象模型，专门操作网页内容的 API 标准。
DOM 操作页面内容
网页内容是由多个 DOM 元素以树结构组合而成，也称为 DOM tree。DOM 元素包含 HTML标签，标签属性，内容以及样式。简而言之，一组标签元素就是一个 DOM 元素，标签内可以有内容、属性，也可以有样式，如 <div></div>。
DOM 操作页面内容就是 JavaScript 利用 DOM API 操作 HTML标签，内容以及样式（CSS）。
注意：很多文章会由 Node 节点介绍页面内容，其实 Node 节点和 DOM 元素是一致的，唯一的不同在于 Node 节点包含空白节点，即 Node 节点 = DOM 元素 + 空白节点。
DOM 元素新增
-
创建元素
var elem = document.createElement('a'); // <a></a>document.createElement()接收 HMTL 标签名作为参数，返回 HTML 标签元素，即 DOM 元素。 -
添加属性
elem.href = 'https://www.baidu.com'elem元素更应该看作是对象，通过.的方式设置添加属性。 -
添加内容
elem.innerHTML = '百度' elem.textContent = '百度'elem.innerHTML既可以添加文本内容，也可以添加标签元素，如elem.innerHTML = '<span>百度</span>'。elem.textContent只能添加文本内容，添加标签元素无法解析成 HTML 标签。 -
添加样式
elem.style.color = 'red' elem.style.fontSize = '20px' elem.style.cssText = 'color: red; font-size: 20px' // 复合写法elem.style.attr的方式可以为标签元素添加样式，添加的样式为行内式。 -
挂载元素
根据元素挂载位置不同，可以选择不同的 API 。
-
末尾追加
parent.appendChild(elem) // parent 为 elem 元素的父元素，即 elem 元素添加至 parent 元素内的末尾 -
中间插入
parent.insertBefore(elem, x) // elem 元素添加至 parent 元素内，且在 x 元素之前注意：可以通过
x.previousElementSibling和x.nextElementSibling来选择插入 x 元素的上一个兄弟元素或下一个兄弟元素之前（x 元素之后）。 -
替换
parent.replaceChild(elem, x) // 在 parent 元素内，使用 elem 元素替换 x 元素
注意：上述方式只能无法一次添加多个元素，多次添加的话，会造成 DOM 树多次重排，影响性能。
-
-
批量挂载
使用文档片段的方式批量添加，将多个 DOM 元素添加至文档片段中，最后将文档片段添加至DOM tree 中。
var frag = document.createDocumentFragment() frag.appendChild(elem1) // 添加 elem1 元素 frag.appendChild(elem2) // 添加 elem2 元素 parent.appendChild(frag)
DOM 元素删除
-
删除元素
parent.removeChild(elem) // 从 parent 元素中删除 elem 元素。 -
删除元素属性
-
DOM 对象的方式
elem.id='' -
DOM API 的方式
elem.removeAttribute('id')
-
-
删除元素内容
elem.innerHTML = '' elem.textContent = '' -
删除元素样式
elem.style.color = '' elem.style.fontSize = '' elem.style.cssText = ''
DOM 元素修改
-
修改元素
修改元素：先删除，再新增即可。
-
修改元素属性
-
DOM 对象的方式
elem.className = 'wrapper'注意：
class属性在 DOM 对象方式下，需要变为className，表单的for属性需要变为hmlFor。 -
DOM API 的方式
elem.setAttribute('class', 'wrapper')注意：
setAttribute()第一个参数为属性名，第二个参数为属性值，属性名不需要改变。表单属性中的状态属性：disabled,checked,selected只能通过 DOM 对象的方式修改，不能使用 DOM API方式。
-
-
修改元素内容
elem.innerHTML = 'baidu' elem.textContent = 'baidu' -
修改元素样式
elem.style.color = 'blue' elem.style.fontSize = '16px' elem.style.cssText = 'color: blue; font-size: 16px;'
DOM 元素查询
-
查询元素
-
直接查询元素
document.documentElement即html元素。document.head即head元素。document.body即body元素。 -
关系查询
elem.parentElement即elem的父元素。elem.children即elem的子元素，返回子元素构成的类数组对象。elem.previousElementSibling即elem的前一个兄弟元素。elem.nextElementSibling即elem的后一个兄弟元素。 -
DOM API 查询
document.getElementById()按 id 查询单个元素，返回最先找到的结果，如document.getElementById('app')。parent.getElementsByClassName()按 class 查询，返回父元素下相同类名的动态结果集，如parent.getElementsByClassName('wrapper')。parent.getElementsByTagName()按 标签名 查询，返回父元素下相同标签名的动态结果集，如parent.getElementsByTagName('div')。parent.querySelector()按 选择器 查询单个元素，返回父元素下最先找到的结果，如parent.querySelector('#app')。parent.querySelectorAll()按 选择器 查询，返回父元素下满足选择器的静态结果集，如parent.querySelectorAll('.wrapper')。注意：
a. 只有
getElementById()是仅能用过document调用的。b.
querySelector()和querySelectorAll()参数是需要添加选择器标识的。c.
getElementById()和querySelector()是查询单个元素的，均为非贪婪查询。d. 动态结果集是指查询完成以后，
parent继续新增元素，当元素满足时，结果集依然能够体现；静态不可以。
-
-
查询元素属性
-
DOM 对象的方式
elem.title // 返回 undefined 表示属性不存在 -
DOM API 的方式
var isHas = elem.hasAttribute('title') // 返回 bool 值，表示是否具有 title 属性 var val = elem.getAttribute('title') -
自定义属性
定义自定义属性
<div data-count="3"></div>查询自定义属性
elem.dataset.count // DOM 对象 var val = elem.getAttribute('data-count') // DOM API修改自定义属性
elem.dataset.count = 4 // DOM 对象 elem.setAttribute('data-count', 4) // DOM API
-
-
查询元素内容
elem.innerHTML elem.textContent -
查询元素样式
-
查询行内样式
elem.style.color elem.style.fontSize elem.style.cssText -
查询计算后样式（实际应用样式）
var style = getComputedStyle(elem) style.color // DOM 对象方式 var value = style.getPropertyValue('color') // DOM API 方式注意：计算后样式只能读取，不能修改。
-