DOM_Element对象
removeAttribute()：删除指定的属性
setAttribute()：添加新属性
<!--Element对象-->
<a>点我试一下</a>
<input type="button" value="给a标签设置属性" id="btn_set">
<input type="button" value="给a标签删除属性" id="btn_remove">
<script>
//获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
//setAttribute()：添加新属性
element_a.setAttribute("href","https://www.baidu.com")
}
//获取btn
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
//1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
//removeAttribute()：删除指定的属性
element_a.removeAttribute("href");
}
DOM_Node对象
Node：节点对象，其他5个的父对象
特点:所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点
removeChild()：删除（并返回）当前节点的指定子节点
replaceChild()：用新节点替换一个子节点
属性：
parentNode：返回节点的父节点
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node_7对象</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<!--
超连接功能
1.可以被点击：样式
2.点击后跳转到href指定的url
需求：保留1功能，去掉2功能
实现：href=“javascript:void(0);”
-->
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<!--<input type="button" id="del" value="删除子节点">-->
<script>
//获取超链接
var element_a = document.getElementById("del");
//绑定单击事件
element_a.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//获取超链接
var element_add = document.getElementById("add");
//绑定单击事件
element_add.onclick = function () {
var div1 = document.getElementById("div1");
//给div1添加子节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
//获取div2的父节点
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
</script>
</body>
</html>
属性：
搜索
复制
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/278743.html