自定义属性及getAttribute方法
- getAttribute() 获取特定元素节点属性的值，某些低版本浏览器不支持.
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;//js代码添加自定义的属性(自定义索引) 在ie8下面能够看到这个属性。chrome可以使用但是看不到
}
- setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持
- removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持
outerHTML/innerHTML/innerText
- innerHTML(可读可写)：获取和设置元素节点里的内容，从对象的起始位置到终止位置的全部内容,不包括自身Html 标签。
- outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身。
- innerText：获取某个网页元素的文本内容（忽略标签，不常用）
DOM元素类型(元素和文本)
- 节点可以分为元素节点、属性节点和文本节点...，而这些节点又有三个非常有用的属性 ，分别为：nodeName（节点的名称）、nodeType（节点类型） 和 nodeValue（文本）
- nodeType：元素(1) 属性(2) 文本(3)
//children:子元素，获取元素对象的子元素。类数组(下标和length)
oUl.children.length)//[object HTMLCollection] 4
oUl.children[0];//获取ul里面第一个元素。
获取元素内容用innerHTML，表单使用value
childNodes/过滤空白节点
- childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，在IE9之前，IE浏览器会自动忽略空白节点（兼容问题）.
高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling
- firstChild/firstElementChild 获取当前元素节点的第一个子节点
firstChild包含空白节点 - lastChild 获取当前元素节点的最后一个子节点
- ownerDocument 获取该节点的文档根节点（document）
- document.documentElement 获取的html标签元素
- parentNode 获取当前节点的父节点
- previousSibling 获取当前节点的前一个兄弟节点
- nextSibling 获取当前节点的后一个兄弟节点
获取非行内样式
- offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent(定位父级)没有单位
盒子的偏移值，如果存在定位父级，以父级为基准，没有定位父级以body元素为基准
注意，只能获取，不能赋值
oUl.style.width只能获取行内元素css
求元素的绝对位置
function getpostion(obj) {
//存储最终的值
var _left = 0;
var _top = 0;
while (obj) { //检测定位父级是否存在
_left += obj.offsetLeft;
_top += obj.offsetTop;
obj = obj.offsetParent; //获取当前元素的定位父级
}
return { //结果返回一个对象，两个值
left: _left,
top: _top
}
}
- 获取选择器里面的css相关属性的值。
- 标准浏览器：getComputedStyle()
- IE8及其以下浏览器：currentStyle()
兼容操作
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
文档碎片（createDocumentFragment）
文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素。
应用
-
进度条
进度条 简易年历
-
自动登录勾选提示
勾选提示
综合应用
1．点击按钮换图片
2．tab切换案例
3．扩展案例： QQ延迟提示框，两个盒子兄弟关系，中间有空隙。
4．扩展案例： 密码强度
5．扩展案例： 求一个盒子的绝对位置。
