js中的dom节点以及offset,client,scroll家族

一.节点.

1.父节点:parentNode;

2.兄弟节点:

(1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling);

(2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling);

3.子节点:

(1).选中第一个子节点:firstElementChild(在Ie中用firstChild);

(2).选中最后一个子节点:lastElementChild(在ie中用lastChild);

(3).选中所有的子节点:children(在ie中用childNodes);

 

二.dom节点的操作;

1.创建节点;

  createElement;如:var lis=document.createElement(“li”);

2.添加节点;

  (1).appendChild();添加孩子在盒子的最后面;

  (2).insertBefore();插入节点,如:lis.insertBefore(pi,pi1);pi为插入的节点;pi1为被插入的节点;

       如果pi1为:null则默认生成的盒子放到最后面;否则放到pi1前面;

3.移除节点;

   removeChild();如:lis.removeChild(pi1);既能移除本来就有的,有能移除自定义添加的;

4.克隆节点;

   cloneNode();如: lis.appendChild(pi1.cloneNode());

5.替换节点;

   replaceClid();

 

三.offset家族;(js中有一套方便的获取元素尺寸的方法);

1.操作对象.offsetLeft 和offsetTop,(返回一个数,而style.left返回一个带单位的字符串);     偏移量左,对于高级浏览器,是自己的外边框到定位父容器内边框的距离.兼容性差,不同浏览器要考虑不同适配;对于ie6,ie7,和高级一样,对于ie8是从父容器的外边框开始算的;

2.操作对象.offsetParent    每个标签对象都有这个属性,获得自己偏移参考的盒子,对于高级浏览器,指的是参考有定位的父容器,如果都没有定位,参考body;跟自己有没有定位无关;  对于Ie6.ie7 如果自己没有定位,1.父容器定位了,找父容器,2.父容器没定位参考自己的祖先元素中离自己最近的有width或者有height的元素;如果自己定位了,就是自己祖先元素中离自己最近的有定位的元素;

     (自定位,父无边;)能保证在浏览器中兼容;

3.offsetWidth和offsetHeight   一个盒子的offsetＷidth值就是自己的 width+左右padding+左右border的宽度;如果盒子没有宽度,所有浏览器都将把px值当做offsetWidth,而不是100%;如果盒子没有高度,用文字撑的,所有浏览器都将把px值当做offsetHeight;

 

四.client家族;

   clientWidth和clientHeight   就是自己的width+padding的值.如果盒子没有宽度,所有浏览器都将把px值当做clentWidth,而不是100%;如果盒子没有高度,用文字撑的,Ie6 的clientHeight是0;其他浏览器都是数值;

偏移量家族的属性只能获取不能修改;

 

五.scroll家族;

  scrollTop和scrollLeft;

  scrollTop 被卷去的头部;就是当滚动滚轮浏览器网页的时候网页隐藏在屏幕上方的距离;

 

六.其他;

1.scrollWidth   大小是内容的大小;

2.window.screen.Width    获得屏幕分辨率的宽;

 

七.event的常见属性;(高级浏览器直接写event.对于Ie6.用window.event;)

  1.event.offsetX   光标相对于自己盒子边框内侧的水平位置,不包括边框;

  2.event.offsetY   光标相对于自己盒子的垂直位置;

  3.pageX  光标相对于网页的水平位置;(适配不好);

  4.pageY   光标相对于网页的垂直位置;

  5.screenX  光标相对于屏幕的水平位置;

  6.screenY  光标相对于屏幕的垂直位置;

  7.clientX   光标相对于网页的水平位置(可见区域);

  8.clientY   光标相对于网页的垂直位置(可见区域);