JS原生DOM操作

WEB前端 222 2018-10-24 16:54

将原生 DOM 操作按照类别分为以下五组:

document 对象的方法:

  1. 查找
    Element getElementById(string id)
    Array<Element> getElementsByClassName(string className)
    Array<Element> getElementsByTagName(string tagName)
    Array<Node> getElementsByName(string name)
    Node querySelector(string selector)
    Array<Node> querySelectorAll(string selector)
    Array<Element> forms()
  2. 创建
    Element createElement(string tagName)
    Node createTextNode(string text)
    Node cloneNode(bool isCopyChilds)
    Array<Element> createDocumentFragment()

node 对象的方法:
对于添加、删除方法不管是新增还是替换节点,如果其原本就在页面上,那么原来位置的节点将被移除

  1. 添加
    parentNode.appendChild(childNode)
    parentNode.insertBefore(newNode, refNode)

  2. 删除
    parentNode.removeChild(childNode)
    parentNode.replaceChild(newNode, oldNode)

  3. 关系
    Node node.parentNode()
    Element node.parentElement()
    Array<Element> node.children()
    Array<Node> node.childNodes()
    Node node.firstChild()
    Node node.lastChild()
    Element node.firstElementChild()
    Element node.lastElementChild()
    Node node.previousSibling()
    Node node.nextSibling()
    Element node.previousElementSibling()
    Element node.nextElementSibling()

文章评论