1. 創(chuàng)建 dom 節(jié)點

通過標簽名稱創(chuàng)建 dom 元素節(jié)點 document.createElement("tagName")

// 創(chuàng)建元素節(jié)點
const el = document.createElement("div")

// 設置標簽屬性：el.setAttribute("標簽屬性", "屬性值");
// el.setAttribute("class", "active");

創(chuàng)建文本節(jié)點（可以通過 appendChild 插入到 dom 中，單純的文本）

// 獲取父節(jié)點
const parent = document.querySelector(".parent");

// 創(chuàng)建文本節(jié)點
const el = document.createTextNode("我是創(chuàng)建的文本節(jié)點");

// 將文本節(jié)點插入到父節(jié)點里
parent.appendChild(el);
console.log(parent);

2. 獲取 dom 節(jié)點

直接獲取

注意：只有通過 getElementById 和 querySelector 返回的是單個 dom 對象，其他的返回的是 dom 對象數(shù)組

// 通過 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 元素節(jié)點，不帶的代表獲取的是總節(jié)點（包括 dom 元素節(jié)點和text文本節(jié)點），后者范圍更廣，前者更適合dom操作
單純的對 dom 操作二者皆可，建議使用帶Element 的dom元素節(jié)點（因為不帶Element的會包含文本節(jié)點，如果是獲取子節(jié)點列表，那么文本節(jié)點也算是數(shù)組中的一項，這里在使用的時候需要注意）

// 獲取父節(jié)點
const el = document.getElementById("el");
console.log(el.parentNode || el.parentElement);

// 獲取子節(jié)點 單個子節(jié)點
const el = document.getElementById("el");
console.log(el.firstElementChild || el.firstChild); // 第一個子節(jié)點
console.log(el.lastElementChild || el.lastChild); // 最后一個子節(jié)點
// 獲取子節(jié)點 所有子節(jié)點
console.log( el.children|| el.childNodes); // 所有子節(jié)點

// 獲取兄弟節(jié)點
const el = document.getElementById("el");
console.log(el.previousElementSibling || el.previousSibling); // 獲取前一個兄弟節(jié)點
console.log(el.nextElementSibling || el.nextSibling); // 獲取后一個兄弟節(jié)點

3. 增加 dom 節(jié)點

在已有節(jié)點的內部的最后面插入一個子節(jié)點 parent.appendChild(el);

// 獲取父節(jié)點
const parent = document.querySelector(".parent");

// 創(chuàng)建新節(jié)點
const el = document.createElement("h5");
el.innerText = `我是新節(jié)點`;

// 將新節(jié)點插入到父節(jié)點內部的最后面
parent.appendChild(el);
console.log(parent);

在已有節(jié)點的子節(jié)點前插入一個子節(jié)點 parent.insertBefore(el, child);

// 獲取父節(jié)點
const parent = document.querySelector(".parent");

// 獲取父節(jié)點下第一個子節(jié)點
const child = parent.children[0];

// 創(chuàng)建新節(jié)點
const el = document.createElement("h5");
el.innerText = `我是新節(jié)點`;

// 將新節(jié)點插入到父節(jié)點下child子節(jié)點的前面
parent.insertBefore(el, child);
console.log(parent);

4. 刪除 子節(jié)點

parent.removeChild(child)

// 獲取父節(jié)點
const parent = document.querySelector(".parent");

// 獲取父節(jié)點下第二個子節(jié)點
const child = parent.children[1];

// 刪除父節(jié)點下的 child 子節(jié)點
parent.removeChild(child);
console.log(parent);

5. 修改 子節(jié)點 （如果用已有節(jié)點替換，那么會先刪除已有節(jié)點）

parent.replaceChild(el, child);

// 獲取父節(jié)點
const parent = document.querySelector(".parent");

// 獲取父節(jié)點下第二個子節(jié)點
const child = parent.children[1];

// 創(chuàng)建新節(jié)點
const el = document.createElement("h5");
el.innerText = `我是新節(jié)點`;

// 新節(jié)點替換父節(jié)點下的第二個子節(jié)點
parent.replaceChild(el, child);
console.log(parent);