【Web】JavaScript中Node节点的CURD

最新推荐文章于 2023-10-31 00:09:52 发布

Mr小林

最新推荐文章于 2023-10-31 00:09:52 发布

阅读量721

点赞数 1

分类专栏： ------【Web前端】文章标签：节点 web前端开发 Node curd

本文链接：https://blog.csdn.net/mrlin6688/article/details/50988958

版权

------【Web前端】专栏收录该内容

24 篇文章 0 订阅

订阅专栏

节点的增、删、改、查操作在Web前端开发过程中，至关重要。这里主要用到了节点的CURD以及Div盒子，通过小例子可以轻松巩固基础知识。

下面是小例子的效果图：

代码展示部分:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>节点的增删改查</title>
<!--加入样式表-->
<style type="text/css">
div {
	border:#0099FF 1px solid;
	height:60px;
	width:120px;
	margin:20px 0px 20px 20px;
	padding:10px 0px 0px 20px;
	}
	
#div_1{
	background-color:#00FFFF;
	}
	
#div_2{
	background-color:#FF3399;
	}
	
#div_3{
	background-color:#0000FF;
	}
	
#div_4{
	background-color:#FFFF66;
	}
</style>


</head>



<body>
    <div id="div_1">
		
    </div>
    
    <div id="div_2">
    div区域2
    </div>
    
    <div id="div_3">
   	 div区域3
    </div>
	
	
    
    <div id="div_4">
    div区域4
    </div>
	
    
    <hr />
    <input type="button" value="创建并添加节点" οnclick="addNode()" />
    <input type="button" value="删除节点" οnclick="deleteNode()" />
    <input type="button" value="替换节点" οnclick="updateNode()" />
    <input type="button" value="克隆节点" οnclick="copyNode()" />

</body>
<script type="text/javascript">
//动态为div增加一个a元素,点击之后跳转到传智首页
function addNode(){
	//1.创建a元素 <a></a>
	var aEle = document.createElement("a");
	//2.为a元素添加属性
	aEle.setAttribute("href", "http://www.itcast.cn");
	//3.为a元素添加文本
	aEle.innerHTML = "传智播客";
	//4.获得目标div
	var div_1 = document.getElementById("div_1");
	//5.添加
	div_1.appendChild(aEle);
}
//把div_2删除
function deleteNode(){
	//1 获得要删除的元素
	var div_2 = document.getElementById("div_2");
	//2 找到该元素的父亲
	var parent= div_2.parentNode;
	//3 删除
	parent.removeChild(div_2);
}
//将div_3替换成一张图片
function updateNode(){
	//1 找到要替换的div
	var div_3 = document.getElementById("div_3");
	//2 找到div的父亲
	var parent = div_3.parentNode;
	//3 创建一个img元素对象
	var imgEle = document.createElement("img");
	//4 添加属性(src)
	imgEle.setAttribute("src", "001.jpg");
	//5 替换
	parent.replaceChild(imgEle, div_3);
}
//将div_4 复制,并加入到页面末尾
function copyNode(){
	//1 获得要复制的div
	var div_4 = document.getElementById("div_4");
	//2 复制  cloneNode=> 参数 如果是false.那么只复制本身不复制子节点.
							  //true==> 复制本身和所有子节点
	var div_copy = div_4.cloneNode(true);
	//3 获得父亲
	//4 添加
	div_4.parentNode.appendChild(div_copy);
}
</script>

</html>

1、JavaScript中的checkbox之全选、全不选、反选

2、JavaScript中的经典小例子（一）

3、JavaScript中Node节点的CURD

Mr小林

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
【Web】JavaScript中Node节点的CURD

节点的增、删、改、查操作在Web前端开发过程中，至关重要。这里主要用到了节点的CURD，通过小例子可以轻松巩固基础知识。下面是小例子的效果图：代码展示部分:节点的增删改查div { border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:
复制链接

扫一扫

专栏目录