第三章 DOM 操作
1 获取元素
1.1 根据id名获取
document.getElementById(idName)
1.2 根据标签名获取
document.getElementsByTagName(tagName) // 返回一个集合 （类数组对象） 从整个文档获取
element.getElementsByTagName(tagName) // 从element的后代元素中获取
1.3 根据类名获取
document.getElementsByClassName(className) // 返回一个集合（类数组对象） 从整个文档获取
element.getElementsByClassName(className) // 从element的后代中获取
需要 IE9 以上浏览器支持！
1.4 根据 name 属性值获取
document.getElementsByName() //返回集合 只有document才有该方法
1.5 根据选择器获取
document.querySelector(选择器) //选择器第一个满足选择器条件的
document.querySelectorAll(选择器) //选择所有满足选择器条件的，返回nodeList（类数组对象）
element.querySelector(选择器)
element.querySelectorAll(选择器)
需要 IE8 以上浏览器支持！
比较推荐这种用法。
1.6 获取所有的元素
document.all //所有的元素组成的集合（类数组对象）
//document.all的妙用
if (document.all) {
//说明是IE浏览器 IE10以及以下版本
} else {
// 说明非IE浏览器 IE11以及EDGE
}
2 文档结构
2.1 作为节点树
parentNode 父节点
childNode 所有子节点的集合
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 上一个兄弟节点
nextSibling 下一个兄弟节点
2.2 作为元素树
parentElement 父元素
children 所有子元素的集合
firstElementChild 第一个子元素 IE9+
lastElementChild 最后一个子元素 IE9+
previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素
childElementCount 子元素的数量
ownerDocument 元素所属的文档对象（document）
3 属性操作
3.1 内置属性
element.属性名;
3.2 自定义属性
element.getAttribute(attrName) 获取属性的值（只有写到html上的属性，都可获取；一般用于自定义属性）
element.setAttribute(attrName, value) 设置属性的值（一般用于自定义属性）
3.3 data-开头的自定义属性
element.dataset.名字
4 CSS操作
4.1 style属性
element,style.属性名 读写css属性
只能读写标签内写在style里面的css属性，设置的css属性添加到标签内的style里
4.2 读取计算样式（只读）
getComputed(元素).属性； //非IE(IE11和Edge)
元素.currentStyle.属性 //IE 获取不到复合属性(background、border)
4.3 元素的 class 属性
① className
element.className 可读可写
返回字符串
元素的class属性的值
② classList (IE9+)
对象，类数组对象。元素所有class值的列表。
方法：
add() 添加一个class值
remove() 删除一个class值
toggle() 切换一个class值（没有就添加，有就删除）
5 元素的文本内容
用于双标签元素
可读可写
把内容当做HTML：
innerHTML
outerHTML
把内容当做文本
innerText
textContent
6 元素尺寸位置
6.1 元素的尺寸(只读)
offsetWidth / offsetHeight 元素尺寸(内容宽高+内边距宽高+边框)
clientWidth / clientHeihgt 元素尺寸（内容宽高+内边距宽高）
scrollWidth / scrollHeight 元素尺寸（如果子元素没有溢出，同client系列；如果子元素溢出：子元素宽度+一个方向的内边距）
getBoundingClientRect() 返回对象（对象中包含width和height属性） IE8中没有width和heihgt属性
6.2 元素的位置（只读）
offsetLeft / offsetTop 元素位置，在第一个定位的祖先元素上的位置，如果都没定位在根元素上的位置
clientLeft / clientTop 元素边框的宽度
getBoundingClientRect() 返回对象 元素在视口上的位置
left 元素的坐左边距离视口左边的距离
top
right 元素的最右边距离视口左边的距离
bottom
x 同left
y 同top
6.3 内容位置 （可读可写）
scrollLeft 元素内容的滚动位置； 值增大，内容向左滚；
scrollTop
生效前提： 子元素溢出父元素，设置父元素overflow：hidden/auto/scroll
7 节点的添加/删除/替换/克隆
7.1 创建元素节点
document.createElement(tagName)
7.2 添加子节点
parentElement.appendChild(node) 追加子节点
parentElement.insertBefore(newNode, oldNode) 指定位置插入节点
7.3 删除子节点
parentElement.removeChild(node)
7.4 替换子节点
parentElement.replaceChild(newNode, oldNode) 会把旧的节点删掉换成新的节点
7.5 克隆节点
element.cloneNode(true) 克隆节点
参数 true 深度克隆，元素自己和后代元素都会克隆
false (默认) 只克隆元素自己，不克隆后代元素
8 Document
8.1 属性
referrer 历史记录中上一个地址（只读）
URL 页面地址（只读）
domain 域名（只读）
lastModified 文件的最后一次修改时间（只读）
title 网页标题（可读可写）
cookie 会话内容（可读可写）
documentElement 获取html元素
body 获取body元素
head 获取的head元素
all 获取所有的元素
8.2 方法
write()
9 documentFragment
9.1 关于documentFragment 对象
1）documentFragment 也是一类节点， nodeType 是 11，并不是元素对象，它通常作为其他节点的一个临时的容器。
2）可以给 documentFragment 对象添加子节点，documentFragment 节点也可以作为其他节点（元素）的子节点。
3）documentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。
9.2 创建 documentFragment 对象
document.createDocumentFragment();
9.3 documentFragment 对象的应用场景
1）如果连续给一个元素添加多个子元素，可以先把子元素添加到 documentFragment 对象中，最后把 documentFragment 对象添加到父元素中，减少浏览器渲染次数。
2）利用 documentFragment 实现对一组元素进行倒序排列。