JavaScript dom节点的增、删、改、查

1. 创建 dom 节点

通过标签名称创建 dom 元素节点 document.createElement("tagName")

// 创建元素节点
const el = document.createElement("div")

// 设置标签属性：el.setAttribute("标签属性", "属性值");
// el.setAttribute("class", "active");

创建文本节点（可以通过 appendChild 插入到 dom 中，单纯的文本）

// 获取父节点
const parent = document.querySelector(".parent");

// 创建文本节点
const el = document.createTextNode("我是创建的文本节点");

// 将文本节点插入到父节点里
parent.appendChild(el);
console.log(parent);

2. 获取 dom 节点

直接获取

注意：只有通过 getElementById 和 querySelector 返回的是单个 dom 对象，其他的返回的是 dom 对象数组

// 通过 id 获取
const el = document.getElementById('only')

// 通过 css选择器 获取匹配到的第一个
const el = document.querySelector('body .main div')

// 通过 css选择器 获取匹配到所有
const el = document.querySelectorAll('body .main div')

// 通过 标签名 获取
const el = document.getElementsByTagName('div')

// 通过 class 获取
const el = document.getElementsByClassName('className')

// 通过 name 获取
const el = document.getElementsByName('main')

间接获取

带 Element 的代表获取的是 dom 元素节点，不带的代表获取的是总节点（包括 dom 元素节点和text文本节点），后者范围更广，前者更适合dom操作
单纯的对 dom 操作二者皆可，建议使用带Element 的dom元素节点（因为不带Element的会包含文本节点，如果是获取子节点列表，那么文本节点也算是数组中的一项，这里在使用的时候需要注意）

// 获取父节点
const el = document.getElementById("el");
console.log(el.parentNode || el.parentElement);

// 获取子节点 单个子节点
const el = document.getElementById("el");
console.log(el.firstElementChild || el.firstChild); // 第一个子节点
console.log(el.lastElementChild || el.lastChild); // 最后一个子节点
// 获取子节点 所有子节点
console.log( el.children|| el.childNodes); // 所有子节点

// 获取兄弟节点
const el = document.getElementById("el");
console.log(el.previousElementSibling || el.previousSibling); // 获取前一个兄弟节点
console.log(el.nextElementSibling || el.nextSibling); // 获取后一个兄弟节点

3. 增加 dom 节点

在已有节点的内部的最后面插入一个子节点 parent.appendChild(el);

// 获取父节点
const parent = document.querySelector(".parent");

// 创建新节点
const el = document.createElement("h5");
el.innerText = `我是新节点`;

// 将新节点插入到父节点内部的最后面
parent.appendChild(el);
console.log(parent);

在已有节点的子节点前插入一个子节点 parent.insertBefore(el, child);

// 获取父节点
const parent = document.querySelector(".parent");

// 获取父节点下第一个子节点
const child = parent.children[0];

// 创建新节点
const el = document.createElement("h5");
el.innerText = `我是新节点`;

// 将新节点插入到父节点下child子节点的前面
parent.insertBefore(el, child);
console.log(parent);

4. 删除 子节点

parent.removeChild(child)

// 获取父节点
const parent = document.querySelector(".parent");

// 获取父节点下第二个子节点
const child = parent.children[1];

// 删除父节点下的 child 子节点
parent.removeChild(child);
console.log(parent);

5. 修改 子节点 （如果用已有节点替换，那么会先删除已有节点）

parent.replaceChild(el, child);

// 获取父节点
const parent = document.querySelector(".parent");

// 获取父节点下第二个子节点
const child = parent.children[1];

// 创建新节点
const el = document.createElement("h5");
el.innerText = `我是新节点`;

// 新节点替换父节点下的第二个子节点
parent.replaceChild(el, child);
console.log(parent);