修改(替換)節點

replaceChild

replaceChild() 可以將指定元素的某個子節點換成新的節點，語法為 指定元素.replaceChild(新節點, 舊節點);。

範例：
原始結構：

<ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>

// 建立新的節點
let newli = document.createElement('li');
newli.innerHTML = "我是新的 li";
// 取得父節點
let parent = document.querySelector('ul');
// 取得要被 replace 的節點
let oldli = document.querySelectorAll('ul li')[1];
// 執行 replace
parent.replaceChild(newli, oldli);

刪除節點

removeChild

使用 removeChild 可以刪除父節點中某個子節點，用法為 父節點.removeChild(子節點)。

**範例：**刪除第二項

<ul>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>

// 抓父節點
let parent = document.querySelector('ul');
// 要被刪除的節點
let second = document.querySelectorAll('ul li')[1];
// 刪除
parent.removeChild(second);

removeAttribute

removeAttribute 會刪除元素節點的指定屬性。

範例： 刪除屬性

<div id="container" name="myDiv" style="background-color: red;">123</div>

// 抓目標元素
let target = document.getElementById('container');
// 刪除元素的 style 屬性
target.removeAttribute('style');

上一篇：[快速入門前端 63] JavaScript：DOM (5) 節點的 CRUD - 新增節點
下一篇：[快速入門前端 65] JavaScript：事件 (1) 事件和綁定方法
系列文章列表：[快速入門前端] 系列文章索引列表