DOM -- 元素的操作 · 前端知識 -- 學習整理

>[success] # 元素操作 * 新增元素： 1. 使用`document.write` 因為早期沒有dom的時候使用的方案，將整體內容看作字符串，然后拼接到[關于原理可以查看](https://segmentfault.com/a/1190000007958530)，**缺陷**:如果是在頁面加載完畢后,此時通過這種方式創建元素,那么頁面上存在的所有的內容清除 2. `innerHTML`使用`元素對象.innerHTML="標簽代碼及內容"`例如 ~~~ <body> <div class="t"></div> <script> const o = document.querySelector('div') o.innerHTML = '<p>新增</p>' </script> </body> ~~~ 3. 使用 `createElement` 創建元素，`document.createElement("標簽名字")` 但需要將創建元素插入到指定節點才能顯示 >[info] ## 將元素插入方法 * 新功能api 1. **node.append(...nodes or strings)** —— 在 node **末尾插入**節點或字符串， 2. **node.prepend(...nodes or strings)** —— 在 node **開頭插入**節點或字符串， 3. **node.before(...nodes or strings)** —— 在 node **前面插入**節點或字符串， 4. **node.after(...nodes or strings)** —— 在 node **后面插入**節點或字符串， 5. **node.replaceWith(...nodes or strings)** —— 將 node **替換**為給定的節點或字符串。 ![](https://img.kancloud.cn/4d/9f/4d9f0dfb2ec6ea6577d963f87ae22b39_706x289.png) * 老功能api 1. **appendChild** --- 追加子元素 2. **insertBefore** --- 向前插入子元素 3. **parentElem.replaceChild(node, oldChild)** -- 在parentElem中，新元素替換之前的oldChild元素 * **注**：二者區別**parentNode.append()**可以同時傳入多個節點或字符串，沒有返回值；而 **parentNode.appendChild()** 只能傳一個節點，且不直接支持傳字符串，**append不返回任何值, appendChild返回Node對象** >[danger] ##### 使用案例 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .t { color: antiquewhite; } </style> </head> <body> <div class="box"></div> <script> const box = document.querySelector('.box') // 創建插入屬性 const appendNode = document.createElement('div') appendNode.textContent = 'append 插入' const prependNode = document.createElement('div') prependNode.textContent = 'prepend 插入' const beforeNode = document.createElement('div') beforeNode.textContent = 'before 插入' const afterNode = document.createElement('div') afterNode.textContent = 'after 插入' box.append(appendNode) box.prepend(prependNode) box.before(beforeNode) box.after(afterNode) </script> </body> </html> ~~~ ![](https://img.kancloud.cn/a0/94/a0947e855d1f89d24b42d41c71f8abd4_584x319.png) >[danger] ##### 刪除節點 1. `node.remove` 2. 老方法**parentElem.removeChild(node)**-- 在parentElem中，移除某一個元素 >[danger] ##### cloneNode方法 1. 可以傳入一個Boolean類型的值，來決定是否是深度克隆； 2. 深度克隆會克隆對應元素的子元素，否則不會 ~~~ node.cloneNode(true) ~~~