引言
上一篇笔记已经详细介绍了获取节点的方法，那么获取到节点的目的无非就是要操作这个节点，比如说设置节点的属性，修改节点的属性，甚至增加节点，删除节点等操作。本篇笔记主要记录对节点的操作。
增加节点
使用方法：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>
浅拷贝：仅仅拷贝本标签
深拷贝：连同标签内的子标签也拷贝
