1.JavaScript操作DOM分为三类:DOM Core(核心)，HTML-DOM和CSS-DOM。
2.访问节点
（1）使用getElement系列方法访问指定节点
getElementById():返回id属性查找对象第一个的引用
getElementByName():带有指定名称name查找对象的集合
getElementByTagName():带有指定标签名TagName查找的对象的集合
(2)根据层次关系访问节点
parentNode 父节点
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
3.可兼容不同浏览器的element属性:
firstElementChild 第一个子节点
lastElementChild 最后一个字节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
4.节点信息的属性:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
节点类型 NodeType值
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
5.操作节点
(1)改变节点属性的方法:
getAttribute("属性名"):用来获取属性的值
getAttribute("属性名","属性值"):用来设置属性的值
6.创建和插入节点
(1)创建节点
createElement(tagName) 创建一个标签名为tagName的新元素节点
A.appendChild(B) B节点追加至A节点的末尾
insertBefore(A,B) A节点插入B节点之前
cloneNode(deep) 复制某个指定的节点
7.删除和替换节点
(1)删除和替换节点的方法
removeChile(node) 删除指定的节点
replaceChile(newNode,oldNode) 节点替换指定节点
8.操作节点样式
(1)style属性
语法:HTML元素.style.样式属性="值";
style对象的常用属性:background(背景),text(文本),padding(边距),border(边框)
(2)常用事件
onclick 单击事件
onmouseover 鼠标移动某元素之上
onmouseout 鼠标从某个元素移开
onmousedown 鼠标按钮被按下
(3)className属性
语法:HTML元素.className="";
9.获取元素样式
style属性获取样式的属性值语法:HTML元素.style.样式属性;
currentStyle对象包含style特性语法:HTML元素.currentStyle.样式属性;
getComputedStyle()方法;方法接收两个参数,获取样式的属性值语法:
document.defaultView.getComputedStyle(元素,null).属性;
10.获取元素位置
(1)元素属性应用
offsetLeft 左边界
offsetTop 上边界
offsetHeight 高度
offsetWidth 宽度
offsetParent 偏移容器,动态定位包含元素的引用
scrollTop 滚动条的垂直位置
scrollLeft 滚动条的水平位置
clientWidth 可见宽度
clientHeight 可见高度
语法:document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;