DOM 操作

增删改查

一、查 - 获取节点

id 属性获取节点只返回一个唯一的节点，其他方法获取节点则是通过数组的形式返回满足指定条件的所有节点

var el1 = document.getElementById("id")                 // 根据 id 属性获取唯一节点
var els1 = document.getElementsByName("nameAttribute")  // 根据 name 属性获取节点，通过数组返回
var els2 = document.getElementsByTagName("tagName")     // 根据标签名获取节点，通过数组返回
var els3 = document.getElementsByClassName("className") // 根据类名获取节点，通过数组返回

根据已知节点的属性获取其关系节点：父节点、子节点、兄弟节点

var curNode = document.getElementById("curId")   // 通过以上四种方法之一获取当前节点
// 获取父节点
var parent1 = curNode.parentNode       // 获取父级节点
var parent2 = curNode.parentElement    // 获取父级元素节点
// 获取后代节点
var children1 = curNode.childNodes     // 获取所有子节点，包括文本节点
var children2 = curNode.children       // 仅获取子元素节点
var child1 = curNode.firstChild        // 第一个子节点
var child2 = curNode.firstElementChild // 第一个子元素节点
var child3 = curNode.lastChild         // 最后一个子节点
var child4 = curNode.lastElementChild  // 最后一个子元素节点
// 获取兄弟节点
var sibling1 = curNode.previousSibling        // 前一个兄弟节点
var sibling2 = curNode.previousElementSibling // 前一个兄弟元素节点
var sibling3 = curNode.nextSibling            // 后一个兄弟节点
var sibling4 = curNode.nextElementSibling     // 后一个兄弟元素节点

二、增 - 创建 & 复制节点：

// 创建新节点
var elementNode = document.createElement("tagName") //创建元素节点，tagName 为标签名
var textNode = document.createTextNode("text")      //创建文本元素，text 为文本字符串
var commentNode = document.createComment("comment") //创建注释节点，comment 为注释内容字符串
var docFragNode = document.createDocumentFragment() //创建文档碎片节点，初始化为空
// 复制节点
var newNode = document.createElement("tagName") // 创建或者获取需要复制的节点
var cloneNode = newNode.cloneNode(deep)         // deep 表示是否复制其后代，true 则复制

注意：docFragNode 是一个虚拟节点，当该节点插入页面中时，插入的不是 docFragNode 自身，而是它的所有子孙节点

三、改 - 添加 & 替换节点

// 添加节点
var parent = document.getElementById("parentId")  // 获取参照节点的父节点
var refNode = document.getElementById("refId")    // 获取参照节点
var newNode = document.createElement("tagName")   // 创建新节点
refNode.appendChild(newNode)           // 将新节点添加为参照节点的子节点，添加在队列的最后
refNode.append(...newNodes)            // 从参照节点尾部添加一系列新的子节点
refNode.prepend(...newNodes)           // 从参照节点头部添加一系列新的子节点
parent.insertBefore(newNode, refNode)  // 将新节点添加到参考节点的前面
refNode.before(...newNodes)            // 将一系列新节点添加到参考节点的前面
refNode.after(...newNodes)             // 将一系列新节点添加到参考节点的后面
// 替换节点
refNode.replaceWith(newNode)           // 用新节点替换参照节点
parent.replaceChild(newNode, refNode)  // 用新节点替换参照节点
parent.replaceChildren(...Nodes)       // 用新节点序列替换所有后代节点，传入为空则清空父节点的所有子节点

四、删 - 移除节点

var deleteNode = document.getElementById("delete")  // 获取需要删除的节点
deleteNode.remove()  // 移除节点