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

修改(替换)节点
替换子项
replaceChild()可以将指定元素的某个子节点换成新的节点,语法为指定元素.replaceChild(新节点, 旧节点)。

JavaScript:DOM (5) 节点的CRUD - 修改、删除_第1张图片

 范例:

原始结构:

  • 第一项
  • 第二项
  • 第三项
// 建立新的节点
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);

JavaScript:DOM (5) 节点的CRUD - 修改、删除_第2张图片

删除节点
删除子项
使用removeChild可以删除父节点中某个子节点,用法为父节点.removeChild(子节点)。
**范例:**删除第二项
// 抓父节点
let parent = document.querySelector('ul');
// 要被删除的节点
let second = document.querySelectorAll('ul li')[1];
// 删除
parent.removeChild(second);


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

范例:删除属性

123

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

你可能感兴趣的:(javascript,前端,java)