??認(rèn)識(shí) DOM

? ? ? ? ? ? ? ? => Document Object Model 文檔對(duì)象模型

? ? ? ? ? ? ? ? => 就是js給我們提供的用來(lái)操作頁(yè)面的一套屬性和方法

? ? ? ? ? ? ? ? => DOM樹(shù)

? ? ? ? ? ? ? ? ? ? -> 是一個(gè)抽象的概念

? ? ? ? ? ? ? ? ? ? -> 都我們的頁(yè)面上的標(biāo)簽的一個(gè)抽象畫(huà)

? ? ? ? ? ? ? ? ? ? -> 抽象成一顆樹(shù)

? ? ? ? ? ? ? ? ? ? -> 最大的標(biāo)簽 : html

? ? ? ? ? ? 獲取到我們要操作的元素

? ? ? ? ? ? ? ? => 首先要獲取到

? ? ? ? ? ? ? ? => 之后在進(jìn)行操作

? ? ? ? ? ? 操作DOM

?DOM節(jié)點(diǎn)

? ? ? ? ? ? ? ? => 節(jié)點(diǎn):就是組成頁(yè)面的每一個(gè)部分(html 文本 屬性 ....注釋)

? ? ? ? ? ? ? ? => 節(jié)點(diǎn)的分類

? ? ? ? ? ? ? ? ? ? -> 元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? ? ? ? ? + 就是頁(yè)面上的每一個(gè)標(biāo)簽

? ? ? ? ? ? ? ? ? ? -> 文本節(jié)點(diǎn)(空格和換行)

? ? ? ? ? ? ? ? ? ? ? ? + 頁(yè)面上的每一段文本

? ? ? ? ? ? ? ? ? ? ? ? + 注意: 空格和換行屬于文本節(jié)點(diǎn)

? ? ? ? ? ? ? ? ? ? -> 注釋節(jié)點(diǎn)(空格和換行)

? ? ? ? ? ? ? ? ? ? ? ? + 頁(yè)面上的每一段注釋

? ? ? ? ? ? ? ? ? ? ? ? + 注意: 空格和換行屬于注釋節(jié)點(diǎn)

? ? ? ? ? ? ? ? ? ? -> 屬性節(jié)點(diǎn)

? ? ? ? ? ? ? ? ? ? ? ? + 頁(yè)面中的每一個(gè)屬性

? ? ? ? ? ? ? ? ? ? ? ? + 注意:

? ? ? ? ? ? ? ? ? ? ? ? ? ? - 屬性節(jié)點(diǎn)不會(huì)獨(dú)立出現(xiàn)

? ? ? ? ? ? ? ? ? ? ? ? ? ? - 就是用來(lái)描述標(biāo)簽的

? ? ? ? ? ? ? ? ? ? ? ? ? ? - 不會(huì)和任意節(jié)點(diǎn)產(chǎn)生父子級(jí)關(guān)系

? ? ? ? ? ? ? ? => 根節(jié)點(diǎn): document

? ? ? ? ? ? ? ? => 根元素節(jié)點(diǎn): html

獲取節(jié)點(diǎn)

? ? ? ? ? ? ? ? => 非常規(guī)標(biāo)簽

? ? ? ? ? ? ? ? ? ? -> html: document.documentElement

? ? ? ? ? ? ? ? ? ? -> head: document.head

? ? ? ? ? ? ? ? ? ? -> body: document.body

? ? ? ? ? ? ? ? => 常規(guī)標(biāo)簽

? ? ? ? ? ? ? ? ? ? -> id: document.getElementById()

? ? ? ? ? ? ? ? ? ? -> className: document.getElementsByClassName()

? ? ? ? ? ? ? ? ? ? -> 標(biāo)簽名: document.getElementsByTagName()

? ? ? ? ? ? ? ? ? ? -> name屬性: document.getElementsByName()

? ? ? ? ? ? ? ? ? ? -> 選擇器: document.querySelector()

? ? ? ? ? ? ? ? ? ? -> 選擇器: document.querySelectorAll()

? ? ? ? ? ? 節(jié)點(diǎn)的獲取

? ? ? ? ? ? ? ? => 我們獲取到的包含但是不限于元素節(jié)點(diǎn)

? ? ? ? ? ? 常用的方法

? ? ? ? ? ? ? ? => childNodes

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.childNodes

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 是一個(gè)偽數(shù)組

? ? ? ? ? ? ? ? ? ? ? ? + 里面包含所有的 子節(jié)點(diǎn)

? ? ? ? ? ? ? ? => children

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.children

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 依舊是一個(gè)偽數(shù)組

? ? ? ? ? ? ? ? ? ? ? ? + 里面包含的是所有的 子元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => firstChild

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.firstChild

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 第一個(gè)子節(jié)點(diǎn)

? ? ? ? ? ? ? ? => firstElementChild

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.firstElementChild

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 第一個(gè)子元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => lastChild

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.lastChild

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 最后一個(gè)子節(jié)點(diǎn)

? ? ? ? ? ? ? ? => lastElementChild

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.lastElementChild

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 最后一個(gè)子元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => previousSibling

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.previousSibling

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 上一個(gè)兄弟節(jié)點(diǎn)

? ? ? ? ? ? ? ? => previousElementSibling

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.previousElementSibling

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 上一個(gè)兄弟元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => nextSibling

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.nextSibling

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 下一個(gè)兄弟節(jié)點(diǎn)

? ? ? ? ? ? ? ? => nextElementSibling

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.nextElementSibling

? ? ? ? ? ? ? ? ? ? -> 返回值:

? ? ? ? ? ? ? ? ? ? ? ? + 下一個(gè)兄弟元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => parentNode

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.parentNode

? ? ? ? ? ? ? ? ? ? -> 返回值: 父節(jié)點(diǎn)

? ? ? ? ? ? ? ? => parentElement

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.parentElement

? ? ? ? ? ? ? ? ? ? -> 返回值: 父元素節(jié)點(diǎn)

? ? ? ? ? ? ? ? => attributes

? ? ? ? ? ? ? ? ? ? -> 語(yǔ)法: 元素.attributes

? ? ? ? ? ? ? ? ? ? -> 返回值: 標(biāo)簽上的所有的屬性