JS中DOM重點基礎(chǔ)知識實驗（全）

天使之翼 ` 2019-07-01

展開全文

文檔：一個頁面就是一個文檔,。

元素：頁面中所有的標簽都是元素，也可以叫對象,。

節(jié)點：頁面中所有的內(nèi)容都是節(jié)點，標簽,，屬性,，文本。

在JS中操作dom,，設(shè)置css樣式時,，樣式的名稱如background-color，在js中一律用駝峰寫法,，backgroundColor

通過JS設(shè)置元素行內(nèi)樣式,，操作style屬性即可

通過JS設(shè)置元素的類樣式，不用class關(guān)鍵字,，應(yīng)使用className

a 標簽點擊事件有默認的跳轉(zhuǎn),，想要阻止默認的跳轉(zhuǎn)，在點擊事件函數(shù)的最后return false,；

若點擊事件函數(shù)中有多條語句執(zhí)行,，封裝成函數(shù)的形式，應(yīng)將函數(shù)返回,，才能阻止a的默認跳轉(zhuǎn),。

JS中的事件：onclick，onmouseover,，onmouseout,，onfocus，onblur等等,。

原生JS選擇器：

document.getElementById(),

document.getElementsByClassName(),

document.getElementsByTagName().

document.getElementsByName()

H5選擇器：

document.querySelector(),

document.querySelectorAll()

TextContent與innerText

IE8不支持：textContent

InnerText和innerHTML

InnerText設(shè)置：按純文本的方式解析內(nèi)容,，innerHTML設(shè)置：按html的方式解析內(nèi)容

InnerText獲取：不僅能獲得當前元素的內(nèi)容,，還能獲取子元素中的文本內(nèi)容,。

InnerHTML獲取：同樣能獲取到子元素,，但包含了子元素的標簽

結(jié)果：

獲取/設(shè)置/刪除自定義(自帶屬性)屬性：getAttribute()/setAttribute()/removeAttibute()

Tab的實現(xiàn),，

節(jié)點分為：標簽節(jié)點，屬性節(jié)點,，文本節(jié)點

節(jié)點的屬性：

nodeType：取值（1,，2，3）

1代表標簽,，2代表標簽的屬性,，3代表文本內(nèi)容

nodeName：標簽節(jié)點的nodeName是大寫的標簽名字,，屬性節(jié)點的nodeName是小寫的屬性名字，文本節(jié)點的nodeName是#text

nodeValue：標簽節(jié)點的的nodeValue是null,，屬性節(jié)點的nodeValue是屬性值,，文本節(jié)點的nodeValue是文本內(nèi)容

獲取標簽的父節(jié)點/父元素？

parentNode/parentElement

-------------------------------------------------------

獲取子節(jié)點/子元素

ChildNodes/children

Nodelist中有9個節(jié)點的原因在于文本是節(jié)點,，空白文本也是節(jié)點,，一般可以認為：

子節(jié)點的個數(shù) = 子元素的個數(shù) * 2 +1（9 = 4*2+1）

如何獲取屬性屬性節(jié)點？

GetAttributeNode()

對應(yīng)div中id這個屬性節(jié)點來說,，它的nodeType=2,nodeName=屬性id,，nodeValue屬性值box4，基本上用不上,。了解即可,。

從這里開始的代碼，在IE8中存在問題,以下代碼是運行再chrome瀏覽器中的效果,。

獲取第一個子節(jié)點/第一個子元素

FirstChild/firstElementChild

在IE8中（FirstChild代表著第一個子元素,，firstElementChild無法識別undefined）

--------------------------------------------------

同理，獲取最后一個子節(jié)點/最后一個子元素

LastChild/lastElementChild

在IE8中（lastChild代表著最后一個子元素,，lastElementChild無法識別undefined）

---------------------------------

獲取某個元素的前一個兄弟節(jié)點/前一個兄弟元素

PreviousSibling/previousElementSibling

在IE8中（PreviousSibling代表前一個兄弟元素,，previousElementSibling無法識別undefined）

--------------------------------------

同理，獲取某個元素的后一個兄弟節(jié)點/后一個兄弟元素

NextSibling/nextElementSibling

在IE8中（NextSibling代表著后一個兄弟元素,，nextElementSibling無法識別undefined）

封裝節(jié)點操作的兼容代碼

獲取任意元素的第一個子元素

同理獲取任意元素的最后一個子元素

創(chuàng)建元素的方式

document.write(標簽以及內(nèi)容)
元素對象.innerHTML = ‘標簽以及內(nèi)容’
Document.createElement(“標簽的名稱’);

Document.write(()在頁面加載完成時,，向body中寫入內(nèi)容，會將body,，head中的所有內(nèi)容清空后,，插入當前內(nèi)容。

當事件觸發(fā)時執(zhí)行document.write(),，意味著頁面加載完成,，當點擊按鈕時，頁面中其他內(nèi)容都會被清空,。

-------------------------------------

使用innerHTML向標簽內(nèi)添加內(nèi)容,，同樣會覆蓋當前標簽的內(nèi)容，如果反復點擊按鈕添加元素,，會導致反復的賦值,，也就是反復的覆蓋之前插入的同樣內(nèi)容的標簽

點擊按鈕前

點擊按鈕后

-------------------------------

Document.createElment()創(chuàng)建元素，通過點擊按鈕會,，反復的創(chuàng)建元素對象,，然后通過appendChild（）向后追加，插入到目標容器中。

點擊按鈕前：

點擊按鈕后：

反復點擊：

應(yīng)該避免反復點擊,，創(chuàng)建預期之外的元素,。

另外循環(huán)中不要寫匿名函數(shù)，這樣效率會很低,。

將標簽追加到目標容器中的方法

AppendChild():向后追加

InsertBefore(a,b) 把a插入到b的前面

首先是要插入到$$(‘box’)標簽對象的內(nèi)的,，但具體在位置，由后面兩個參數(shù)確定,，

Pobj是創(chuàng)建的p元素,，p元素插入到$$(‘box4’)標簽對象的第一個子元素前面。

點擊按鈕前：

點擊按鈕后：

移除當前元素中的子元素

A.RemoveChild（B）,，含義中：從A中刪除子元素B

如何控制無論按鈕點擊多少次，都只創(chuàng)建一次呢,？

有則刪除,，無則創(chuàng)建！

第一次點擊按鈕的時候,，元素創(chuàng)建并且插入了,，第二次的時候，通過id可以找到之前插入的元素,，那么就刪除,，然后再創(chuàng)建，插入,，以此類推,。著從頁面上看，無論按鈕點擊多少次,，都只會有一個元素,。

事件的綁定：當為同一個元素多次綁定同一事件，則最后一次事件綁定生效,。

結(jié)果：

那么如何讓綁定的onclick事件都生效呢,？

其實，還有其他綁定事件的方式：addEventListener()

參數(shù)1：事件名稱,，沒有on,，點擊事件就是click

參數(shù)2：回調(diào)函數(shù)

參數(shù)3：布爾類型，

結(jié)果：

通過這種方法,，為同一事件綁定,，每次綁定的事件都會觸發(fā)，不會被覆蓋,，但是兼容性存在問題,。（IE8不支持。）

為了解決IE8兼容性的問題，使用AttachEvent()

參數(shù)1：事件的類型,，如點擊事件,，onclick

參數(shù)2：回調(diào)函數(shù)（可以是命名函數(shù)）

封裝兼容性事件函數(shù)：為任意元素，綁定任意事件

-----------------------------------------------------------

在chrome下,，addEventListener兼容,，this的值是綁定事件的dom對象

-------------------------------------------------------------

在IE8下，attacheEvent兼容,，this的值是window

為元素解除事件綁定

當使用onclick 綁定事件時,，清除事件只要將onclick指向null。

--------------------------------------------------------------------------------

當使用addEventListener為元素添加多個相同事件,，應(yīng)該命名函數(shù)作為事件處理函數(shù),，便與在使用removeEventListener移除事件，方便移除具體的事件處理函數(shù),。

----------------------------------------------------------------------

同理,，IE8下添加事件和解綁事件

封裝對應(yīng)的解綁事件的函數(shù)

事件冒泡

多個元素嵌套，由層級關(guān)系,，綁定了相同的事件類型,，當內(nèi)部的元素出發(fā)事件，外面的元素也會出發(fā)事件,。

當點擊box1時：

當點擊box2時：

當點擊box3時：

如果都綁定了相同的事件,，但是它們的事件處理函數(shù)可以完全不通，不能因為觸發(fā)子元素事件的同時,，由于事件冒泡,，也觸發(fā)到外層元素的事件。你可能只想干一件事,，可是,，由于事件冒泡卻多做了幾件事，這樣反倒會畫蛇添足,。

如何阻止事件冒泡,？

Window.event.cancelBubble = true,火狐瀏覽器不支持。Window.event是ie中標準事件對象

e.stopPropagation() IE8不支持這個函數(shù),，且IE8中沒有事件處理的默認參數(shù),，在其他瀏覽器中是有e這個事件處理的默認參數(shù)的。E是火狐的標準事件對象

Box1點擊時：

Box2點擊時：

Box3點擊時：

事件有三個階段：事件捕獲階段,，事件目標階段,，事件冒泡階段

對于addEventListener()的第三個參數(shù)而言，在值是false情況下,，事件處理函數(shù)的觸發(fā)按照事件冒泡來觸發(fā),，而在值等于true的情況下,，事件處理函數(shù)的觸發(fā)按照事件捕獲階段觸發(fā)，事件捕獲與事件冒泡過程相反,。事件冒泡是從內(nèi)向外觸發(fā)事件函數(shù),，而事件捕獲是從外向內(nèi)觸發(fā)事件函數(shù)。即addEventListener()的第三個參數(shù)是控制事件階段（控制觸發(fā)函數(shù)的過程）

一般綁定事件,，默認都是設(shè)置成事件冒泡階段,，很少設(shè)置成捕獲階段。

---------------------------------------------------

Bom

瀏覽器中的頂級對象是window

頁面中的頂級對象是document

在全局環(huán)境下,，也就是js的文件中,，用var定義的變量，默認是掛在window對象上的

----------------------------------------------------------------

頁面加載事件

Window.onload :當頁面上所有的標簽,，屬性,，文本，外部引用加載完成時,，才會觸發(fā),。

在IE8中：

Window.onunload 頁面關(guān)閉后觸發(fā)事件

Window.onbeforeunload 頁面關(guān)閉前觸發(fā)函數(shù)