全称：Document Object Model 文档对象模型
DOM会把文档看做是一个树状结构，同时定义了很多方法，来操作这个树
每一个标签都是一个节点(标签 即 元素 即 节点)
**不仅仅只有标签才算节点，也有文本节点
text文本节点 => 空格 换行 回车
已知一个节点,能找到任何一个节点
oUl.nodeType => object
一、节点查找操作(类似CSS选择器)
1、元素.nodeType;
只读属性 当前节点类型
DOM节点类型有多种 12种(W3C)定义
元素.nodeType;
1) 元素节点 <==> 1
2) 属性节点 <==> 2
3) 文本节点 <==> 3
2、元素.Attributes;
只读属性 属性列表集合
3、元素.childNodes;
只读属性
子节点列表集合(只包含以及子节点，不包含后辈孙级以下节点)
标准下： 包含了文本和元素类型的节点，也会包换非法嵌套的子节点
非标准下： 只包含元素类型节点，IE7下不会包含非法嵌套子节点
oUl.childNodes.length
是一个类数组对象，当只有一个子节点，其length = undefined,当子节点大于1时，其长度有数值
4、父级.children;
只读属性 子节点列表集合
只能获取儿子级节点，不能获取孙子级节点
标准下： 只包含元素类型节点
非标准下： 只包含元素类型节点
5、 元素.firstChild;
只读属性 元素下的第一个子节点(首节点)
标准下： firstChild会包含文本类型节点
非标准下： 只包含元素节点
元素.firstElementChild; 只读属性 标准浏览器下获取第一个元素类型节点(非标准下不识别会弹出undefined)
兼容处理：
var first=obj.firstElementChild || obj.firstChild;
没有子级点bug
6、 元素.lastChild;
最后一个子节点(尾节点)
var last=obj.lastElementChild || obj.lastChild;
7、 兄弟节点
下一个兄弟节点
obj.nextSibling;
1)在chorme FF ie9+ 下获取的是元素节点+文本节点(text)
2)在IE8 IE7 下只获取元素节点
obj.nextElementSibling
1)在chrome FF ie9+ 下只获取元素节点
2)在IE8 IE7 下 undefined
3)当没有下一个"元素"兄弟节点，会找文本节点，若没有文本节点则会是null(但不会报错)
做兼容：
var next=obj.nextElementSibling || obj.nextSibling;
上一个兄弟节点
var prev=obj.previousElementSibling || obj.previousSibling;
8、元素.parentNode;
只读属性 当前节点的父级节点(亲生父亲)
只能获取父级节点，不能获取爷爷级节点，且只有一个父级节点
9、元素.offsetParent;
只读属性 距离当前元素最近的一个有定位属性的父节点(找干爹)
a. 若没有定位父级，默认是body
b. IE7以下，当前元素没有定位，offsetParent默认是body，若有定位则是html
c. IE7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
01、zoom:1; 触发layout
02、document.getELementById('div1').currentStyle.haslayout; => true:触发; false:未触发
二、节点增删改操作
1、document.createElement('标签名');
动态创建元素
document.createElement('li');
2、 把创建的元素添加到页面中
1) 父级.appendChild(要添加的元素);
方法 追加子元素(在后面添加)
oUl.appendChild(oLi);
2) 父级.insertBefore(添加的元素,添加的位置);
方法 在指定元素前面插入一个新元素
注意：
1. 在IE下如果第二个参数的节点，不存在会报错
2. 在其他浏览器下，如果第二个参数的节点不存在，则会以appendChild形式进行添加
**appendChild insertBefore类似于剪切
3、 父级.removeChild(要删除的元素);
删除元素
oUl.removeChild(this.parentNode);
4、 父级.replaceChild(新节点,被替换的节点);
替换元素
document.replaceChild(oDiv,oP);
注意：
appendChild , insertBefore , replaceChild , 都可以操作动态创建出来的节点，也可操作已有节点
上移下移
1)上移 添加到上一个的前面
2)下移 添加到下一个的下一个的前面
三、元素的属性操作（Attribute）
1、元素.getAttribute(属性名称); 方法 获取指定元素指定属性
oTxt.getAttributes('value');
2、元素.setAttribute(属性名称，属性值); 方法 给指定元素指定属性设值
oTxt.setAttribute('value','hello');
3、元素.removeAttribute(属性名称); 方法 移除指定元素指定属性
oTxt.removeAttribute('value');
注意：
1.用‘.’和‘[]’的形式无法操作元素的自定义属性，getAttribute可操作元素的自定义属性
2.可以获取元素属性实际的值，IE7以下还是会返回资源的绝对路径
四、窗口的尺寸和大小
可视区尺寸
document.documentElement.clientWidth;
document.document.Element.clientHeight;
滚动距离
document.body.scrollTop
document.body.scrollLeft
Chrome 认为滚动条(scroll)是body的
FF、IE都不好使
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
兼容
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
内容高度
例：瀑布流中UL的高度
document.body.scrollHeight;
文档高度：
document.body.offsetHeight;
document.documentElement.offsetHeight; => IE为可视高
物体高度
1) getStyle(obj,name);
a. 高度 生效后的高度
b. 类型 字符串
c. display:none; 后依然是生效后的高度
2) obj.offsetHeight;
a. 高度 盒子模型的高度
b. 类型 number
c. display:none; 后显示为0
五、元素的距离
1、元素.offsetLeft; 只读属性 当前元素到定位父级的距离(偏移值)，到当前 元素.offsetParent的距离
元素.offsetTop;
没有定位父级
offsetParent => body/IE7 -> html
offsetLeft => html(margin)
有定位父级
IE以下
如果自己没定位： offsetTOP[Left] -> 到body距离
如果自己有定位： 那么就是到定位父级的距离
其他
到定位父级的距离
2、区别
style.width: 样式宽(100px，有单位)
clientWidth: 可视区宽(样式宽+padding 没单位)
offsetWidth: 占位宽(样式宽+padding+border 可视区宽+边框)
网友评论