# 常用的DOM操作方法

原生JS中常用的DOM操作方法

# 创建节点(由document)

  • document.createElement(tagname)
    • 创建一个由tagName决定的HTML元素
  • document.createTextNode(data)
    • 创建一个由data决定的文本节点
  • document.createDocumentFragment()
    • 创建一个空白的文档片段

# 操作节点

  • Node.appendChild()
    • 加入到指定节点的子节点列表末尾
  • Node.insertBefore(newElement, referenceElement)
    • 加入到指定节点的子节点(referenceElement作为参考节点)的前面;若referenceElement为空,则最后(和appendChild一样)
  • Node.removeChild()
    • 将某个节点,从指定节点的子节点列表中移除
  • Node.replaceChild(newElement, oldElement)
    • 用指定节点(newElement),替换掉当前节点的一个旧子节点(oldElement)
    • newElement在替换后,他原来的位置会从DOM中删除

# 选择节点

  • document.querySelector()
  • document.querySelectorAll()
  • document.getElementById()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.getElementsByName()

# 操作属性

  • element.setAttribute()
  • element.getAttribute()
  • element.removeAttribute()
  • element.hasAttribute()

# DOM事件

  • element.addEventListener()
  • element.removeEventListener()
  • element.createEvent()
  • element.dispatchEvent()

# 通过节点关系获取节点

  • parentNode
  • childNodes
  • children
  • nextSibling
  • previousSibling
  • firstChild
  • lastChild

注意:

  • NodeList不是array,它只是只读的,反映的是文档节点的实时结构
  • parentNodeparentElement区别:前者是W3C标准,且nodeelement的超集
    • Node(节点)的类型有很多:元素(Element)、属性(Attr)、文本(Text)……

# JS交换两个节点的方法

<div id="a"></div>
<div id="b"></div>
1
2
 var obj = document.createElement('a')
 var div1 = document.getElementById('a')
 var div2 = document.getElementById('b')

 div2.parentNode.appendChild(obj)
 div2.parentNode.replaceChild(div1, obj) // (newElement, oldElement),newElement在替换后会从原位置中被删除
1
2
3
4
5
6
更新时间: 3/22/2020, 12:44:30 PM