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   光標相對於網頁的垂直位置(可見區域);