DOM高階知識

需求：使用element.style.left是無法獲取值的，只能給style.left賦值；因此需要用offset獲取該元素在頁面中的位置；（1）、offsetleft：表示自己的左上角相對於乙個叫做offsetparent的水平偏移量； 1、標準流、浮動、非脫標定位 offsetparent是誰？body；永遠是指某個元素距離body的左上角的水平偏移量； 2、脫標定位 absolute offsetparent是誰？元素相對誰定位，offsetparent就是誰；這個元素距離offsetparent的水平偏移量； fixed offsetparent是誰？null；指這個元素距離瀏覽器可視區域的左上角的水平偏移量；兩種情況：標準流、浮動、非脫標定位 offsetleft = 自己的margin + offsetparent的margin、padding、border；脫標定位 offsetleft = 自己的left + margin-left；（2）、offsettop 跟offsetleft是一樣； tips:使用offsettop和offsetleft獲取當前元素的定位值，再將該值賦予新的值，最後將新的值賦給style.top或style.left; var currenttop = box.offsettop; currenttop+=100; box.style.top=currenttop; （3）、offsetwidth 其實就是乙個元素的實際大寬度；（4）、offsetheight 其實就是乙個元素的實際大高度；

tips:自封裝動畫函式需要用到offsettop；

1   scrollleft
指元素裡面的內容滾動出去的水平距離;
2 scrolltop
指元素裡面的內容滾動出去的垂直距離;
3 scrollwidth
如果元素的寬度大於內容的寬度;
返回元素的寬度 （不包括滾動條）;
否則就是就是元素裡面內容的寬度;
4 scrollheight
如果元素的高度大於內容的高度
返回元素的高度（不包括滾動條）
否則就是元素裡面內容的高度
tips:scrolltop和scrollleft需要做相容處理;
document.onscroll = function ()

1、getcomputedstyle 作用：獲取元素的所有計算過後的樣式物件；用法：window.getcomputedstyle(element,pseudoelt)； element : 目標元素； pseudoelt : 偽元素；返回值：包含了所有計算過後的樣式的物件；注意點：如果沒有獲取偽元素，第二個引數要寫null為了相容，ie8底下不支援； 2、currentstyle 作用：獲取元素的所有計算過後的樣式物件；用法：element.currentstyle；得到的是ie8下面的乙個包含了計算過後的樣式的物件，ie8支援；

tips：多屬性動畫函式需要用到getcomputedstyle；

1、（沒用）clienttop（只讀取）某個元素頂部邊框的寬度；其實這貨沒什麼用... 2、（沒用）clientleft（只讀取）乙個元素的左邊框的寬度；也沒什麼用... 如果元素的文字方向(direction)是從右向左（rtl, right-to-left），並且由於內容溢位導致左邊出現了乙個垂直滾動條，則該屬性包括滾動條的寬度不包括左外邊距和左內邊距； 3、 clientwidth（只讀取）表示元素的內部寬度；該屬性包括內邊距，但不包括垂直滾動條（如果有的話）、邊框和外邊距； clientwidth = 左右paddig + 內容的寬度（width）； tips：不能把滾動條的寬度計算進來； 4、 clientheight（只讀取）返回元素內部的高度(單位畫素)；包含內邊距，但不包括水平滾動條、邊框和外邊距； clientheight的計算方式和clientwidth是一樣的； 5、 clientx（只讀取）事件發生時所處的可視區域的座標；可視區域：就是整個瀏覽器的大小； mouseevent.clinetx屬性指的是滑鼠事件的響應位置的x座標； 6 clienty（只讀取）事件發生時所處的可視區域的座標； mouseevent.clinety屬性指的是滑鼠事件的響應位置的y座標； tips:btn.onclick = function (event){}； event就是事件物件，但是這個方式在ie8不支援；

相容寫法：event = window.event || event；

client（座標）、scroll（滾動條）、offset（屬性值）；相容： event.client; （ie8以上支援） window.event.clientx; （ie8以下支援） pagex、pagey 指代元素相對於整個頁面的座標； tips：client指的是當前螢幕顯示的區域； page指的是整個html頁面；

緩動動畫：

（1）、註冊事件相容寫法
function addlistener(element,event,fn)else 
}（2）、移除事件繫結的處理程式
1、on的方式
方法：事件源.on+事件名 = null；
2、removeeventlistener
語法：事件源.removeeventlistener(事件名,處理程式,在哪個階段)；
例子：btn.removeeventlistener(「click」,clickhandel,false)；
細節：如果你在不同的階段分別繫結了兩個函式，要分開移除；
移除的是使用addeventlistener繫結的處理程式；
相容：ie8不支援；
3、detachevent
語法：事件源.detachevent(on+事件名,處理程式)；
例子：btn.detachevent(「onclick」,clickhandle)；
細節：移除的是使用attachevent繫結的處理程式；
相容：ie6-ie10支援，其餘不支援；
（3）、事件的三個階段
事件的三個階段分為：事件捕獲階段、事件目標階段、事件冒泡階段；
要知道事件的階段，需要通過乙個屬性：event.eventphase；
當eventphase的值為1的時候，是事件捕獲階段，為2的時候是事件的目標階段，為3的時候是冒泡階段；
事件在出現的時候只會包含兩個階段：
a) 捕獲和目標
b) 冒泡和目標
tips：冒泡和捕獲不會同時出現；
三個階段的異同：事件在觸發的時候，是有乙個過程的；
（4）、清除預設事件和冒泡事件
tips:子元素和父元素註冊了同樣的事件，如果子元素觸發了事件，那麼父元素也會觸發；
有時候不需要這樣的效果，這個效果也不好控制，所以要阻止事件冒泡；
function stopbubble(e)else
}function stopdefault(e)else
return false;
}（5）、事件型別
得到的是不帶on的事件名稱；
eg:box.onmouseup = function (e)

（1）、表示法
var reg = new regexp('abc');
var reg = new regexp(/abc/); （通常會用這種形式）；
var reg = /abc/;
reg.text("需要檢測的字串")； 判斷該字串是否符合該正規表示式，返回布林值；
string.match(regexp); 返回乙個陣列，陣列裡包含匹配結果，沒有結果返回null；
regexp.exec(string); 與match作用相同；
（2）、元字元
. 除以\n之外的所有單個字元；
\ 轉義字元；
| 左右表示式出現一次即true，為了避免歧義需要加()；
eg：1a||b32，寫成1(a||b)32;
() 優先順序，分組
（3）、量詞
？ 某個字元出現0-1次；
+ 一次或多次；
* 0-n次；
n為正整數，出現n次；
（4）、範圍
[0-9] 
[a-z]
[a-z] (支援連寫)
\d 數字，digital;
\d 非數字;
\s 空白字元，space;
\s 非空白字元;
\w 單詞，word;
\w 非單詞；
^ 開頭;
$ 結尾;
漢字編碼 [\u4e00-\u9fa5];

DOM高階知識

dom高階操作

JS 高階 DOM 技術

JS 高階 DOM 技術

DOM高階知識

dom高階操作

JS 高階 DOM 技術

JS 高階 DOM 技術

相關推薦