操作標(biāo)簽屬性

• DOM想要直接獲取或者操作標(biāo)簽中的屬性，那么該屬性必須要符合W3C規(guī)范才可以。如果想獲取或者操作自定義的標(biāo)簽屬性，那么就需要用到以下幾個(gè)方法
• 元素.getAttribute("屬性名")可以獲取標(biāo)簽中的任何屬性，包括符合規(guī)范和自定義的
• 元素.setAttribute("屬性名","屬性值")可以操作標(biāo)簽中的任何屬性，包括符合規(guī)范和自定義的
• 元素.removeAttribute("屬性名")可以刪除標(biāo)簽中的任何屬性，包括符合規(guī)范和自定義的
• 注意如果使用Attribute方法來(lái)操作標(biāo)簽，那么就相當(dāng)于在標(biāo)簽中寫(xiě)，直接寫(xiě)對(duì)應(yīng)屬性和值就行

隔行變色案例注意點(diǎn)

• 隔行變色是通過(guò)遍歷集合，偶數(shù)顯示偶數(shù)對(duì)應(yīng)的樣式，奇數(shù)顯示奇數(shù)對(duì)應(yīng)的樣式。但是這里要注意，在我們眼中，第一行是0，在頁(yè)面中第一行是1，正好是相反的。所以需要反向賦值類(lèi)名才行。

常用的節(jié)點(diǎn)屬性

• 在頁(yè)面所有的東西都是節(jié)點(diǎn)，根據(jù)標(biāo)簽嵌套關(guān)系又可以分為父節(jié)點(diǎn)，子節(jié)點(diǎn)，元素節(jié)點(diǎn)，屬性節(jié)點(diǎn)，注釋節(jié)點(diǎn)等。以下是幾個(gè)常用的節(jié)點(diǎn)方法
• 元素.parentNode獲取該元素的父節(jié)點(diǎn)，父節(jié)點(diǎn)一定是元素節(jié)點(diǎn)
• 元素.childNodes 獲取該元素下的所有子節(jié)點(diǎn)
• 元素.children 只獲取該元素下的子元素節(jié)點(diǎn)
• 元素.nextSibling 獲取該元素的下一個(gè)兄弟節(jié)點(diǎn)
• 元素.nextElementSibling 獲取該元素的下一個(gè)兄弟元素節(jié)點(diǎn)
• 元素.previousSibling 獲取該元素的上一個(gè)兄弟節(jié)點(diǎn)
• 元素.previousElementSibling 獲取該元素的上一個(gè)兄弟元素節(jié)點(diǎn)
• 元素.nodeType 獲取該節(jié)點(diǎn)的類(lèi)型
• 元素.nodeValue獲取該節(jié)點(diǎn)的值
• 元素.nodeName獲取該節(jié)點(diǎn)的名稱
• 元素.getAttributeNodes獲取該元素的屬性節(jié)點(diǎn)
• 元素.firstElementChild獲取該元素內(nèi)部的第一個(gè)元素節(jié)點(diǎn)
• 元素.appendChild(元素節(jié)點(diǎn)) 在元素內(nèi)部的最后插入?yún)?shù)節(jié)點(diǎn)
• 元素.insertBefore(元素節(jié)點(diǎn)，參照節(jié)點(diǎn))在元素內(nèi)部參照節(jié)點(diǎn)的前面插入?yún)?shù)節(jié)點(diǎn)
• 元素.lastChild 獲取元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)
• 元素.removeChild(元素節(jié)點(diǎn))在元素內(nèi)部移除參數(shù)節(jié)點(diǎn)
• 元素.cloneNode(布爾值)克隆該元素，true是克隆元素以及它內(nèi)部的所有節(jié)點(diǎn)，false是只克隆元素本身。注意：上面的插入和移除都是對(duì)元素直接進(jìn)行操作，如果操作克隆的元素，則與原本元素沒(méi)有任何關(guān)聯(lián)。
• 獲取標(biāo)簽節(jié)點(diǎn)value返回值是null
• 因?yàn)楣?jié)點(diǎn)的知識(shí)點(diǎn)，多且比較雜，這里建議去看教案詳細(xì)介紹

獲取樣式屬性

• 元素.style.樣式名 通過(guò)元素的style屬性可以獲取到對(duì)應(yīng)的樣式值，但是這個(gè)只能獲取到標(biāo)簽行內(nèi)樣式，返回的是樣式具體值字符串。同理，使用style屬性設(shè)置樣式時(shí)，也是設(shè)置為行內(nèi)樣式，也是用字符串來(lái)賦值

動(dòng)態(tài)創(chuàng)建HTML結(jié)構(gòu)

• 使用之前說(shuō)過(guò)的innerHTML方法可以給元素內(nèi)添加html結(jié)構(gòu)，但是要注意這樣賦值會(huì)覆蓋掉原有的html的結(jié)構(gòu)，要保留建議使用+=的方式
• 另外大量創(chuàng)建html結(jié)構(gòu)時(shí)，如果直接拼接非常消耗資源，所以建議使用以下兩種方法：
  • 數(shù)組join方法優(yōu)化字符串拼接，所有結(jié)構(gòu)拼接完畢后再賦值通過(guò)innerHTML來(lái)賦值。
  • 使用document.createElement("標(biāo)簽名")方法來(lái)創(chuàng)建，追加到元素節(jié)點(diǎn)內(nèi)部。這個(gè)方法一次只能創(chuàng)建一個(gè)標(biāo)簽，所以如果是內(nèi)部嵌套的標(biāo)簽結(jié)構(gòu)，需要依次創(chuàng)建，并追加到上一級(jí)標(biāo)簽內(nèi)部。直到最后結(jié)果完善了，再追擊到元素節(jié)點(diǎn)內(nèi)部。

indexOf方法

• .indexOF(匹配值)是字符串的方法，它會(huì)根據(jù)傳入的參數(shù)來(lái)匹配字符串，如果有就返回其位置，位置計(jì)數(shù)與數(shù)字相同是從0開(kāi)始，另外傳入的參數(shù)即可以是單個(gè)字符也可以組合字符，它會(huì)把它們看做一個(gè)整體來(lái)匹配
• 傳入空字符默認(rèn)匹配的位置是0，沒(méi)有匹配項(xiàng)返回-1

幾個(gè)DOM操作案例

• 代碼較長(zhǎng)這里不做記錄，必須理解透徹所有案例的邏輯思路，然后多寫(xiě)幾遍，加深印象