DOM 編程

前言

DOM(Docoment Object Model) 即文檔對象模型。也就是 JS 經過 Document 來操做網頁。本文將涉及 DOM 操做的基礎知識(增刪改查)。從 DOM 的基礎操做了解 DOM 究竟有多難用。後面咱們將會來封裝一個 DOM 的庫。今後不害怕難搞的 DOM 。

獲取元素

有許多API

window.xxx  或者直接xxx   //元素有 id
document.getElementById('xxx') // 經過 id 獲取元素
document.getElementsByTagName('div')[0] // 經過標籤名獲取元素，需注意的是因爲獲取的是尾數組，因此要加上下標
document.getElementsByClassName('red')[0] //經過 class 屬性名獲取元素，也須要加下標
document.querySelector('xxx') // 推薦用法。兼容以上全部 api 的功能。
document.querySelectorAll('.red')[0] // 推薦用法。獲取是該條件下全部的元素。因此要獲得具體的元素需加下標。
複製代碼

用哪個

• 工做中用 querySelector 和 querySelectorAll。
• 作 demo 時方便選取直接 id xxx。
• 若是要兼容 IE 的話，才用 getElement(s)ByXXX

獲取特定元素

獲取 html 元素

document.documentElement

獲取 head 元素

document.head

獲取 body 元素

document.body

獲取窗口 (窗口不是元素)

window

獲取全部元素

document.all

document.all 這個 API 是第 7 個 falsy 值。

document.all ? console.log(1) : console.log(2)
// 2
複製代碼

別問，問就是 IE 的鍋。有興趣者本身百度。 還有其他6個 falsy 值分別是 false 、"", '', `` 、null 、 undefined 、NaN 、 0

節點的增刪改查

增

建立一個標籤節點

let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')
複製代碼

建立一個文本節點

text1 = document.createTextNode('你好')
複製代碼

標籤裏面插入文本

div1.appendChild(text1)
div1.innerText = '你好' 或者 div1.textContent = '你好'
可是不能使用 div1.appendChild('你好')
複製代碼

插入頁面中

• 建立的標籤默認處於 JS 線程中
• 必須把它插到 head 或者 body 裏面，纔會生效
• document.body.appendChild(div)
• 或者
• 已在頁面中的元素.appendChild(div)

刪

兩種方法

舊方法: parentNode.removeChild(childNode)
新方法: childNode.remove()
複製代碼

改屬性

寫標準屬性

改 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-*屬性: div.dataset.x = 'wuxuwei'
複製代碼

讀標準屬性

div.classList / a.href
div.getAttribute('class') / a.getAttribute('href')
複製代碼

改事件處理函數

div.onclick 默認爲null

• 默認點擊 div 不會有任何事情發生
• 可是若是你把 div.onclick 改成一個函數 fn
• 那麼點擊 div 的時候,瀏覽器就會調用這個函數
• 而且是這樣調用的 fn.call(div,event)
• div 會被看成 this
• event 則包含了點擊事件的全部信息，如座標

改內容

改文本內容

div.innerText = 'xxx'
div.textContent = 'xxx'
幾乎沒有區別
複製代碼

改 HTML 內容

div.innerHTML = '<strong>重要內容</strong>'

改標籤

div.innerHTML = '' // 先清空
div.appendChild(div2) // 再加內容
複製代碼

改爸爸

newParent.appendChild(div)

查

查爸爸

node.parentNode / node.parentElement

查爺爺

node.parentNode.parentNode

查子代

node.childNodes / node.children

查兄弟姐妹

node.parentNode.childNodes 還要排除本身 node.parentNode.children 還要排除本身

查老大

node.firstChild

查老幺

node.lastChild

查看上一個哥哥/姐姐

node. previousSibling

查看下一個哥哥/姐姐

node.nextSibling

遍歷一個 div 裏面的全部元素

travel = (node, fn) => {
    fn(node)
    if(node.children) {
        for(let i = 0;i < node.children.length; i++) {
            travel(node.children[i],fn)
        }
    }
}
travel(div1,(node)=> console.log(node))
複製代碼