引言
上一篇笔记已经详细介绍了获取节点的方法,那么获取到节点的目的无非就是要操作这个节点,比如说设置节点的属性,修改节点的属性,甚至增加节点,删除节点等操作。本篇笔记主要记录对节点的操作。
增加节点
使用方法:document.createElement(想要创建的标签属性)
<body>
<div id ="box">
<p>原来就有的标签</p>
</div>
<script>
window.onload = function () {
var box =document.getElementById("box");
//创建节点
var test1 =document.createElement("button");
//设置标签属性
test1.textContent="新加的按钮";
//将标签追加到box里面
box.appendChild(test1);
};
</script>
</body>
添加标签到固定位置
从上面例子可以到,新创建的标签被追加到最后,那么如果我想将新加的标签到固定位置的话:
- 加到某标签的前面:
节点.insertBefore(插入的标签,参照标签)
<script>
window.onload = function () {
var box =document.getElementById("box");
var p =document.getElementsByTagName("p")[0];
//创建节点
var test1 =document.createElement("button");
//设置标签属性
test1.textContent="新加的按钮";
//将新标签放到参照标签的前面
box.insertBefore(test1,p);
};
删除标签
使用方法:
- 调用父节点删除子节点
需要删除的节点.parentNode.removeChild(需要删除的节点);
- 自身调用remove()
<body>
<div id ="box">
<p>原来就有的标签1</p>
<p>原来就有的标签2</p>
<button>原来就有的按钮</button>
</div>
<script>
window.onload = function () {
var box =document.getElementById("box");
var p1 =document.getElementsByTagName("p")[0];
var p2 =document.getElementsByTagName("p")[1];
//删除节点p1
//使用父节点删除子节点
p1.parentNode.removeChild(p1);
//使用自身删除节点
p2.remove();
};
</script>
</body>
修改节点(复制节点)
- 修改节点属性:
需要修改的节点.需要修改的属性
- 使用方法:
新节点=要复制的节点.cloneNode(布尔参数)
- 参数:false:浅拷贝,true:深拷贝
<body>
<div id ="box">
<p>原来就有的标签1</p>
<p>原来就有的标签2</p>
<button>原来就有的按钮</button>
</div>
<script>
window.onload = function () {
var box =document.getElementById("box");
var p1 =document.getElementsByTagName("p")[0];
var p2 =document.getElementsByTagName("p")[1];
//复制box节点(浅拷贝)
var new_box1 =box.cloneNode(false);
console.log(new_box1);
//复制box节点(深拷贝)
var new_box2 =box.cloneNode(true);
console.log(new_box2);
};
</script>
</body>
浅拷贝:仅仅拷贝本标签
深拷贝:连同标签内的子标签也拷贝