一、什麼是DOM
二、DOM節點
- 1.DOM節點的分類
- 2.擷取元素節點
- 3.擷取屬性節點
- 4.擷取文本節點
- 5.操作元素節點
- 6.操作文本節點
三、事件
- 1.事件的類型
四、事件的捕獲和冒泡
五、事件的參數
- 1.行内樣式的參數
- 2.指派式的點選事件的參數
六、innerText、innerHTML和value
七、修改元素的樣式style
九、擷取自定義屬性
十、document.write()、innerHTML和document.createElement()
十一、事件對象
十二、事件委托
十三、案例
- 1.禁用滑鼠右鍵
- 2.禁止滑鼠選中文字
- 3.取消a連結的預設跳轉行為
十四、H5網頁特效
- 1.擷取元素偏移量offset
- 2.擷取元素可視區client
- 3.擷取元素滾動距離scroll

一、什麼是DOM

1.DOM是文檔對象模型

為文檔提供了結構化表示，并定義如何通過腳本來通路文檔結果目的就是為了能讓JS操作html元素而制定的一個規範。

2.處理網頁内容的方法和接口。

3.DOM是一個複合的資料類型。

DOM就是HTML頁面的模型，将每個标簽都做為一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的元素進行程式設計控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設定文本框中的值。

1.網頁解析過程

HTML加載完成後，渲染引起會在記憶體中把HTML穩定生産一個DOM樹，dom樹有一個且隻有一個根節點，就是html節點。

二、DOM節點

1.在HTML當中一切都是節點。

2.整個文檔就是一個文檔節點。

3.每一個HMTL标簽都是一個元素節點（标簽）。

4.标簽中的文字則是文位元組點。（文本）。

5.标簽的屬性是屬性節點。（屬性）

6.節點都是對象

1.DOM節點的分類

DOM節點可以分三類：

标簽：是元素節點

文字:是文本節點

屬性：是屬性節點

2.擷取元素節點

一般我們操作的都是元素節點，很少操作屬性節點和文本節點，節點擷取到後是一個對象形式的存在，可以操作它的屬性。

擷取body

document.body

擷取html

document.documentElement

1.通過id擷取

<body>
<div id="box">
<div>
</body>
<script>
document.getElementById('box');
</script>

document.getElementById可以擷取到指定Id的元素，傳回值是一個元素節點。

2.通過标簽擷取

<body>
<div id="box">
<div>
</body>
<script>
document.getElementsByTagName("div")
</script>

document.getElementsByTagName可以擷取指定類型的标簽，它的傳回值時一個數組。即使隻有一個div标簽，也傳回的是一個數組。

3.通過類名擷取H5新增

<body>
<div class="box">
<div class="box">
<div>
</body>
<script>
document.getElementsByClass(".box")
</script>

document.getElementsByClassName可以擷取指定類名的标簽，傳回值也是一個數組。

4.通過元素節點之間的關系擷取。

節點在文檔中是有關聯的，在嵌套的盒子裡，父盒子叫父節點，子盒子叫子節點，同級之間的子盒子叫兄弟節點，兄弟節點又可以分前後節點。

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
		</div>
</body>
<script>
</script>

以這樣一個模型為例

5.擷取父元素節點

首先要根據id擷取到一個子節點，

document.getElementById(‘son’);

之後通過這個子節點來通路父節點

document.getElementById(‘son’).parentNode

這樣就能擷取到id為father的節點。

這是在不知道父節點是誰的情況下，可以使用。

在DOM中，元素節點的父元素節點必須是另一個元素節點，文本節點和文本節點的子元素不允許是元素節點。

6.擷取下一個節點

擷取下一個節點需要注意的是，在不同浏覽器中下一個節點的定義不一樣，在E678中指下一個元素節點（标簽）沒有空格或者換行節點，在火狐谷歌IE9+以後的下一個節點不止元素節點（包括空文檔和換行節點）。

空文檔和換行節點就是代碼裡的空格或者另起一行寫代碼

document.getElementById('son').nextSibling

IE678中指下一個元素節點（标簽）。在火狐谷歌IE9+以後都指的是下一個節點（包括空文檔和換行節點）。

要是把上面的模型這麼寫

<body>
		<div id="father">
			<div id="son"></div><div id="brother"></div>
		</div>
</body>
<script>
</script>

這樣擷取的下一個節點肯定就是id為brother的元素節點了。

document.getElementById(‘son’).nextElementSibling在火狐谷歌IE9都指的是下一個元素節點。

綜上，可以看出在IE678中擷取不到空格節點或者換行節點，隻能擷取元素節點。可以寫一個相容性寫法：使在IE678和火狐谷歌IE9+都擷取的是下一個元素節點

document.getElementById('son').nextElementSibling ||document.getElementById('son').nextSibling

在IE678運作時，由于IE678不支援nextElementSibling，根據||或運算的規則，就會運作後面的nextSibling，這樣擷取的就是下一個元素節點。而在火狐谷歌IE9+運作時，兩個都支援，根據||或運算規則，就會運作前面的一個代碼nextElementSibling，這樣擷取的也是元素節點。

7.擷取上一個節點

同擷取下一個節點一樣，在不同浏覽器的上一個節點，指代的不一樣。

document.getElementById(‘brother’).previousSibling在IE678中指前一個元素節點,在火狐谷歌IE9+以後都指的是前一個節點（包括空文檔或換行節點）。

document.getElementById(‘brother’).previousElementSibling在火狐谷歌IE9都指的是前一個元素節點。

相容性寫法：

document.getElementById('brother').previousElementSibling||document.getElementById('brother').previousSibling

這樣無論在哪個浏覽器中擷取的前一個節點都是元素節點。

8.擷取第一個子節點

子節點在不同的浏覽器中指代的也不一樣。

firstChild：在IE678中指第一個子元素節點（标簽），在火狐谷歌IE9+以後都指的是第一個節點，包括空文檔。就是代碼的空格。

firstElementChild:在火狐谷歌IE9都指的第一個元素節點。

相容性寫法：

document.getElementById('father').firstElementChild || document.getElementById('father').firstChild

9.擷取最後一個子節點

lastChild：在IE678中指最後一個子元素節點（标簽），在火狐谷歌IE9+以後都指的是最後一個節點。

要是上面代碼改成

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div></div>
</body>
<script>
</script>

這樣最後一個節點就是元素節點了。

lastElementChild：火狐谷歌IE9都指的最後一個元素節點

相容性寫法：

document.getElementById('father').lastElementChild ||document.getElementById('father').lastChild

10.擷取所有子節點

childNodes：會傳回所有的子節點，包括空格或換行。一行代碼換行時，隻有一個空文檔節點。

children：會傳回所有的元素節點，不包括空格和換行，在IE678裡注釋節點也會被列印出來

11.擷取所有兄弟節點

這個沒有找到屬性來擷取。可以自己寫一個方法。

function siblings(elm) {
		var a = [];
		var p = elm.parentNode.children;
		var pl = p.length'
		for(var i =0;i<pl;i++) {
			if(p[i] !== elm)
			{ 
			a.push(p[i])
			};
		}
		return a;
}

邏輯就是通過一個節點，先擷取父節點下的所有子元素節點，再周遊這個數組，判斷是否等于自己，不等與自己就存放到一個新數組中。最後傳回這個新數組。

這樣siblings方法就變成了一個擷取所有兄弟節點的方法了。

12.H5新增

擷取第一個類名或标簽為指定參數的元素，

擷取指定元素的所有标簽或類名。

3.擷取屬性節點

擷取屬性節點先要取到對應的元素節點

<body>
<div id="box" style="width:200px">
<div>
</body>
<script>
var father = document.getElementById('box');
var attribute = father.getAttributeNode('style');
</script>

getAttributeNode就能擷取到style這個屬性節點。屬性節點其實就是元素節點的一個屬性，擷取元素節點後，他的屬性中就存在了這個屬性節點，沒必要這麼做。

4.擷取文本節點

擷取文本節點沒有直接的方法，一般擷取都是用元素的InnerHtml或者innerText列印出來

或者就是寫代碼時保證文本标簽前面沒有空格，這樣雙标簽裡的第一個子節點就必定是文本節點了

<body>

<div id="father" style="width: 100px;" class="mm" >aa</div>

<div id="mother"></div>
</body>
<script>
    var fater= document.getElementById('father');
     var d = fater.firstChild.nodeValue;
    console.log(d);
</script>

這時候列印出來的就是aa，是節點的值，要是列印fater.firstChild，會列印“aa”,帶雙引号，表示文本節點。

5.操作元素節點

在擷取到節點之後，就可以對節點進行一些操作。

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
		</div>
</body>
<script>
</script>

以這個例子為例

1.建立新元素節點

這樣就能建立一個div标簽

2.在父節點最後插入建立的新元素節點

先擷取父節點

這樣文檔結構就變成了

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
			<div ></div><!-- 這是建立的元素-->
		</div>
</body>
<script>
</script>

3.在指定元素節點前插入元素節點

var fater= document.getElementById('father')
var son= document.getElementById('son')
var newNode = document.createElement("div")
fater.insertBefore(newNode,son)

這樣就能在id為son的盒子前面新增一個div盒子。

4.删除元素節點

var fater= document.getElementById('father')
var son= document.getElementById('son')
fater.removeChild(son)

這樣就會在文檔裡删除id為son的盒子

5.複制元素節點

cloneNode：複制節點，有一個參數，為boolean值，true表示複制這個節點下的所有子節點和此節點，深複制，false相當于不填，隻複制此節點

6.節點的判斷

擷取到節點後，要是要知道這是什麼節點，可以用節點的屬性

nodeType來判斷節點的類型。

節點. nodeType = 1 表示的是元素節點

節點.nodeType = 2 表示是屬性節點

節點.nodeType = 3 是文本節點

7.節點的值

nodevalue來擷取節點的值

元素節點的值為null

屬性節點的值為就是屬性的值

文本節點的值為文字

8.節點的名字

nodeName來擷取節點的名字

元素節點的名字是标簽

屬性節點的名字就是屬性

文本節點是#text

9.替換元素節點的類名

元素節點.className.replace(“被替換的類型”，“需要加入的類型”)

10.添加元素節點的類名

元素節點.className + = “空格+新類名”

主要要用加等于，不然的化就是直接設定類名了，而且新類名前面一定要加一個空格，才能拼接到已有的類名後面。沒有的話會直接拼到前一個類名上，變成了一個新類名。

11.擷取元素節點的所有類名

e.classList
e.classList.add('添加類名')
e.classList.remove('删除類名')
e.classList.toggle('切換類名')

4.元素節點的屬性

1.擷取元素節點的屬性

var fater= document.getElementById('father')
  var style =  fater.style

上面擷取的是元素的style屬性，還能擷取元素的其他屬性，比如id，class。

擷取class類名時要用className

一般修改節點的屬性都是操作盒子的樣式，是以先要通路style屬性，再修改盒子的css樣式，這樣的修改相當于修改行内樣式，優先級是最高的。

注意擷取style屬性時，隻能擷取行内樣式，不能擷取内嵌或外鍊寫的樣式

上面是點方法，還有一個方法getAttribute

var fater= document.getElementById('father')
  var style =  fater.getAttribute('style')

這樣都可以擷取寫在行内樣式的style,但擷取不到寫在css的style

在css和js中，屬性的命名方式不一樣，在css中background-color是這麼寫，在js中backgroundColor要使用駝峰命名法，它們指的是用一個東西，不要糾結。

2.設定元素節點的屬性

設定元素的屬性和擷取元素的屬性方法一緻，都是點方法，在後面加上要設定的值就可以了。

var fater= document.getElementById('father')
   fater.style.witdh= '500px'

上面就是設定id為father的盒子寬度為500px;注意值要寫成字元串形式。

或者方法setAttribute(），設定類名時不是className，就是class，比較特殊

var fater= document.getElementById('father')
   fater.setAttribute('title','test');

上面是設定了盒子的一個title屬性，值為test。

3.删除元素節點的屬性

var fater= document.getElementById('father')
   fater.removeAttribute('title','test');

這樣就把上面添加的屬性title給删除掉了。

4.擷取元素節點的文本值

<div id="father" style="width: 100px;" class="mm" >aa</div>

</body>
<script>
    var fater= document.getElementById('father');
     fater.innerHTML = "<strong>bb</strong>"
    fater.innerText = "<strong>cc</strong>"
</script>

innerHtml：

擷取标簽裡面的内容，可以通過此方法來設定文字内容，要是設定的時候帶有标簽會把标簽轉換為對應的樣式。

innerText：

也是擷取标簽裡的文字内容，要是設定的時候帶有标簽不會把标簽轉換為對應的樣式，會直接把标簽顯示出來。

5.控件

控件算是一個比較特殊的節點。

控件的value是它所顯示的值，innerHtml和innerText無效。

6.操作文本節點

1.建立文本節點

三、事件

事件是核心内容，事件就是一系列的動作，根據這些動作來觸發一些樣式或内容的變化，正因為有了事件，網頁才能和使用者真正的互動起來。

1.事件的類型

事件名	解釋
onclick	滑鼠點選事件
ondblclick	滑鼠輕按兩下事件
onkeyup	按下鍵盤後并松開事件
onchange	文本内容或下拉菜單中的選項發生改變的事件
onfocus	輸入框獲得焦點事件
onblur	輸入框失去焦點事件
onmouseover	滑鼠懸停事件
onmouseout	滑鼠移出事件
onload	網頁文檔加載事件
onunload	關閉網頁事件
onsubmit	表單送出事件
onreset	重置表單事件

|  onmouseup|滑鼠彈起事件|
   |  onmousedown|滑鼠按下事件|

2.事件的綁定

事件需要綁定到觸發事件的元素節點上，這樣才能知道是誰觸發了什麼事件。需要注意的時window也可以綁定事件。

①指派綁定

var fater= document.getElementById('father')
fater.onclick = function(){
   //邏輯
}

上述就是在id為father的盒子上綁定了一個點選事件。這樣的綁定事件一次隻能綁定一個，且後面的事件會把前面的事件覆寫

②變量指派綁定

var fater= document.getElementById('father')
  fater.onclick = test;
  function test(){
  };

③行内綁定

<body>
<div onclick = "test(this)"></div>
</body>

<script>
function test(a){
   
  };
</script>

行内綁定需要注意的是要加一個this實參,不寫的話，在這個函數中就不能找到這個點選的元素節點。

因為這個參數裡this指向的不是元素節點，而是window對象。

④addEventListener方法綁定

<body>

    <div style="width: 100px;height: 100px;background-color: black;"></div>
</body>
</html>
<script>
  var c = document.getElementsByTagName('div')
     c[0].addEventListener('click',function(e){
           console.log(e)
       })

addEventListener(‘事件名’，‘匿名函數’，useCaptrue)

usecaptrue嵌套的盒子觸發事件的順序

true表示先觸發嵌套盒子父盒子的事件，即按捕獲的順序觸發事件

false表示先觸發嵌套盒子裡的事件，就還是冒泡順序觸發事件

不寫預設是false

函數的this指向調用的元素

注意使用這個綁定事件時，事件不要加前面的on

w3c标準，推薦使用

有的事件是不會冒泡的。

⑤attachEvent方法綁定

IE678裡attachEvent(事件類型，事件處理函數)

這裡的this指向的是window

盡量不要用了，

3.事件的參數

綁定的事件的函數中有一個參數，可以列印出來看

就是這個事件對象，包含了點選的位置其他一些屬性，可以使用。

4.一些常用的事件解釋

1.onload事件

頁面加載事件

表示頁面加載完才會觸發這個事件，頁面加載完就是文本和圖檔加載完之後才會執行裡面的方法。

因為js的加載和寫在html的位置有關，要是寫在body标簽前，會先加載js檔案，而這時候頁面上還是沒有文檔的，可能會報錯。是以可以同onload。先加載頁面，在加載js檔案。

2.mouseenter和mouserover的差別

mouserover會冒泡

mouseenter不會冒泡。

5.事件的一些案例

1.多個元素for循環綁定事件

<body>
   <div></div>
    <div></div>
    <div></div>
</body>
</html>
<script>
    var c = document.getElementsByTagName('div')
    for(var a = 0;a<c.length;a++){
         c[a].oncilck = function(){
         console.log(a)
}
  }
 
</script>

可以用此方式給三個div綁定事件，但此時要用a時，會發現a的值時3，并不是0，1，2。這是因為在語句中var定義的變量會洩露成全局變量，而調用事件是在綁定事件之後，即for循環已經結束了，此時洩露在全局的a的值就是最後一次循環的值為3,為什麼不是2，是因為在2的時候，還是小于元素節點數組的長度，還是會進行一次循環，之後a++，就變成了a = 2+1。之後進行判斷3是不小于長度3的，循環停止，此時a的值就是3了。

為了需要在使用每個a時可以做一些操作。

1**.函數自調用**

<script>
for(var a=0;a<c.length;a++){
(function(i){
li[i].onclick=function(){alert(i);}
})(a);
}
</script>

(function(){})()這個形式是一個函數自調用，裡面的全局變量不會洩露出來，隻能在裡面使用。這樣就能把每次的a保留下來。

2.閉包

for(var a=0;a<c.length;i++){
    c[a].addEventListener("click",function(){
        return function(){
            console.log(a);
        }
    }(a));

将a作為實參，傳給匿名函數，可以将a保留下來。

3.let 關鍵詞

<script>
    var c = document.getElementsByTagName('div')
    for(let a = 0;a<c.length;a++){
         c[a].oncilck = function(){
         console.log(a)
}
  }
 
</script>

let關鍵詞會使語句形成一個塊級作用域，a不會洩露出去，隻在函數中使用，可以把a保留下來。

6.事件的删除

1.on方式綁定d

2.addEventListener方式綁定的

box.addEventListener('click',fn)
box.removeEventListener('click',fn)
function fn(){
}
//需要這種方式才能删除事件。不能用匿名函數

3.attachEvent

box.attachEvent('onclick',fn)
box.detachEvent('click',fn)
function fn(){
}
//需要這種方式才能删除事件。不能用匿名函數

四、事件的捕獲和冒泡

1.什麼是事件的捕獲。

在嵌套的盒子裡點選盒子裡的一個嵌套元素時，程式會從最外層的元素，往裡找這個點選的元素，捕獲就是從上往下找元素。

這個階段不會觸發事件。

2.什麼是事件冒泡

找到最底層的元素後，開始觸發事件，即從最裡面的元素的事件開始觸發，冒泡就是從下往上觸發事件。

3.取消冒泡事件

即隻觸發自身的事件，不會觸發外層盒子的事件。

<body>
    <div style="width: 100px;height: 100px;background-color: rgb(201, 55, 55);"  id="box1">
   <div style="width: 50px;height: 50px;background-color: rgb(31, 30, 30);" id="box"></div>
    </div>
</body>
</html>
<script>
 var c = document.getElementById('box1')
  var d = document.getElementById('box')
   c.addEventListener('click',function(e){
            console.log(1)
        })
  d.addEventListener('click',function(e){
            e.stopPropagation();
            console.log(2)
        })

使用e.stopPropagation()後，不會觸發父盒子的console.log(1)方法了。

4.阻止本身事件

在事件的匿名函數中，隻寫return false即可

五、事件的參數

1.行内樣式的參數

1.參數為event

<body>
<div id="box" onclick="test(event)">
</div>
</body>
<script>
   var a  =document.getElementById('box')
     function test(event){
        console.log(events)
        console.log(this)
    }
</script>

此時函數裡的this指向window對象，event代表事件對象，有事件的詳細資訊，點選位置等。

2.參數為this

<body>
<div id="box" onclick="test(this)">
</div>
</body>
<script>
   var a  =document.getElementById('box')
     function test(event){
        console.log(events)
        console.log(this)
    }
</script>

此時的實參是this，列印這個參數，指代的是出發這個事件的元素節點。函數裡的this還是指代的window對象。

綜上：event是事件函數的一個内置參數，實參盡量不要與他同名。定義的函數中this使用都是window。

2.指派式的點選事件的參數

1.參數為event

<body>
<div id="box" onclick="test(event)">
</div>
</body>
<script>
   var a  =document.getElementById('box')
    a.onclick = function(event){
    console.log(event)
    console.log(this)
    }
</script>

這時候函數裡的this指向的是節點，event還是事件對象。

六、innerText、innerHTML和value

都表示一個标簽裡内容

innerText不會識别htm标簽

innerHTML會識别html标簽

這兩個屬性是div元素裡的

控件的内容擷取是value

七、修改元素的樣式style

修改元素的寬高，需要先點style

css裡的font-size中的-要把s改成大寫S

采用的是駝峰命名發，遇到-都要改大寫

這樣寫是行内樣式

八、設定自定義屬性

H5規定自定義屬性要以data-開頭

九、擷取自定義屬性

<div data-index= '1'>
var box = document.getElementsByTagName('div')
var val= box.getAttribute('data-index')//1
//H5新增
var v = box.dataset.index//1,dataset是一個集合，裡面存放了自定義屬性的對象。可通過點方式擷取。但是屬性必須以data-開頭，data-list-index這樣的形式是box.dataset.listIndex,要改成大寫，而box.getAttribute('data-list-index')不用改，一個是字元串，一個是屬性。

自定義屬性用getAttribute不要用點方式

十、document.write()、innerHTML和document.createElement()

寫了之後會頁面重繪，隻保留write裡的内容，所有标簽都沒有了。盡量不用

innerHTML建立元素節點效率高。

document.createElement()結構清晰。

十一、事件對象

div.onclick = function(e){
  //e就是事件對象，并不是元素對象，this才是元素對象
}

事件對象隻有有了事件才會存在，是系統幫我們建立的，

ie678中是window.event才能擷取事件對象

e.target 是觸發事件的對象，但不等于this，this是綁定事件的對象，而e.target 是觸發事件的對象，ul綁定事件，點選li，this是ul,而e.target 是li

e.currentTarget跟this差不多

e.srcElement 傳回的是觸發事件的對象，是非标準的，ie6-8使用

e.type 傳回事件的類型，比如click,mouseouver不帶on

e.cancekBubble 阻止冒泡，ie6-8使用，trur就是停止冒泡

e.returnValue 阻止事件的預設行為，ie678使用，比如阻止a連結的跳轉

e.preventDefault 阻止預設事件，标準，add方式注冊的不能用return false來阻止，on方式三種都可以

e.stopPropagation() 阻止冒泡。标準

1.滑鼠事件對象

e.clientX 是滑鼠點選可視視窗的X位置

e.clientY 是滑鼠點選可視視窗的Y位置

e.pageX 是滑鼠點選文檔的X位置。

e.pageY 是滑鼠點選文檔的Y位置。

e.screenX 是滑鼠相對于電腦螢幕的X位置

e.screenY 是滑鼠相對于電腦螢幕的Y位置.

2.鍵盤事件對象

onkeyup 按鍵松開觸發

onkeydown 按鍵按下觸發

onkeypress 按鍵按下觸發，但它不識别功能鍵，ctrl和shift和箭頭

e.keyCode 鍵盤的ASCII值,onkeyup和onkeydown 是不區分字母大小寫，onkeypress 是區分大小寫的。

十二、事件委托

給父節點添加點選事件，利用事件對象來擷取目前點選的li，因為點選li,事件會冒泡到ul上，ul有注冊事件，就會觸發事件監聽器。

var ul = document.querySelector(‘ul’)

ul.addEventListener('click,function(e){

e.target//是目前點選的那個元素，

}’)

提高性能。

十三、案例

1.禁用滑鼠右鍵

document.addEventListener('contextmenu',function(e){
        e.preventDefault()
        //或者直接在邏輯最後寫return false，也能禁止
})
//給文檔綁定滑鼠右鍵事件，點選時不能觸發右鍵菜單，右鍵菜單是預設事件。

2.禁止滑鼠選中文字

document.addEventListener('selectstart',function(e){
        e.preventDefault()
})
//禁用選中文字事件。

3.取消a連結的預設跳轉行為

href = "javascript:;"
//或者在綁定的函數最後加上
return false

十四、H5網頁特效

1.擷取元素偏移量offset

1.擷取元素距離帶有定位父元素的位置

2.獲得元素自身的大小

3.傳回值不帶參數

1.ele.offsetParent

擷取該元素帶有定位的父級元素，如果沒有，就傳回body

2.ele.offsetTop

擷取元素相對帶有定位父元素上方的偏移，父親沒有定位屬性，就以body為基準。沒有右下偏移量

3.ele.offsetLeft

擷取元素相對帶有定位父元素左邊框的偏移

4.ele.offsetWidth

擷取自身包括padding、邊框、内容區的寬度，傳回值不帶機關

5.ele.offsetHeighr

擷取自身包括padding、邊框、内容區的高度，傳回值不帶機關

6.offset和style的差別

offset

1.offset可以擷取任意樣式表中的值

2.offset擷取的值沒有機關

3.offset獲得的寬高包含padding+border+width

4.offset是隻讀屬性，隻能擷取不能指派

5.想要擷取元素大小位置，用offset合适。

style

1.style隻能得到行内樣式表中的樣式值。

2.style.width獲得的是帶有機關的字元串

3.style.width獲得不包含padding和border的值

4.style.width是可讀寫屬性，可以擷取也可以指派。

5.是以想改變元素的樣式，需要style值

7.案例

主要用來設定盒子跟随滑鼠移動。配合定位。

2.擷取元素可視區client

1.ele.clientTop

擷取元素上邊框的大小

widndow.pageYoffset

是頁面被卷起的上部

2.ele.clientLeft

傳回元素左邊框的大小

3.ele.clientWidth

傳回自身包括padding，内容區的寬度，不帶邊框，傳回值不帶機關

4.ele.clientHeigth

傳回自身包括padding，内容區的高度，不帶邊框，傳回值不帶機關

3.擷取元素滾動距離scroll

1.ele.scrollTop

擷取被卷去的上側距離，傳回值不帶機關，就是元素下滑，被浏覽器遮住的部分。

2.ele.scrollLeft

擷取被卷去的左側距離，傳回值不帶機關

3.ele.scrollWidth

傳回元素自身的實際寬度，不含邊框，反回值不帶機關

4.ele.scrollHeight

傳回元素自身的實際高度，不含邊框，反回值不帶機關

5.scroll事件

滾動條滾動時，就會觸發的事件

目錄

一、什麼是DOM

二、DOM節點

1.DOM節點的分類

2.擷取元素節點

3.擷取屬性節點

4.擷取文本節點

5.操作元素節點

6.操作文本節點

三、事件

1.事件的類型

四、事件的捕獲和冒泡

五、事件的參數

1.行内樣式的參數

2.指派式的點選事件的參數

六、innerText、innerHTML和value

七、修改元素的樣式style

九、擷取自定義屬性

十、document.write()、innerHTML和document.createElement()

十一、事件對象

十二、事件委托

十三、案例

1.禁用滑鼠右鍵

2.禁止滑鼠選中文字

3.取消a連結的預設跳轉行為

十四、H5網頁特效

1.擷取元素偏移量offset

2.擷取元素可視區client

3.擷取元素滾動距離scroll

繼續閱讀