码迷,mamicode.com
首页 > 其他好文 > 详细

dom

时间:2015-06-09 13:13:04      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

一、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( ) { };

 

dom

标签:

原文地址:http://www.cnblogs.com/pan-hello/p/4562966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!