dom
一、DOM的核心是增加，移除和修改
二、问题：若在css中定义了某个div的height，但是在javascript中用obj.style.height却无法获得任何值。obj.style.height只能获取定义在HTML标签中的style中的height。
解决方法：
- 使用currentStyle 和 getComputedStyle
- 作用：不单能获取头部的样式，而且能获取到计算后的样式。
- obj.currentStyle[attr] ; （IE用的）
- getComputedStyle( obj , null )[attr] ; （非IE用的）
- 上面两个会冲突
- 结局冲突的方式，建立函数：
三、节点类型
|
|
标签
|
文本
|
注释
|
文档碎片节点
|
|
nodeType
|
1
|
3
|
8
|
11
|
四、childNodes获得body元素的子节点集合
- obj.childNodes; 包括obj内所有的子节点（标、文、注、碎）
- obj.childNodes[ 节点类型对应的nodeType ].nodeType; 表示标签——1
- oUl.childNodes[i].nodeType == 1 可直接查找标签（obj中的全部）
五、children
- 获取下一级的全部标签类的节点
- obj.children.length
六、nextSibling（IE）和 nextElementSibling（谷歌）
- 作用：获得下一个兄弟节点
- 解决冲突
function fnNext(obj){
if ( obj.nextElementSibling ) {
return obj.nextElementSibling;
}else{
return obj.nextSibling;
}
}
调用：fnNext(obj).style[ attr ];
七、previousSibling( IE ) 和 previousElementSibling( 谷歌 )
- 作用：获得上一个兄弟节点
- 解决冲突
function fnpre( obj ){
if ( obj.previousElementSibling ) {
return obj.previousElementSibling;
}else{
return obj.previousSibling;
}
八、parentNode
- 获取父节点，只有唯一的，也可以看作返回父节点
- obj.parentNode[ attr ] ;
九、offsetparent
- 获取离对应的对象最近，并且已经进行过css定位的容器元素
- obj.offsetparent[ attr ];
十、firstChild( IE )和firstElementChild（谷歌）
- 作用：获得第一个子节点
- 解决冲突
function fnFirst(obj){
if (obj.firstElementChild) {
return obj.firstElementChild
}else{
return obj.firstChild;
}
}
十一、lastChild（IE）和lastElementChild（谷歌）
- 作用：获得最后一个子节点
- 解决冲突：
function fnLast(obj){
if (obj.lastElementChild) {
return obj.lastElementChild
}else{
return obj.lastChild;
}
}
十二、createElement 创建新元素
- 例如：var oLi = document.createElement("li");
- 作用：创建一个新的li标签
十三、appenChild
- 作用：在childNodes末尾插入一个节点node
- 例如：oUl.appendChild(oLi);
- 作用：在对象oUl的末尾插入一个li标签
十四、insertBefore
- 作用：在childNodes前面插入一个节点node
- 例如： oUl.insertBefore(oLi,oUl.children[0]);
- 作用：在oUl第一位子节点前面插入一个oLi对象节点
十五、replaceChild
- obj.replaceChild( newNode , oldNode );
- 作用：newNode替换节点oldChild
- 例如：oUl.replaceChild(oLi,oUl.children[0]);
- 作用：oLi对象节点替换oUl中的oUl.children[0]节点
十六、removeChild
- obj.removeChild( node );
- 作用：移除父节点的某个子节点node
- 例如：oUl.removeChild(oUl.children[0]);
- 作用：移除oUl的第一个子节点oUl.children[0]
十七、自定义属性
- 创建新的属性：setAttribute
- obj.setAttribute( string name , string value );
- 作用：增加一个指定名称和值得新属性，或者把一个现有的属性设定为指定值。注意：string为字符串，因此要加上双引号。
- 查询属性：getAttribute
- obj.getAttribute( string name );
- 作用：查询对象中对应的属性的值
十八、scrollTop
- document.documentElement.scrollTop; （IE6的）
- document.body.scrollTop; （其他高级浏览器）
作用：有滚动条时，获取可视区域在总页面高度中的位置
十九、clientHeight
- document.documentElement.clientHeight;
- 作用：获取可视页面的高度
二十、offsetHeight
- document.documentElement.offsetHeight;
- 作用：获取页面总高度
二十一、滚动滚动条时加载
window.onscroll = function( ) { };
二十二、改变窗口时加载
window.onresize = function( ) { };
