JS方法速查DOM

[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('退出全屏')
  }
})