节点的增、删、改、查操作在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>
相关文章: