1、什么是DOM？
DOM是文档对象模型，其中有两个核心，一个是HTML- DOM，一个是CSS - DOM.
2、访问节点
| 属性名称 | 描述 |
| parentNode | 返回节点的父节点 |
| childNodes | 放回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibing | 下一个节点 |
| previousSibing | 上一个节点 |
节点和节点的关系：
根节点，父节点，子节点，兄弟节点。
element属性
属性名称 | 描述 |
firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
lastElementChild | 返回节点的最后一个子节点 |
nextElementSibling | 下一个节点 |
previousElementSibling | 上一个节点 |
3、节点信息
| 节点类型 | NodeType值 |
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
4、操作节点
操作节点的属性：
getAttribute("属性名")；
//获得属性名
setAttribute("属性名","属性值")；
//给属性名赋值创建和插入节点
createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
A.appendChild( B) | 把B节点追加至A节点的末尾 |
insertBefore( A,B ) | 把A节点插入到B节点之前 |
cloneNode(deep) | 复制某个指定的节点 |
删除和替换节点
名称 | 描述 |
removeChild( node) | 删除指定的节点 |
replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
7、 对样式的操作
获取元素的式样：
HTML元素.style.样式属性＝"值"；
//通过元素直接修改属性
如下：
document.getElementById("titles").style.color="#ff0000"; //改变颜色
document.getElementById("titles").style.fontSize="25px " //改变字体大小className属性：
HTML元素.className="样式名称"；
//通过className属性给元素的样式赋值
8、鼠标事件
名称 | 描述 |
onclick | 点击事件 |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移除事件 |
onmousedown | 鼠标按钮被按下 |
9、HTML中元素属性
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |
注意：js中要注意浏览器兼容性
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
10、获取元素的位置
currentStyleget ，ComputedStyle()