AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

javascript-dom操作

2022-05-26 127
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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

文章标签：
JavaScript
k&uarr;
目录
相关文章
晓之以理的喵~~
|
7月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中，DOM（文档对象模型）是一个至关重要的概念，它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用，以及JavaScript与DOM之间的密切关系。
晓之以理的喵~~
83 0
_BugMan
|
6月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
_BugMan
94 2
博客zhu虎康
|
7月前
|
JavaScript 前端开发 容器
JavaScript中的DOM操作
JavaScript中的DOM操作
博客zhu虎康
89 0
小小小林
|
7月前
|
JavaScript 前端开发
javaScript（六）：DOM操作
JavaScript DOM (Document Object Model) 是指使用 JavaScript 操作网页中各种元素的一种技术。通过 JavaScript DOM，可以轻松地访问、修改和更新网页中的元素和内容
小小小林
55 0
javaScript（六）：DOM操作
东方睿赢
|
7月前
|
JavaScript 前端开发
JavaScript DOM操作：如何实现事件委托？
JavaScript DOM操作：如何实现事件委托？
东方睿赢
35 2
一只会写程序的猫
|
XML JavaScript 前端开发
详解javascript里面的DOM操作
DOM(Document Object Model)是用于操作HTML和XML文档的标准编程接口。在JavaScript中，我们可以使用DOM来选择元素、修改元素属性、添加/删除元素以及处理事件等操作。本文将详细介绍如何使用JavaScript来操作DOM，并提供一些练习的例子和答案。
一只会写程序的猫
153 0
游客ndtrvef2bkfgi
|
JavaScript 前端开发 程序员
JavaScript-DOM编程
JavaScript-DOM编程
游客ndtrvef2bkfgi
75 0
JavaScript-DOM编程
久绊A
|
XML JavaScript 前端开发
JavaScript DOM操作
JavaScript DOM操作
久绊A
97 0
程序员大腾
|
存储 JavaScript 前端开发
JavaScript—DOM的获取
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取。Document对象中提供了以下获取Element元素对象的函数。//alert(divs.length);//输出数组的长度。//返回一个数组，数组中存储的是div元素对象。
程序员大腾
74 0
JavaScript—DOM的获取
程序员大腾
|
XML JavaScript 前端开发
JavaScript—DOM理解
DOMDocumentObjectModel文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象。
程序员大腾
120 0

热门文章

最新文章

  • 1
    基于区块链的机器学习模型创建方案
  • 2
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
  • 3
    首届Global VR Hackathon完结 全球前三甲诞生
  • 4
    我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。
  • 5
    iptables
  • 6
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 7
    jquery的load加载js页面到指定div中
  • 8
    分享平时工作中那些给力的shell命令（更新版）
  • 9
    如何在ubuntu下用SVN commit
  • 10
    hdu 1800 Flying to the Mars
  • 1
    HelloMeme：开源的面部表情与姿态迁移框架，将视频中的人物表情迁移到静态图像中生成动态视频
    98
  • 2
    VSI-Bench：李飞飞谢赛宁团队推出视觉空间智能基准测试集，旨在评估多模态大语言模型在空间认知和理解方面的能力
    30
  • 3
    CLEAR：新加坡国立大学推出线性注意力机制，使8K图像的生成速度提升6.3倍，显著减少了计算量和时间延迟
    30
  • 4
    Kheish：开源的多智能体开发框架，通过 YAML 配置工作流和多个 Agent 共同协作解决复杂任务
    38
  • 5
    Bamba-9B：基于 Mamba2 架构的仅解码语言模型，旨在提高大型语言模型在推理时的效率
    32
  • 6
    DisPose：清华北大等多所高校联合推出基于人物图像增强视频生成技术，实现对人物动画的准确控制和一致性
    29
  • 7
    InvSR：开源图像超分辨率生成模型，提升分辨率，修复老旧照片为超清图像
    27
  • 8
    Univer：开源全栈 AI 办公工具，支持 Word、Excel、PPT 等文档处理和多人实时协作
    24
  • 9
    《人工智能：驱散新材料数据噪声与填补缺失值的曙光》
    20
  • 10
    《人工智能：解锁新材料最佳掺杂元素及比例的密码》
    14

    • 相关课程

    更多
  • JavaScript入门与实战
  • 前端开发CSS基础

    • 相关电子书

    更多
  • Javascript异步编程
  • JavaScript异步编程
  • JavaScript函数

    • 相关实验场景

    更多
  • HTML及前端框架
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS