【Web】JavaScript中Node节点的CURD

来源：互联网发布：芜湖神淘宝店编辑：程序博客网时间：2024/05/20 22:00

节点的增、删、改、查操作在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="创建并添加节点" onclick="addNode()" />    <input type="button" value="删除节点" onclick="deleteNode()" />    <input type="button" value="替换节点" onclick="updateNode()" />    <input type="button" value="克隆节点" onclick="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.获得目标divvar 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 找到要替换的divvar 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 获得要复制的divvar 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

1 0