JavaScript：DOM (5) 节点的CRUD - 修改、删除

修改(替换)节点
替换子项
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(子节点)。
**范例：**删除第二项

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

删除属性
removeAttribute会删除元素节点的指定属性。

范例：删除属性

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

// 抓目标元素
let target = document.getElementById('container');
// 删除元素的 style 属性
target.removeAttribute('style');