JavaScript DOM节点增删改克隆完整操作指南

JavaScript DOM节点操作概述

本文旨在演示如何通过JavaScript脚本实现网页中DOM节点的增加、删除、修改以及复制功能。

核心API与属性说明

实现上述功能主要依赖以下DOM API及属性：

1. 获取父节点

使用 parentNode 属性获取当前节点的直接父节点。

2. 获取子节点集合

使用 childNodes 属性获取当前节点下的所有子节点列表。

3. 创建新节点

使用 document.createTextNode() 方法创建文本节点。需注意，部分旧版浏览器对该方法的兼容性支持可能不足。

使用 document.createElement() 方法创建指定类型的元素节点，例如：document.createElement("a")。

4. 设置节点属性

使用 setAttribute(属性名, 属性值) 方法为节点添加或修改属性，例如：aNode.setAttribute("href", "http://www.baidu.com")。

5. 替换子节点

使用 replaceChild(新节点, 旧节点) 方法将父节点下的某个子节点替换为另一个节点。

6. 添加子节点

使用 appendChild(要添加的节点) 方法将指定节点追加到父节点的末尾。

7. 克隆节点

使用 cloneNode() 方法复制节点。若不传参或传入 true，则表示深克隆，即连同子节点一起复制；若传入 false 则仅复制节点本身。

 
<!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){
//1.获取块节点
var divNode = document.getElementById(NodeId);
//2.获取子节点，即文本节点
var chileNode = divNode.childNodes[0];
//3.删除，传入一个参数true会删除其下所有子节点
//chileNode.removeNode(); // 此方式在火狐和谷歌下不兼容
divNode.removeChild(chileNode);
} 
// 删除方式二：删除元素
function deleteElement(){
//1.获取块节点
var div_2Node = document.getElementById("div_2");
//2.获取父节点，
var parentNode = div_2Node.parentNode;
//3.删除
parentNode.removeChild(div_2Node);
} 
// 修改
function UpdateText(){
//1获取要修改字符的区域的节点
var div_3Node = document.getElementById("div_3");
//2.获取第一步中的子节点集合，指定到要修改的节点
var childNode = div_3Node.childNodes[0];
//3.创建一个文本节点
var newNode = document.createTextNode("哈哈，我把你替换了.");
//4.用3步创建的节点替换2步骤中的节点
//childNode.replaceNode(newNode);//此方式在火狐和谷歌下不兼容
div_3Node.replaceChild(newNode,childNode);
} 
//克隆
function copyNode(){
//1.获取第四区域节点
var div_1Node = document.getElementById("div_1");
//2.获取第一区域节点
var div_4Node = document.getElementById("div_4");
//3.获得一个新节点通过克隆第四节点
var newNode = div_4Node.cloneNode();//传入参数true表示克隆整个节点，包括子节点.默认是true参数的结果
//4.将步骤3的新节点替换掉原来的第一节点
div_1Node.parentNode.replaceChild(newNode,div_1Node);
} 
</script>
</head>
<body>
<div id="div_1"></div>
<div id="div_2">这里是第二个区域</div>
<div id="div_3">这里是第三个区域</div>
<div id="div_4">这里是第四个区域</div>
<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('div_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>