[https://juejin.im/post/5d0e3e27f265da1b7f298815#heading-33](https://juejin.im/post/5d0e3e27f265da1b7f298815#heading-33)
1.常用DOM接口
// 获取DOM节点
document.getElementById() // 通过ID获取
document.getElementsByTagName() // 标签名
document.getElementsByClassName() // 类名
document.querySelector() // 通过选择器获取一个元素
document.querySelectorAll() // 通过选择器获取一组元素
document.body // 获取body的方法
document.getElementsByName(name) // 通过name属性查找元素节点
document.documentElement // 获取html的方法
// 节点类型
元素节点（标签） // 属性nodeType返回值1
属性节点（标签里的属性）// 返回值2
文本节点 // 返回值3
注释节点（comment） // 返回值8
document // 返回值9
DocumentFragment // 返回值11
// 节点接口
dom元素.parentNode // 返回当前元素的父节点
dom元素.childNodes // 子节点们
dom元素.firstChild // 第一个子节点
dom元素.lastChild // 最后一个子节点
dom元素.nextSibling // 后一个兄弟节点 previousSibling -> 前一个兄弟节点
// 元素节点接口
dom元素.parentElement // 返回当前元素的父元素节点
dom元素.children // 返回当前元素的元素子节点
dom元素.firstElementChild // 第一个元素子节点（IE不兼容）
dom元素.lastElementChild // 最后一个元素子节点（IE不兼容）
dom元素.nextElementSibling // 返回后一个兄弟元素节点
dom元素.previousElementSibling // 返回前一个兄弟元素节点
// 节点的四个属性和一个方法
节点.nodeName // 元素的标签名，以大写形式表示（只读）
节点.nodeValue // Text节点或者Comment节点的文本内容，（读写）
节点.nodeType // 该节点的类型（只读）
节点.attributes // Element节点的属性集合
节点.hasChildNodes() // 判断节点 是否有子节点
// Element节点的 属性和方法
dom元素.innerHtml
dom元素.innerText
dom元素.attributes // 获取元素身上所有属性构成的集合
dom元素.setAttribute("属性名","属性值")// 给元素设置属性和属性值
dom元素.getAttribute("属性名")// 获取属性值的方法
dom元素.removerAttribute("属性") // 删除属性
// ============== 操作接口 ==================
// 增
document.createElement() // 创建元素节点
document.createTextNode() // 创建文本节点
document.creaetComment() //创建注释节点
document.createDocumentFragment() // 创建文档碎片节点
// 插
父元素节点.appendChild(子元素对象) // 在元素节点的子元素最后插入子元素
父元素节点.insertBefore(父元素中的子元素a, 需要插入的子元素b) // 最后的结果是，父元素节点中 b元素插入到了 a的前面
// 删
元素节点.remove() // 删除DOM元素（自己）
父元素节点.removeChild(子元素节点) // 删除子元素
// 替换
父元素节点.replaceChild(新的节点, 需要被替换的子节点)
// 复制
元素节点.cloneChild() // 返回值是 复制出来的节点
// 元素节点赋值 示例
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('退出全屏')
}
})
