javascript-dom操作

简介: javascript-dom操作

正文


<html !doctype>
<head>
<title>js技术</title>
</head>
<body>
<label for="checkAll">全选</label><input id="checkAll" type="checkbox" class="checkAll">
<label for="checkInvert">反选</label><input id="checkInvert" type="checkbox" class="checkInvert">
<input type="button" value="添加" class="insert">
<input type="button" value="删除" class="remove">
<input type="button" value="复制" class="clone">
<div id="shop">
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="1610" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="6150" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="61410" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="6140" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="6310" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
<div>
<input type="checkbox" name="check"> 
<input type="button" value="+" class="add" name="add">
<input type="text" value="0" class="num" readonly="readonly">
<input type="button" value="-" class="sub">
<input type="text" value="2610" class="price" readonly="readonly">
<input type="text" value="0" class="total" readonly="readonly">
</div>
</div>
<label for="totals">总计</label><input readonly="readonly" id="totals" type="text" value="0">
<script>
function fun(){
var add=document.getElementsByClassName("add");
var length=add.length;
for(var i=0;i<length;i++){
add[i].onclick=function(){
var num=parseInt(this.nextElementSibling.value);
num+=1;
this.parentNode.children[2].value=num;
var price=parseInt(this.parentNode.children[4].value);
this.parentNode.lastElementChild.value=num*price;
if(this.parentNode.firstElementChild.checked){
var totals=parseInt(document.getElementById("totals").value);
document.getElementById("totals").value=totals+price;
}
}
}
var sub=document.getElementsByClassName("sub");
for(var i=0;i<sub.length;i++){
sub[i].onclick=function(){
var num=parseInt(this.previousElementSibling.value);
if(num>0){
num-=1;
this.parentNode.children[2].value=num;
var price=this.parentNode.children[4].value;
this.parentNode.lastElementChild.value=num*price;
if(this.parentNode.firstElementChild.checked){
var totals=parseInt(document.getElementById("totals").value);
document.getElementById("totals").value=totals-price;
}
}
}
}
document.querySelector("#checkAll").onclick=function(){
var check=document.getElementsByName("check");
var length=check.length;
var sum=0;
for(var i=0;i<length;i++){
check[i].checked=this.checked;
if(check[i].checked){
   var total=parseInt(check[i].parentNode.lastElementChild.value);
   sum+=total;
}
}
document.getElementById("totals").value=sum;
}
document.querySelector("#checkInvert").onclick=function(){
var sum=0;
var check=document.getElementsByName("check");
var length=check.length;
for(var i=0;i<length;i++){
if(check[i].checked){
check[i].checked=false;
}else{
check[i].checked=true;
var total=parseInt(check[i].parentNode.lastElementChild.value);
sum+=total;
}
}
document.getElementById("totals").value=sum;
}
var check=document.getElementsByName("check");
var length=check.length;
for(var i=0;i<length;i++){
check[i].onclick=function(){
if(this.checked){
var totals=parseInt(document.getElementById("totals").value);
var total=parseInt(this.parentNode.lastElementChild.value);
document.getElementById("totals").value=total+totals;
}else{
var totals=parseInt(document.getElementById("totals").value);
var total=parseInt(this.parentNode.lastElementChild.value);
document.getElementById("totals").value=totals-total;
}
}
}
}
document.querySelector(".insert").onclick=function(){
var div=document.createElement("div");
var input=document.createElement("input");
input.setAttribute("type","checkbox");
input.setAttribute("name","check");
div.appendChild(input);
var input1=document.createElement("input");
input1.setAttribute("type","button");
input1.value="+";
input1.setAttribute("class","add");
div.appendChild(input1);
var input2=document.createElement("input");
input2.setAttribute("type","text");
input2.setAttribute("class","num");
input2.setAttribute("readonly","readonly");
input2.value="0";
div.appendChild(input2);
var input3=document.createElement("input");
input3.value="-";
input3.setAttribute("type","button");
input3.setAttribute("class","sub");
div.appendChild(input3);
var input4=document.createElement("input");
input4.setAttribute("class","price");
input4.value="3232";
input4.setAttribute("readonly","readonly");
input4.setAttribute("type","text");
div.appendChild(input4);
var input5=document.createElement("input");
input5.setAttribute("type","text");
input5.value="0";
input5.setAttribute("class","total");
input5.setAttribute("readonly","readonly");
div.appendChild(input5);
var shop=document.getElementById("shop");
shop.appendChild(div);
fun();
}
document.querySelector(".clone").onclick=function(){
var node=document.getElementById("shop").lastElementChild;
var newNode=node.cloneNode(true);
var parse=document.getElementById("shop");
parse.appendChild(newNode);
fun();
}
document.querySelector(".remove").onclick=function(){
var parse=document.getElementById("shop");
var div=parse.children;
for(var i=div.length-1;i>=0;i--){
if(div[i].children[0].checked){
   parse.removeChild(div[i]);
}
}
}
fun();
</script>
</body>
</html>


js最经典就是dom模型


创建(createElement)、插入(appendChild、insertBefore)、复制(CloneNode)、删除(removeChild)节点及全选与反选


前一个兄弟节点:previousElementSibling


后一个兄弟节点:nextElementSibling


第一个子节点:firstElementChild


最后一个字节点:lastElementChild


父节点:parentNode


所有子节点:children


自定义子节点:children[i]


看一下效果图


111.png

222.png

333.png

111.png

222.png





111.png222.png333.png

目录
相关文章
|
人工智能 关系型数据库
私人定制的AI助理
通过简单的配置,能接触到AI领域的最新技术,这对是一个非常有意思的活动
188 5
|
7月前
|
存储 缓存 安全
【原理】【Java并发】【volatile】适合初学者体质的volatile原理
欢迎来到我的技术博客!我是一名热爱编程的开发者,梦想是写出高端的CRUD应用。2025年,我正在沉淀自己,博客更新速度也在加快。在这里,我会分享关于Java并发编程的深入理解,尤其是volatile关键字的底层原理。 本文将带你深入了解Java内存模型(JMM),解释volatile如何通过内存屏障和缓存一致性协议确保可见性和有序性,同时探讨其局限性及优化方案。欢迎订阅专栏《在2B工作中寻求并发是否搞错了什么》,一起探索并发编程的奥秘! 关注我,点赞、收藏、评论,跟上更新节奏,让我们共同进步!
314 8
【原理】【Java并发】【volatile】适合初学者体质的volatile原理
|
10月前
|
安全 Ubuntu Shell
深入解析 vsftpd 2.3.4 的笑脸漏洞及其检测方法
本文详细解析了 vsftpd 2.3.4 版本中的“笑脸漏洞”,该漏洞允许攻击者通过特定用户名和密码触发后门,获取远程代码执行权限。文章提供了漏洞概述、影响范围及一个 Python 脚本,用于检测目标服务器是否受此漏洞影响。通过连接至目标服务器并尝试登录特定用户名,脚本能够判断服务器是否存在该漏洞,并给出相应的警告信息。
545 84
|
12月前
|
SQL XML Java
Mybatis的<where>,<if>等标签用法
这篇文章详细解释了Mybatis中<where>和<if>等标签的用法,展示了如何在SQL动态构建中有效地过滤条件和处理逻辑分支。
758 1
|
11月前
|
存储 数据采集 大数据
大数据列表删除的优点
【10月更文挑战第23天】
139 2
|
Dart Shell pouch
markdown中快速插入Emoji表情包语法速查表!!!
markdown中快速插入Emoji表情包语法速查表!!!
|
SQL 存储 分布式数据库
美团增量数仓建设新进展
美团系统研发工程师汤楚熙,在 Flink Forward Asia 2022 实时湖仓专场的分享。
858 0
美团增量数仓建设新进展
|
存储 运维 安全
阿里云认证为什么那么多人考?哪个证书含金量高?
为什么现在阿里云占市场的份额最多?为什么阿里云的证书含金量那么高?
|
Java
idea创建Java项目
idea创建Java项目
208 0