1.获取DOM元素
- document.getElementById([元素的id]) ：在整个文档中，根据元素的ID，获得这个元素的对象。
document 是获取元素的上下文（获取元素的范围）
getElementById方法的上下文只能是document 获取到的结果是一个对象（堆内存）
- [context].getElementByTagName([标签名])：在指定的上下文中获取基于元素的的标签名获取一组元素集合，获取的结果是HTMLCollection类数组对象
类数组集合中的每一项都是单独的元素对象。
- [context].getElementByClassName([])
不兼容IE6~8:在指定上下文，基于样式类名获取对应的元素集合 - document.getElementsByName([])
在IE10以下，只识别表单元素的NAME属性值:根据元素的NAME属性值，在整个文档中获取一组元素集合 - document.documentElement:获取整个HTML元素。
- document.body:整个body的元素
- document.head:获取整个HEAD的内容
- [context].querySlector([SELECTOR])
不兼容IE6~8:根据css选择器快速获取一个元素对象，不管有多少个，只获取第一个。 - [context].querySlectorAll([SELECTOR])
不兼容IE6~8:获取一组类数组集合。
2.修改DOM样式
- 元素.style.xxx:修改（获取）当前元素的行内样式，操作的都是行内样式，如果写在样式表的样式，通过这种方式获取不到。
item.style.color='red';//行内样式的权重大于任何情况
item.style.cssText = "font-size:16px;color:blue;";
item.style.cssText +="font-size:16px;color:blue;";
//在IEL浏览器会把原来样式的最后一个封号去掉，所以在添加值的时候，要前面加上;
item.style.cssText +=";font-size:16px;color:blue;";
- 元素.className:操作当前元素的样式类，基于样式类的管理给予不同的样式，来区分选中非选中的。
- 给DOM元素设置内容innerHTML/innerText给非表单元素设置内容。
innerHTML 能够识别标签 innerText识别文本
itemBox.className = 'active';//覆盖之前的样式类
itemBox.className +='active';//添加一个样式类名
itemBox.classList.add('active');//存在兼容的问题
- value:操作表单元素的内容
3.获取DOM节点的属性方式页面中所有的元素都称为节点
节点的分类
- document文档节点
- 元素节点
- 文本节点
- 注释节点
- ....
描述节点的属性有：nodeType、 nodeName 、 nodeValue
节点之间的关系属性IE6~8会把注释当作元素节点 不会把空格和换行当作文本节点
let A = [CONTAINER].childNodes; //获取当前容器的所有子节点集合
let B = [CONTAINER].children;//获取的是所有的元素子节点
let C = [NODE].parentNode;//获取某个节点的父节点
let D = [NODE].previousSibling;//获取某个节点的上一个哥哥节点
//只要带有Element都不兼容IE6~8版本浏览器
let E = [NODE].previousElementSibling;//获取某个节点的上一个哥哥元素节点
let F = [NODE].nextSibling;////获取某个节点的下一个弟弟节点
let G = [NODE].nextElementSibling;////获取某个节点的下一个弟弟元素节点
let H = [CONTAINER].firstChild;//获取容器中第一个子节点
let J = [CONTAINER].firstElementChild;//获取容器中第一个元素子节点
let K = [CONTAINER].lastChild;//获取容器中最后一个子节点
let L = [CONTAINER].lastElementChild;//获取容器中最后一个元素子节点
