使用js完成节点的增删改复制等的操作
2024-05-06 14:31:07
供稿：网友
需求：完成节点的增删改复制的操作
用到的方法和属性：
1.获取某个节点的父节点
parentNode属性
2.获取某个节点的子节点集合
childNodes属性
3.创键一个新的节点
createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好
createElement(对象) document对象的方法 例如：document.createElement("a");
4.给某个节点对象添加属性和属性值
setAttribute(属性，属性值); 例如：aNode.setAttribute("href","http://www.baidu.com");
5.替换某个节点下的子节点
replaceChild(新节点，原子节点);
6.将某个节点添加到一个节点下
appendChild(要添加的节点)
7.克隆某个节点
cloneNode() 不传参数和传入true参数一样，表示克隆该节点包括子节点
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>node_CURD.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div{
border: red 1px solid;
width: 200px;
height: 50px;
margin: 20px 30px;
padding: 20px;
}
#div_1{
clear:both;
background-color:#FF3366;
}
#div_2{
clear:both;
background-color:#6699FF;
}
#div_3{
clear:both;
background-color:#CCCC99;
}
#div_4{
clear:both;
background-color:#00CC33;
}
</style>
<script type="text/javascript">
// 增加方式一：给第一个div区域添加文本
function addText(){
//1.获取要添加文本内容的节点
var div_1Node = document.getElementById("div_1");
//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。
var TextNode = document.createTextNode("这不就显示了吗？");
//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
div_1Node.appendChild(TextNode);
}
// 增加方式二：给第一个div区域添加按钮
function addButton(){
//1.获取要添加文本内容的节点
var div_1Node = document.getElementById("div_1");
//2.创建一个节点。document对象的createElement()
var aNode = document.createElement("input");
//3.给指定对象添加属性和属性值
//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样
aNode.type="button";
aNode.setAttribute("value","按钮");
aNode.setAttribute("onclick","deleteText('div_1')");
//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法
div_1Node.appendChild(aNode);
}
// 删除方式一：删除第二个区域的节点的子节点
function deleteText(NodeId){
