DOM 的一些增删改查

以下是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合集