[快速入门前端 64] JavaScript：DOM (5) 节点的 CRUD - 修改、删除

修改(替换)节点

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];// 执行 replaceparent.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) 事件和绑定方法
系列文章列表：[快速入门前端] 系列文章索引列表