需要准备的材料分别是:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建一个html文件,例如:index.html。
2、在index.html的<script>标签中,输入js代码:document.body.removeChild(document.getElementById("1"))。
3、浏览器运行index.html页面,此时会发现123所在的整个div以及它的内容都被移除了。
js操作节点的DOM方法
一、创建节点
createElement
createTextNode
二、添加、删除、替换、克隆元素
1、appendChild
2、insertBefore
3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动
4、删除节点removeremoveChild
remove()
removeChild
5.替换节点
replaceChild
6、克隆节点
cloneNode()
三、操作元素属性的方法
1.获取属性 元素.属性名
2.设置属性 元素.属性名 = 属性值
1、2方法只能获取和设置元素自带的属性
3.操作属性的万能方法
getAttribute()
setAttribute()
js通过class属性删除节点用法实现:比如有test.html,div的结构如下:
<div class="columns" id="columns">
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div class="column"><input type="checkbox" name="col_list[]" value="cows">cows</div>
<div name="columnClear" class="contentClear" id="columnClear"></div>
</div>
可以通过class属性来删除指定的节点:
js常用方法:element.parentNode.removeChild(element)
或者直接定义删除的js方法:
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className)
while(elements.length >0){
elements[0].parentNode.removeChild(elements[0])
}
}
这样只要传入class名,就可以删除这个class相关的子节点了。