JS原生DOM操作

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

document 对象的方法:

  1. 查找
    Element getElementById(string id)
    Array getElementsByClassName(string className)
    Array getElementsByTagName(string tagName)
    Array getElementsByName(string name)
    Node querySelector(string selector)
    Array querySelectorAll(string selector)
    Array forms()
  2. 创建
    Element createElement(string tagName)
    Node createTextNode(string text)
    Node cloneNode(bool isCopyChilds)
    Array 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 node.children()
    Array 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()

你可能感兴趣的:(JS原生DOM操作)