查询元素

getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
querySelector()
querySelectorAll()

创建元素

createElement()
createTextNode()
createDocumentFragment()

修改元素

appendChild()
insertBefore()
replaceChild()

删除元素

removeChild()

clone元素

cloneNode()

属性操作

div.id/className...
getAttribute()
createAttribute()
setAttribute()
removeAttribute()
element.attributes

其他：

innerText
innerHTML

常见使用方式

1.修改样式
可修改元素的 style 属性，修改结果直接反映到页面元素

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'
2.获取样式 getComputedStyle
使用getComputedStyle获取元素计算后的样式，不要通过 node.style.属性获取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class 操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //删除 class
nodeBox.classList.toggle('active') //新增/删除切换
node.classList.contains('active') // 判断是否拥有 class

DOM总结