以下是JS中DOM节点中增删改查的基本API：
查
document.getElementById(id) // 参数：id 属性； 返回：匹配id属性的元素节点
document.getElementsByTagName(name) // 参数：name 标签； 返回：所有指定HTML标签的元素节点
document.getElementsByClassName(name) // 参数：class 属性； 返回：所有包含class名字指定条件的元素节点
document.getElementsByName(name) // 参数：name 属性； 返回：所有拥有name属性的HTML元素，这里参数指name属性的值
document.querySelectorAll('') // 参数：css选择器； 返回：所有匹配的元素节点
document.querySelector('') // 参数：css选择器； 返回：第一个匹配的元素节点
增
document.createElement(tagName) // 生成HTML元素节点
document.createTextNode(text) // 生成文本节点
document.createAttribute(name) // 生成属性节点
document.createDocumentFragment() // 生成DocumentFragment对象
// 以上生成后会返回一个对象
Node.appendChild(node) // 为一个节点添加一个子节点
Node.insertBefore(newNode,oldNode) // 在指定节点前插入新的子节点
Element.classList.add('xxx','yyy') // 为元素class 列表中加一个新的class，如果已经存在则忽略，可以逗号传多个参数
删
Node.removeChild(node) // 删除子节点，需要在父节点上操作
ChildNode.remove() // 删除当前节点
Element.classList.remove('xxx') // 删除元素class列表中的一个class，可以逗号传多个参数
改
element.innerHTML = 'xxx' // 返回该元素包含的HTML代码，可以读写，写入时会覆盖里面原有的代码
element.outerHTML = 'xxx' // 同上，且包含元素自身的HTML代码
element.setAttribute(attribute, value) // 修改元素指定属性的值
element.style.property = new style // 修改指定style的属性的值
Node.replaceChild(newChild,oldChild) // 替换节点
Node.textContent = 'xxx' // 返回元素里包含的所有文本内容，当写入时类似innerHTML全覆盖
document.write(text) // 向当前文档写入内容
学习参考：
原生JS中CSS相关API合集
