在JS中获取DOM元素的方法
getElementById
通过元素的ID获取指定的元素对象
1.getElementById的上下文只能是document
因为严格意义上一个页面的ID是不能重复的
2. 如果页面中的ID重复了，我们基于这个方法只能获取到第一个元素，后面相同ID的元素无法获取
3. 在IE6-7浏览器中，会把表单元素（input…）的name属性值当作ID来使用
getElementByTagName
1.
[context].getElementsByTagName在指定的上下文中，根据标签名获取到一组元素集合（类数组），不能直接使用数组方法
2.它会把当前上下文中，子子孙孙（后代）层级内的标签都获取到
3.基于这个方法获得的永远是一个集合
getElementByClassName
1.
[context].getElementsByClassName在指定的上下文中,基于元素的样式类名(class=‘xxx’)获取到一组元素集合
2.真实项目中，我们经常是基于样式类来给元素设置样式，但是此方法在IE6-8下不兼容
getElementByName
document.getElementsByName它的上下文也只能是document,整个文档中，基于元素的name属性值获取一组节点集合（类数组）
1.在IE浏览器中，只对表单元素的name起作用。
querySelector
[context].getElementsByClassName在指定的上下文中基于选择器(类似于CSS选择器)获取到指定的元素对象，只获取第一个
querySelectorAll
在querySelector的基础上，我们获取到选择器匹配到的所有元素，结果是一个节点集合NodeList
*.querySelector/querySelectorAll都是不兼容IE6-8浏览器（不考虑兼容的情况下，我们能用byId或其他方式获取，也尽量不用这两个方法，这两个方法性能消耗较大）
document.head
获取HEAD元素对象
document.body
获取BODY元素对象
document.documentElement
获取HTML元素对象
//=> 需求：获取浏览器屏幕的宽度和高度（兼容所有的浏览器）
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
面试题：获取当前页面中所有ID为HAHA的标签，兼容所有的浏览器
思路：获取所有tag集合，然后通过id筛选，放到一个新数组里面
节点（node）
在一个HTML文档中出现的所有东西都是节点
- 元素节点（HTML标签）
- 文本节点（文字内容）
- 注释节点（注释内容）
- 文档节点（document）
- …
每一种类型的节点都会有一些属性区分自己的特性和特征
-nodeType: 节点类型
-nodeName：节点名称
-nodeValue：节点值
元素节点
nodeType: 1
nodeName: 大写标签名
nodeValue: null
在标准浏览器中会把空格/换行等都当作文本节点处理
文本节点
nodeType: 3
nodeName: ‘#text’
nodeValue: 文本内容
注释节点
nodeType: 8
nodeName: ‘#common’
nodeValue: 注释内容
文档节点
nodeType: 9
nodeName: ‘#document’,
nodeValue: null
描述节点之间关系的属性
parentNode
获取当前节点唯一的父亲节点
childNodes
获取当前元素的所有子节点
- 子节点：只获取儿子级别的
- 所有：包含元素节点、文本节点
children
获取当前元素所有的子节点元素
在IE6-8中会把注释节点也当作元素节点来获取到没
previousSibling
获取当前节点的上一个哥哥节点（获取的哥哥可能是元素也可能是文本）
previousElementSibing: 获取上一个哥哥元素节点（不兼容IE6-8）
nextSibling
获取当前节点的上一个弟弟节点（获取的弟弟可能是元素也可能是文本）
previousElementSibing: 获取上一个弟弟元素节点（不兼容IE6-8）
firstChild
获取当前元素的第一个子节点（可能是元素或者文本等）
firstElementChild
lastChild
获取当前元素的最后一个节点
lastElementChild
需求一：获取当前元素的所有元素子节点
基于children不兼容IE低版本浏览器（会把注释当作元素节点）
需求二：获取当前元素的上一个哥哥元素节点
previousSibling: 上一个哥哥节点
previousElementSibling: 上一个哥哥元素节点，但是不兼容IE6-8
function preEle(curEle){
var pre = curEle.previousSibling;
while(pre && pre.nodeType !== 1){
pre = pre.previousSibling;
}
return pre;
}
DOM的增删改
createElement
创建一个元素标签（元素对象）
document.createElement([标签名i])
createDocumentFragment
appendChild
把一个元素对象插入到指定容器的末尾
container.appendChild([newEle])
insertBefore
把一个元素对象插入到指定容器中某一个元素标签之前
[container].insertBefore([newEle], [oldEle])
cloneNode
[curEle].cloneNode(): 浅克隆，只克隆当前的标签；传参true，表示深度克隆
[curEle]
removeChild
在指定容器中删除某一个元素
set/get/removeAttribute
设置/获取/删除 当前元素的某一个自定义属性，直接操作HTML文档，而不是修改元素对象的堆内存
基于setAttribute设置的自定义属性值都是字符串