目录

  1. 获取节点
  2. 节点操作
  3. 属性操作
  4. 文本操作

获取节点

  • document
    • getElementById
      • 语法： document.getElementById(元素ID)
      • 功能： 通过元素ID获取节点
    • getElementsByName
      • 语法： document.getElementsByName(元素name属性)
      • 功能： 通过元素name属性获取节点
    • getElementsByTagName
      • 语法： document.getElementsByTagName(元素标签)
      • 功能： 通过元素标签获取节点
    • getElementsByClassName
      • 语法： document.getElementsByClassName(“classname”)
      • 功能： 根据class获取元素节点
  • CSS选择器
    • querySelector()
      • 语法： document.querySelector()
      • 功能： 根据CSS选择器的规则，返回第一个匹配到的元素
    • querySelectorAll()
      • 语法： document.querySelectorAll()
      • 功能： 根据CSS选择器的规则，返回所有匹配到的元素
  • 节点指针
    • firstChild
      • 语法： 父节点.firstChild
      • 功能： 获取元素首个节点
    • lastChild
      • 语法： 父节点.lastChild
      • 功能： 获取元素最后一个节点
    • childNodes
      • 语法： 父节点.childNodes
      • 功能： 获取元素子节点列表
    • previousSibling
      • 语法： 兄弟节点.previousSibling
      • 功能： 获取已知节点前一个节点
    • nextSibling
      • 语法： 兄弟节点.nextSibling
      • 功能： 获取已知节点后一个节点
    • parentNode
      • 语法： 子节点.parentNode
      • 功能： 获取已知节点的父节点

节点操作

  • 创建节点
    • createElement
      • 语法： document.createElement(元素标签)
      • 功能： 创造元素节点
    • createAttribute
      • 语法： document.createAttribute(元素属性)
      • 功能： 创建属性节点
    • createTextNode
      • 语法： document.createTextNode(文本内容)
      • 功能： 创建文本节点
  • 插入节点
    • appendChild
      • 语法： appendChild(所添加的新节点)
      • 功能： 向节点的子节点列表的末尾添加新的子节点
    • insertBefore
      • 语法： insertBefore(所要添加的新节点, 已知子节点)
      • 功能： 向已知的子节点前插入一个新的子节点
  • 替换节点
    • replaceChild
      • 语法： replaceChild(要插入的新元素， 将被替换的老元素)
      • 功能： 将子节点替换成另一个
  • 复制节点
    • cloneNode
      • 语法： 需要被复制的节点.cloneNode(true/false)
      • 功能： 创建指定节点的副本
      • 参数：
        • true 复制当前节点以及其他所有子节点
        • false 仅复制当前节点
  • 删除节点
    • removeChild
      • 语法： removeChild(要删除的节点)
      • 功能： 删除指定的节点

属性操作

  • 获取属性
    • getAttribute
      • 语法： 元素节点.getAttribute(元素属性名)
      • 功能： 获取元素节点中指定属性的属性值
  • 设置属性
    • setAttribute
      • 语法： 元素节点.setAttribute(属性名， 属性值)
      • 功能： 创建或者改变元素的属性
  • 删除属性
    • removeAttribute
      • 语法： 元素节点.removeAttribute(属性名)
      • 功能： 删除元素中的指定属性

文本操作

  • 文本操作
    • insterData(offset, string)
      • 从offset指定的位置插入string
    • appendData(string)
      • 将string插入到文本节点的末尾处
    • deleteData(offset, count)
      • 从offset起删除count个字符
    • replaceData(off, count, string)
      • 从off将count个字符用string
    • splitData(offset)
      • 从offset起将文本节点分成两个节点
    • substring(offset, count)
      • 返回由offset起的count个节点