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