雖然vue/react幫我們實現(xiàn)了操作數(shù)據(jù)映射到dom操作, 但是還是有很多不得不用DOM API的場景, 下面我就給大家列出一些UI庫中經(jīng)常出現(xiàn)的DOM API(寫業(yè)務代碼也可事半功倍).
創(chuàng)新互聯(lián)建站成立與2013年，先為青銅峽等服務建站，青銅峽等地企業(yè)，進行企業(yè)商務咨詢服務。為青銅峽企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
MutationObserver
監(jiān)視dom元素的變化觸發(fā)回調(diào), 可監(jiān)視的變化有:屬性(attribute) / 文本(characterData), 同時支持監(jiān)視子孫節(jié)點(childList/subtree),
簡單舉例
重慶分公司
重慶分公司
//?注冊監(jiān)視器,?一旦發(fā)生變化會alertlet?observer?=?new?MutationObserver(()=>{
?alert('change')
});//?開始監(jiān)視observer.observe(el,?{?childList:?true,?subtree:?true?});//?停止監(jiān)視,?釋放資源observer.disconnect()
復制代碼常用在哪里?
一般用在滾動加載, 用來監(jiān)視元素是否已經(jīng)加入父元素, 加入成功后觸發(fā)回調(diào), 比如餓了么UI就用來注冊滾動加載成功后的回調(diào):
github.com/ElemeFE/ele…
之前自己寫過scroll插件, 用他來監(jiān)視容器內(nèi)元素的增加變化
github.com/any86/any-s…
更多說明, 還請參考MDN - MutationObserver
兼容性
node.contains(otherNode)
返回的是一個布爾值，來表示傳入的節(jié)點(otherNode)是否為該節(jié)點(node)的子孫節(jié)點.
簡單舉例
//?判斷元素是否body元素且是否是body的子孫元素.
function?isInPage(node)?{
?return?(node?===?document.body)???false?:?document.body.contains(node);
}
復制代碼常用在哪里?
一般用在彈出菜單的關(guān)閉, 通過contains判斷點擊元素是否是菜單本身或在菜單內(nèi), 如果不在其內(nèi)那么表示要關(guān)閉菜單, 比如餓了么UI的popover組件:
github.com/ElemeFE/ele…
兼容性
注意(node.compareDocumentPosition)
開始看caniuse我以為兼容contains不兼容移動端, 后來有掘友指正我說caniuse上只是標記的unknown不是不支持, 所以我還得測試下, 如有同學了解他的兼容性, 還請下方留言告知, 不勝感激.
在我寫本文的時候發(fā)現(xiàn)了這個compareDocumentPosition, 他的兼容性就比contains好很多, 但是由于我還沒有實踐, 稍后我測試后, 會更新到本文.
element.getBoundingClientRect():rect
獲取元素相對瀏覽器左上角的偏移量以及元素尺寸信息,?返回值是一個rect對象, 其中包括: left:?元素左上角距離瀏覽器左上角的X軸偏移. top:?元素左上角距離瀏覽器左上角的Y軸偏移. width: 元素寬度. height: 元素高度. right:?元素右下角距離瀏覽器左上角的X軸偏移. bottom:?元素右下角距離瀏覽器左上角的Y軸偏移. x: 同left. y: 同top.
常用在哪里?
一般用來實現(xiàn)"圖片懶加載", 比如vue-lazyload用他來監(jiān)測當前圖片是否在可視區(qū):
github.com/hilongjw/vu…
兼容性
注意
getBoundingClientRect會受到transform的影響, 比如你的元素設(shè)置了transform:scale(2), 那么getBoundingClientRect返回的width會是元素實際寬度的2倍, top等位置信息也會因為元素尺寸變化而發(fā)生變化.
insertAdjacentElement
可以通過不同的參數(shù)實現(xiàn)jQuery的append | prepend | after | before.
簡單實現(xiàn)
下面我舉例對比說明, 先看下dom結(jié)構(gòu):
實現(xiàn)append(beforeend), 插入到指定元素內(nèi)部的尾部
let?parent?=?document.getElementById('parent');
let?node?=?document.createElement('span');
//?等價于?$(parent).append(node);
parent.insertAdjacentElement('beforeend',?node);
復制代碼實現(xiàn)prepend(afterbegin), 插入到指定元素內(nèi)部的頭部
let?parent?=?document.getElementById('parent');
let?node?=?document.createElement('span');
//?等價于?$(parent).prepend(node);
parent.insertAdjacentElement('afterbegin',?node);
復制代碼實現(xiàn)after(afterend), 插入到指定元素后面
let?parent?=?document.getElementById('parent');
let?node?=?document.createElement('span');
//?等價于?$(parent).after(node);
parent.insertAdjacentElement('afterend',?node);
復制代碼實現(xiàn)before(beforebegin), 插入到指定元素前面
let?parent?=?document.getElementById('parent');
let?node?=?document.createElement('span');
//?等價于?$(parent).after(node);
parent.insertAdjacentElement('beforebegin',?node);
復制代碼常用在哪里?
比如對話框組件為了不受到父元素overflow:hidden的影響而被遮擋, 都會把組件移動到body的尾部, 我之前為了解決這個問題, 寫過一個vue的插件, 可以把任意組件移動到body的任意位置:
github.com/any86/vue-c…
兼容性
