[https://juejin.im/post/5d0e3e27f265da1b7f298815#heading-33](https://juejin.im/post/5d0e3e27f265da1b7f298815#heading-33)
1.常用DOM接口
// 獲取DOM節(jié)點
document.getElementById() // 通過ID獲取
document.getElementsByTagName() // 標簽名
document.getElementsByClassName() // 類名
document.querySelector() // 通過選擇器獲取一個元素
document.querySelectorAll() // 通過選擇器獲取一組元素
document.body // 獲取body的方法
document.getElementsByName(name) // 通過name屬性查找元素節(jié)點
document.documentElement // 獲取html的方法
// 節(jié)點類型
元素節(jié)點（標簽） // 屬性nodeType返回值1
屬性節(jié)點（標簽里的屬性）// 返回值2
文本節(jié)點 // 返回值3
注釋節(jié)點（comment） // 返回值8
document // 返回值9
DocumentFragment // 返回值11
// 節(jié)點接口
dom元素.parentNode // 返回當前元素的父節(jié)點
dom元素.childNodes // 子節(jié)點們
dom元素.firstChild // 第一個子節(jié)點
dom元素.lastChild // 最后一個子節(jié)點
dom元素.nextSibling // 后一個兄弟節(jié)點 previousSibling -> 前一個兄弟節(jié)點
// 元素節(jié)點接口
dom元素.parentElement // 返回當前元素的父元素節(jié)點
dom元素.children // 返回當前元素的元素子節(jié)點
dom元素.firstElementChild // 第一個元素子節(jié)點（IE不兼容）
dom元素.lastElementChild // 最后一個元素子節(jié)點（IE不兼容）
dom元素.nextElementSibling // 返回后一個兄弟元素節(jié)點
dom元素.previousElementSibling // 返回前一個兄弟元素節(jié)點
// 節(jié)點的四個屬性和一個方法
節(jié)點.nodeName // 元素的標簽名雕沿，以大寫形式表示（只讀）
節(jié)點.nodeValue // Text節(jié)點或者Comment節(jié)點的文本內容审轮，（讀寫）
節(jié)點.nodeType // 該節(jié)點的類型（只讀）
節(jié)點.attributes // Element節(jié)點的屬性集合
節(jié)點.hasChildNodes() // 判斷節(jié)點 是否有子節(jié)點
// Element節(jié)點的 屬性和方法
dom元素.innerHtml
dom元素.innerText
dom元素.attributes // 獲取元素身上所有屬性構成的集合
dom元素.setAttribute("屬性名","屬性值")// 給元素設置屬性和屬性值
dom元素.getAttribute("屬性名")// 獲取屬性值的方法
dom元素.removerAttribute("屬性") // 刪除屬性
// ============== 操作接口 ==================
// 增
document.createElement() // 創(chuàng)建元素節(jié)點
document.createTextNode() // 創(chuàng)建文本節(jié)點
document.creaetComment() //創(chuàng)建注釋節(jié)點
document.createDocumentFragment() // 創(chuàng)建文檔碎片節(jié)點
// 插
父元素節(jié)點.appendChild(子元素對象) // 在元素節(jié)點的子元素最后插入子元素
父元素節(jié)點.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的結果是疾渣，父元素節(jié)點中 b元素插入到了 a的前面
// 刪
元素節(jié)點.remove() // 刪除DOM元素（自己）
父元素節(jié)點.removeChild(子元素節(jié)點) // 刪除子元素
// 替換
父元素節(jié)點.replaceChild(新的節(jié)點, 需要被替換的子節(jié)點)
// 復制
元素節(jié)點.cloneChild() // 返回值是 復制出來的節(jié)點
// 元素節(jié)點賦值 示例
dom元素.style.width = ...
dom元素.style.backgroundColor = ...
dom元素.className = ...
2.判斷當前位置是否為頁面底部
function bottomVisible() {
return document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight)
}
bottomVisible() // 返回值為true/false
3.全屏
1.進入全屏
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen()
}
}
launchFullscreen(document.documentElement) // 整個頁面進入全屏
launchFullscreen(document.getElementById("id")) //某個元素進入全屏
退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
}
exitFullscreen()
全屏事件
document.addEventListener("fullscreenchange", function (e) {
if (document.fullscreenElement) {
console.log('進入全屏')
} else {
console.log('退出全屏')
}
})
