修改(替换)节点
替换子项
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');