前端頁面分為三個部分：結(jié)構(gòu)HTML 表現(xiàn)CSS ?行為JavaScript

JS三個組成部分：

• ECMAScript核心基礎(chǔ)（JS語法、常量、變量、數(shù)據(jù)類型、運算符、函數(shù)、內(nèi)置對象）

• BOM(Browser Object Model) 瀏覽器對象模型 封裝操作瀏覽器相關(guān)的API（window.alert() ? window.prompt() ? window.setInterval() ? window.close()）

• DOM(Document Object Model)文檔對象模型 封裝的是操作文檔相關(guān)的API（document.getElementById() document.body ? document.documentElement ?document.title ?document.cookie）

DOM知識回顧：

什么是DOM?

DOM(Document Object Model)文檔對象模型 封裝的是html或xml操作文檔相關(guān)的API。

當(dāng)網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型，這個模型被構(gòu)造位對象的樹，習(xí)慣稱為 DOM Tree。

DOM包含了所有的html標(biāo)簽元素、文本字符串、html屬性、注釋等等。

利用DOM中提供的API，使程序有能力動態(tài)的訪問和更新文檔中的內(nèi)容、結(jié)構(gòu)和樣式，使頁面的交互性增強。

DOM應(yīng)用？

操作html、html屬性、css、事件等

獲取css外部樣式瀏覽器能力檢測？

?

二、節(jié)點相關(guān)屬性

DOM Tree中每一個對象都稱之為節(jié)點。如何去判斷這些節(jié)點呢？

所以DOM中提供相關(guān)的API，來獲取節(jié)點類型、節(jié)點名稱或節(jié)點值:

nodeType ? 返回節(jié)點類型，是一個數(shù)值

元素節(jié)點 - ?1

屬性節(jié)點 - 2

文本節(jié)點 - 3

注意：換行 ?空格 ?制表符都是文本節(jié)點

注釋節(jié)點 - 8

文檔節(jié)點 - 9

更多詳細(xì)節(jié)點https://www.w3school.com.cn/jsref/prop_node_nodetype.asp

nodeName ?返回節(jié)點名稱，標(biāo)簽的大寫形式（tagName）

nodeValue ? 返回節(jié)點值，不是所有的節(jié)點都會含有節(jié)點值

三、DOM層級訪問

根據(jù)節(jié)點類型，我們可以分為兩種情況進(jìn)行訪問：

一種情況是，包含所有的元素、屬性、文本、注釋等的節(jié)點樹，節(jié)點樹比較復(fù)雜，操作比較繁瑣。

一種情況是，僅僅只有元素，稱之為元素樹。元素樹更加的簡潔，查找和操作也更加便捷。

訪問層級關(guān)系介紹：

DOM層級關(guān)系類似于人類直系關(guān)系，有家譜的可以去看看。關(guān)系無非就是祖孫、父子、兄弟關(guān)系：

子節(jié)點：被嵌套進(jìn)去的下一級節(jié)點叫做子節(jié)點，子節(jié)點只有一個父節(jié)點。

父節(jié)點：子節(jié)點的上一級節(jié)點叫做父節(jié)點，父節(jié)點可以擁有任意數(shù)量的子節(jié)點。

祖先節(jié)點：里面具有嵌套節(jié)點的節(jié)點叫做祖先節(jié)點，包括父節(jié)點

后代節(jié)點：被嵌套進(jìn)去的所有層級節(jié)點都叫做后代節(jié)點，包括子節(jié)點

兄弟節(jié)點：擁有相同父節(jié)點的同級節(jié)點

根節(jié)點：一個html文檔一般只有一個根節(jié)點，根節(jié)點沒有父節(jié)點

節(jié)點樹層級訪問相關(guān)屬性：

parentNode ? 獲取當(dāng)前元素的父節(jié)點

childNodes ? ? 獲取當(dāng)前元素所有的子節(jié)點

這是一個類數(shù)組，可以通過指定索引去獲取對應(yīng)的節(jié)點

firstChild ?獲取當(dāng)前元素的第一個子節(jié)點

lastChild ? 獲取當(dāng)前元素的最后一個子節(jié)點

previousSibling ?獲取當(dāng)前元素的上一個兄弟節(jié)點

nextSibling ?獲取當(dāng)前元素的下一個兄弟節(jié)點

元素樹層級訪問相關(guān)屬性：

parentElement ? ? 獲取當(dāng)前元素的父元素

children ?獲取當(dāng)前元素的所有子元素（忽略了文本、注釋、空白節(jié)點等）

firstElementChild ?獲取當(dāng)前元素的第一個子元素

lastElementChild ?獲取當(dāng)前元素的最后一個子元素

previousElementSibling ?獲取當(dāng)前元素的上一個兄弟元素

nextElementSibling ?獲取當(dāng)前元素的下一個兄弟元素

四、獲取元素的方式

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.getElementsByName()

document.querySelector(selector) ? 通過指定的選擇器匹配符合條件的第一個元素

document.querySelectorAlll(selector) 通過指定的選擇器匹配符合條件的所有元素

五、DOM高級操作

DOM操作不但可以查找節(jié)點，還可以創(chuàng)建節(jié)點、復(fù)制節(jié)點、插入節(jié)點、刪除節(jié)點和替換節(jié)點。

5.1 創(chuàng)建節(jié)點

createElement('tagName') ?創(chuàng)建元素節(jié)點

createAttribute('attrName') ?創(chuàng)建屬性節(jié)點

createTextNode('string') 創(chuàng)建文本節(jié)點

5.2 追加節(jié)點

appendChild(childNode) ? 向指定節(jié)點結(jié)尾添加一個新的子節(jié)點

插入和替換節(jié)點

insertBefore(newnode,oldnode) ? ?在已有的子節(jié)點的前面去插入一個新的節(jié)點

replaceChild(newnode,oldnode) ? 用新的節(jié)點去替換指定的子節(jié)點

5.4 克隆和刪除節(jié)點

cloneNode(boolean) ? 克隆節(jié)點

參數(shù) boolean 布爾值。默認(rèn)false,僅克隆當(dāng)前節(jié)點。如果設(shè)置為true,克隆當(dāng)前以及后代所有的節(jié)點。

removeChild(childNode) ?在指定節(jié)點中刪除一個子節(jié)點

remove() ?移除指定節(jié)點

第一種用法：不添加任何參數(shù)，刪除當(dāng)前元素

第二種用法：添加一個索引參數(shù)，刪除下拉列表中指定索引的項