使用js完成节点的增删改复制等的操作

本文为大家详细介绍下使用js完成节点的增删改复制等的操作，具体的实现如下，有需要的朋友可以参考一下，希望对大家有所帮助！

需求：完成节点的增删改复制的操作

用到的方法和属性：

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">



<style type="text/css">

p{

border: red 1px solid;

width: 200px;

height: 50px;

margin: 20px 30px;

padding: 20px;

}

#p_1{

clear:both;

background-color:#FF3366;

}

#p_2{

clear:both;

background-color:#6699FF;

}

#p_3{

clear:both;

background-color:#CCCC99;

}

#p_4{

clear:both;

background-color:#00CC33;

}

</style>

<script type="text/javascript">

// 增加方式一：给第一个p区域添加文本

function addText(){

//1.获取要添加文本内容的节点

var p_1Node = document.getElementById("p_1");

//2.创建一个文本节点。document对象的createTextNode(文本内容)方法。某些浏览器不支持。

var TextNode = document.createTextNode("这不就显示了吗？");

//3.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法

p_1Node.appendChild(TextNode);

}

// 增加方式二：给第一个p区域添加按钮

function addButton(){

//1.获取要添加文本内容的节点

var p_1Node = document.getElementById("p_1");

//2.创建一个节点。document对象的createElement()

var aNode = document.createElement("input");

//3.给指定对象添加属性和属性值

//aNode.setAttribute("type","button");//和下面一句代码达到的效果一样

aNode.type="button";

aNode.setAttribute("value","按钮");

aNode.setAttribute("onclick","deleteText('p_1')");

//4.将文本节点添加到要添加的节点下appendChild(要添加的子节点实例)方法

p_1Node.appendChild(aNode);

}

// 删除方式一：删除第二个区域的节点的子节点

function deleteText(NodeId){

//1.获取块节点

var pNode = document.getElementById(NodeId);

//2.获取子节点，即文本节点

var chileNode = pNode.childNodes[0];

//3.删除，传入一个参数true会删除其下所有子节点

//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容

pNode.removeChild(chileNode);

}

// 删除方式二：删除元素

function deleteElement(){

//1.获取块节点

var p_2Node = document.getElementById("p_2");

//2.获取父节点，

var parentNode = p_2Node.parentNode;

//3.删除

parentNode.removeChild(p_2Node);

}

// 修改

function UpdateText(){

//1获取要修改字符的区域的节点

var p_3Node = document.getElementById("p_3");

//2.获取第一步中的子节点集合，指定到要修改的节点

var childNode = p_3Node.childNodes[0];

//3.创建一个文本节点

var newNode = document.createTextNode("哈哈，我把你替换了.");

//4.用3步创建的节点替换2步骤中的节点

//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容

p_3Node.replaceChild(newNode,childNode);

}

//克隆

function copyNode(){

//1.获取第四区域节点

var p_1Node = document.getElementById("p_1");

//2.获取第一区域节点

var p_4Node = document.getElementById("p_4");

//3.获得一个新节点通过克隆第四节点

var newNode = p_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果

//4.将步骤3的新节点替换掉原来的第一节点

p_1Node.parentNode.replaceChild(newNode,p_1Node);

}

</script>

</head>

<body>

<p id="p_1"></p>

<p id="p_2">这里是第二个区域</p>

<p id="p_3">这里是第三个区域</p>

<p id="p_4">这里是第四个区域</p>

<hr />

<font size="12px">增：</font>

<input type="button" value="给第一个区域增加文本" onclick="addText()" />

<input type="button" value="给第一个区域增加一个按钮" onclick="addButton()" />

<hr />

<font size="12px">删：</font>

<input type="button" value="删除第二区域的文本内容" onclick="deleteText('p_2')" />

<input type="button" value="删除第二个区域" onclick="deleteElement()" />

<hr />

<font size="12px">改：</font>

<input type="button" value="修改第三个区域中的内容" onclick="UpdateText()" />

<hr />

<font size="12px">克隆：</font>

<input type="button" value="将第四区域克隆到第一区域" onclick="copyNode()" />

</body>

</html>

上一篇：JS+JSP checkBox 全选具体实现
下一篇：js实现动态改变字体大小代码