什么是DOM

• DOM（Document Object Model）是文檔對(duì)象模型。
• JS 通過 Window.document 對(duì)象來操作網(wǎng)頁(yè)中的元素。

獲取元素

window.id 或者直接 id，這種方法比較少用。

// 以下幾種獲取元素的方法一般在 IE 瀏覽器中使用
document.getElementById('id') // 獲取 id 對(duì)應(yīng)的標(biāo)簽
document.getElementsByTagName('tagName')  // 獲取給定標(biāo)簽名稱的元素集合
document.getElementsByTagName('tagName')[index]  // 獲取給定標(biāo)簽名稱的元素集合中對(duì)應(yīng)索引的元素
document.getElementsByClassName('className')  // 獲取給定類名的元素集合
document.getElementsByClassName('className')[index]  // 獲取給定類名的元素集合中對(duì)應(yīng)索引的元素

// 以下幾種獲得元素的方法通過用在除了 IE 瀏覽器的其他瀏覽器

 // 獲取第一個(gè)對(duì)應(yīng)的 id ，類名，標(biāo)簽名對(duì)應(yīng)的元素
document.querySelector('#id' | '.className' | 'tagName') 

 // 獲取對(duì)應(yīng)的 id ，類名，標(biāo)簽名 對(duì)應(yīng)的元素集合
document.querySelectorAll('#id' | '.className' | 'tagName') 

 // 獲取對(duì)應(yīng)的 id ，類名，標(biāo)簽名對(duì)應(yīng)的元素集合中對(duì)應(yīng)索引的元素
document.querySelectorAll('#id' | '.className' | 'tagName') [index]

document.documentElement 獲取 html 元素
document.body 獲取 html 中的 body 節(jié)點(diǎn)
document.head 獲取 html 中的 head 節(jié)點(diǎn)
document.all 獲取頁(yè)面中的所有元素的集合，document.all 為 falsy 值，只有在 IE 瀏覽器中為 true，用來判斷瀏覽器是否是 IE 瀏覽器。

節(jié)點(diǎn)的增刪改查

節(jié)點(diǎn)包括元素和文本，元素就標(biāo)簽。

增加節(jié)點(diǎn)

// 創(chuàng)建一個(gè)標(biāo)簽節(jié)點(diǎn)
let div1 = document.createElement('div')

// 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
let text1 = document.createTextNode('你好，JS')

// 向節(jié)點(diǎn)中插入文本
div1.appendChild(text1)

div1.innerText = '你好，JS'（ IE ）或者 div1.textContent = '你好'
// 但不能使用 div1.appendChild('你好，JS')

// 將節(jié)點(diǎn)插入頁(yè)面中，才能顯示，因?yàn)榇藭r(shí)的節(jié)點(diǎn)在 JS 線程中
document.body.appendChild(div1)

刪除節(jié)點(diǎn)

舊方法
parentNode.removeChild(childNode)
新方法
childNode.remove() 此時(shí)元素只是從頁(yè)面中刪除，節(jié)點(diǎn)仍在 JS 線程中，可以通過 parendNode.apendChild(childNode) 重新將節(jié)點(diǎn)添加到頁(yè)面中。
如果要徹底刪除 childNode 節(jié)點(diǎn)，需要執(zhí)行 childNode = null。

改屬性

寫標(biāo)準(zhǔn)屬性

• 改 class: div.className = 'red blue' 全覆蓋
• 改 class: div.classList.add('red') 添加
• 改 style: div.style = 'width: 100px; color : blue;'
• 改 style 的一部分: div.style.width = 200px
• 大小寫: div.style.backgroundColor = 'white'
• 改 data-x 屬性: div.dataset.x = 'frank

讀標(biāo)準(zhǔn)屬性

• div.classList | a.href
• div.getAttribute('class') | a.getAttribute('href')
• 兩種方法都可以，只是值可能稍微有些不同。

設(shè)置屬性
div.setAttribute(name, value)

改事件處理函數(shù)
div.onclick = function
div.onclick 默認(rèn)為 null，點(diǎn)擊后什么都不會(huì)發(fā)生。

改標(biāo)簽內(nèi)容
div.innerText = 'xxx'
div.textContent = 'xxx'

改 HTML 內(nèi)容

div.innerHTML = `<p> </p>` 

改標(biāo)簽

div.innerHTML = '' // 先清空
div.appendChild(div2) // 再添加

改父節(jié)點(diǎn)
newParent.appendChild(div)

查詢節(jié)點(diǎn)

div  // 查自己
div.parentElement || div.parentNode  // 查父代
div.parentNode.parentNode  // 查祖代
div.childNodes || div.children  // 查子代
div.childNodes[index].childNodes  // 查孫代

通過 div.children 查詢節(jié)點(diǎn)，它的 length 會(huì)實(shí)時(shí)更新。
通過 document.querySelctorAll 查詢節(jié)點(diǎn)，它的 length 不會(huì)實(shí)時(shí)更新。

div.parentNode.children 排除自己 查兄弟

let siblings = []
let c1 = div1.parentElement.children
for (let i = 0 ; i < c1.length ; i++) {
    if (c1[i] !== div1) {
      siblings.push(c1[i])
    }
}

div.firstChild  // 查第一個(gè)子節(jié)點(diǎn)
div.lastChild  // 查最后一個(gè)子節(jié)點(diǎn)
div.previousSibling // 查前一個(gè)節(jié)點(diǎn)
div.nextSibling // 查后一個(gè)節(jié)點(diǎn)

div.firstChild 包括 text 元素， div.firstElementChild 不包括 text 元素

遍歷節(jié)點(diǎn)的所有元素

let travel = (node, fn) => {
    fn (node)
    if (node.children) {
        for (let i = 0; i < node.children.length ; i++) {
            travel (node.children[i], fn)
        }
    }
}

travel(div, (node) => console.log(node))

資料來源：饑人谷