5.21 制作一个简易的购物车效果 JS的这些Dom基础内容快来学习吧

前言:目前正在学习JS的一些基础内容,会将学习到的持续分享到博客,欢迎萌新观看

一、节点关系

1.父节点 parentElement

// 获取到父节点
			var parent  =  document.getElementById("parent");

2.所有子节点 children

	// 获取到所有的子节点
			console.log(parent.children);

3.第一个子节点 firstElementChild

	// 第一个子节点
			var first = parent.firstElementChild;

4.最后个子节点 lastElementChild

	// 最后一个子节点
			var last  = parent.lastElementChild;

5.上一个兄弟 previousElementSibling

			// me的上一个兄弟节点
			var pre = me.previousElementSibling;

6.下一个兄弟 nextElementSibling

			// me的下一个兄弟节点
			var next = me.nextElementSibling;

二、属性操作

1.getAttribute 获取属性

2.setAttribute 设置属性

3.removeAttribute 移除属性

	<body>
		<h1>属性修改</h1>
		<img src="images/pic1.png" alt="一张好图"><br/>
		<button onclick="changeImg()">修改图片</button>
		<script>
			function changeImg(){
				// 获取图片
				var img = document.querySelector("img");
				// 获取图片的src属性
				console.log(img.getAttribute("src"))
				// 修改图片的src属性
				img.setAttribute("src",'./images/pic2.png');
				// 删除alt属性
				img.removeAttribute("alt");
			}
			
		</script>
	</body>

三、节点信息

js的DOM核心编程 ,每个元素都是一个节点,节点有不同类型有不同信息

1.nodeName节点的名称

2.nodeType节点的类型

3.nodeValue节点的值

	<body>
		<h1>属性修改</h1>
		<p><strong>HI</strong>我是文本内容ABC</p>
		<script>
			var p = document.querySelector("p");
			console.log("nodeName",p.nodeName); //大写P
			console.log("nodeType",p.nodeType); //1 代表元素
			console.log("nodeValue:"+p.nodeValue); // 元素节点nodeValue为None
			
			var text = p.firstChild; //p的第一个子元素是文本节点(文本也是节点)
			console.log("nodeName",text.nodeName);
			console.log("nodeType",text.nodeType); // 3 代表文本节点
			console.log("nodeValue",text.nodeValue);// 文本节点是文本
		</script>
	</body>

四、节点操作

  1. 创建节点document.createElement(tag)
  2. 删除节点:elem.remove()
  3. elem.parentElment.removeChild(elem)
  4. 复制节点 ,不带子节点var elem2 = elem.cloneNode(false)
  5. 复制节点,带子节点var elem3 = elem.cloneNode(true)
  6. 插入节点parent.appendChild(elem) 将elem插入到parent最后面
  7. 插入节点parent.insertBefore(新的节点,相关节点)把新的节点插入到 相关节点的前面
  8. 替换节点parent.replaceChild(新的节点,被替换的节点)
	<body>
		<h1>节点的创建与插入</h1>
		<button type="button" onclick="createImg()">创建并插入</button>
		<button type="button" onclick="copyImg()">复制图片</button>
		<button type="button" onclick="delImg()">删除</button>
		<button type="button" onclick="insertImg()">指定位置</button>
		<br/>
		<p id="myp">咱们是一个p标签</p>
		<img src="images/pic1.png" id="pic1">
		<script>
			function insertImg(){
				// 创建图片
				var img = document.createElement("img");
				// 指定图片的src
				img.setAttribute("src",'images/pic3.png');
				// 选中要插入的相关节点
				var myp = document.getElementById("myp");
				// 执行插入
				document.body.insertBefore(img,myp);
			}
			function delImg(){
				// 找到要删除的图片(last-of-type 选中最后一张图片)
				var img = document.querySelector("img:last-of-type");
				// 执行删除
				// img.remove();//自己删除自己
				// 用父节点来删除
				img.parentElement.removeChild(img);
			}
			function copyImg(){
				// 01 选中被复制的图片
				var pic1 = document.getElementById("pic1");
				// 02 复制
				var img = pic1.cloneNode(false); //true包含子节点,false只是当前节点
				// 03 插入到body中(document.body 直接获取body元素节点)
				document.body.appendChild(img);
			}
			function createImg(){
				// 通过js创建一张图片
				var img = document.createElement("img");
				// 指定图片的src值
				img.setAttribute("src",'images/pic2.png');
				// 插入到body标签
				document.body.appendChild(img);
			}
		</script>
	</body>

五.制作一个留言板

	<body>
		<h1>校园留言表白墙</h1>
		<p>用户名:<input type="text" id="uname" /></p>
		<p>留言内容:<textarea id="msg"></textarea></p>
		<p><button type="button" onclick="send()">发表留言</button></p>
		<!--存放留言内容 -->
		<div class="msgBox">
			<div class="item">
				<p>曾木木  2022/5/20 10:52</p>
				<div>我认为你的灵魂很有趣,能加个微信不?</div>
				<hr/>
			</div>
		</div>
		<script>
			function send(){
				// 获取用户名
				var uname = document.getElementById("uname");
				// 获取时间
				var date = new Date().toLocaleString();//转换为本地字符串
				// 获取留言内容
				var msg = document.getElementById("msg");
				/* if(!msg.value){
					alert("留言不能为空")
					return;
				} */
				// 获取msgBox
				var msgBox = document.querySelector(".msgBox");
				// 创建新的item
				var item = document.createElement("div");
				item.className = "item";//设置类名
				// 拼接字符串HTML 
				var str = `
					<p>${uname.value}  ${date}</p>
					<div>${msg.value}</div>
					<hr/>
				`;
				// 设置item的html内容
				item.innerHTML = str;
				// msgBox插入item
				// msgBox.appendChild(item); //插入到msgBox后面
				msgBox.insertBefore(item,msgBox.firstElementChild)
				// 插入到msgBox第一个子节点前面
				// 清空用户名,清空留言内容
				msg.value = '';
			}
		</script>
	</body>

六.表格的操作

  1. 创建行row = table.insertRow(index)
  2. 创建列col = row.insertCell(index)
  3. 设置列的内容col.innerText="xxx"
  4. 选择第一行table.firstElementChild.fristElementChild
	<body>
		 <table border="1" cellspacing="" cellpadding="">
			<tr>
				<td>书名</td> <td>价格</td> <td>操作</td>
			</tr>
				<td>精通js</td> <td>16.8</td> <td><button>删除</button></td>
			</tr>
			</tr>
				<td>60个瞬间</td> <td>32.2</td> <td><button>删除</button></td>
			</tr>
		 </table>
		 <button type="button" onclick="addRow()">增加一行</button>
		 <button type="button" onclick="delRow()">删除第一行</button>
		<button type="button" onclick="changeTitle()">修改标题</button>
		<script>
			function changeTitle(){
				// var list = document.getElementsByTagName获取的是一个类似列表
				// [table,table] 第一个table 
				// list[0]
				var table = document.getElementsByTagName("table")[0];
				// table 默认会添加一个tbody标签
				// table第一个子节点tbody tbody第一个子节点是tr
				var row = table.firstElementChild.firstElementChild;
				row.style.backgroundColor="#f30";
				console.log(row);
			}
			function delRow(){
				// 通过标签名table获取
				var table = document.getElementsByTagName("table")[0];
				// 删除第0行
				table.deleteRow(1);
			}
			function addRow(){
				// 通过标签名table获取
				var table = document.getElementsByTagName("table")[0];
				// 插入行
				var row = table.insertRow(2);
				// 一行插入2列表
				var td1 = row.insertCell(0);
				var td2 = row.insertCell(1);
				var td3 = row.insertCell(2);
				// 设置列的内容
				td1.innerText = "精通Vue3.0";
				td2.innerText = "20.00";
				td3.innerHTML = '<button>删除</button>';
			}
		</script>
	 
	</body>

七.事件的注册

1.DOM0 在html标签中<h1 οnclick="callMe()">

2.DOM1 实现js与html分离btn.οnclick=callMe;btn.onclick = function(){}
(多次注册,只会执行最后一个)

3.DOM2 可以添加多个,也可以移除btn.addEventListener(“click”,callMe);
btn.addEventListener("click",function(){})

4.移除全部clickbtn.removeEventListenter("click")
移除一个btn.removeEventListenter("click",callMe)

	<body>
		<h1 onclick="callMe()">事件的监听</h1>
		<button id="btn">点我</button>
		<button id="btn2">随意</button>
		<script>
			// js响应事件由三种监听方式
			// 01 事件响应写在html标签属性里面(简单)
			
			function callMe(){
				alert("我被点到了");
			}
			// 02 在js对象的属性中监听(和html分离)
			var btn = document.getElementById("btn");
			// btn.onclick = callMe; //不要圆括号
			btn.onclick =function(){
				alert("要线下了,我很开心");
			}
			
			// 03 通过addEventListener 注册 (可以注册多个)
			var btn2 = document.getElementById("btn2");
			// click 事件名称:mouseover,mouseout load
			// callMe 事件的响应函数 还可以写个匿名函数
			btn2.addEventListener("click",callMe)
			btn2.addEventListener("click",function(){
				alert("开心要见到你们了✨🎉😍");
			})
			// add添加;Event事件;Listenter监听器
			// 添加事件监听器
			
		</script>
	</body>

八.购物车效果

	<body>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th><input type="checkbox" id="all" onchange="checkAll()" /></th>
				<th>名称</th>
				<th>价格</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>键盘</td>
				<td>500</td>
				<td>
					<button type="button" onclick="minus(this)" >-</button>
					<input type="text" value="1" />
					<button type="button" onclick="add(this)" >+</button>
				</td>
				<td>500</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>鼠标</td>
				<td>100</td>
				<td>
					<button type="button" onclick="minus(this)" >-</button>
					<input type="text" value="1" />
					<button type="button" onclick="add(this)" >+</button>
				</td>
				<td>100</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>
			<tr>
				<td colspan="3" >总计</td>
				<td colspan="3" id="sum"></td>
			</tr>
		</table>
		<script>
			
			
			
			// 每个非all的ckeckbox放变化时候,检查all是否改选择中了
			// 非all的checkbox长度等于等于选中的非allcheckbox all被全选了
			// 01 获取到所有的非allchekbox
			var boxs = document.querySelectorAll("input[type=checkbox]:not(#all)");
			// 选择到all checkbox
			var all = document.getElementById("all");
			boxs.forEach(function(item){
				// 当个checkbox 值发生变化时候
				item.onchange = function(){
					// 获取到所有被选中的checkbox;
					var sel = document.querySelectorAll("input[type=checkbox]:not(#all):checked");
					// 当选中的ckeckbox的长度等于 所有boxs长度
					if(sel.length==boxs.length){
						all.checked = true;
					}else{
						all.checked = false;
					}
					// 当checkbox被改变是计算总价
					 calcTotal();
				}
			})
			
			// 计算总价
			function calcTotal(){
				// 获取到sum
				var sum = document.getElementById("sum");
				var total = 0;//总价默认是0
				// 获取选中的ckeckbox
				var sel = document.querySelectorAll("input[type=checkbox]:not(#all):checked");
				sel.forEach(function(item){ //item就是当前选中的checkbox
					// 找到item对应的tr 
					var tr = item.parentElement.parentElement;
					// 找到tr对应的小计
					var sub = tr.querySelector("td:nth-of-type(5)");
					// 累加到total
					total+=sub.innerText*1;
				})
				// 在sum中显示出来
				sum.innerText = total;
				
				// 如果checked值true,找到当前行对应的小计
				// 把小计的值累加 并放入sum
			}
			 calcTotal(); //默认执行一次计算总价
			// 全选的
			function checkAll(){
				// 选择到全选的ckeckbox
				// var all = document.getElementById("all");
				// 选择到所有的input 属性为checkbox 不是all00000
				// var boxs = document.querySelectorAll("input[type=checkbox]:not(#all)");
				// 遍历boxs 更新每个checked值为all的checked值
				boxs.forEach(function(item){
					item.checked = all.checked;
				})
				// 全选也计算总价
				calcTotal();
				 
			}
			// 减
			function minus(btn){
				// 通过btn找到input
				var input = btn.nextElementSibling;
				// 把iput的值*1转换为数字再-1
				input.value = input.value*1-1;
				// 获取价格btn父节点是td,td的上一个兄弟节点是price对应td 获取price的文本
				var price = btn.parentElement.previousElementSibling.innerText*1;
				// 获取小计对应的节点
				var sub = btn.parentElement.nextElementSibling;
				// 小计的文本 = input的值*价格
				sub.innerText = input.value*price;
				// 减的时候计算总价
				 calcTotal();
				
			}
			// 加
			function add(btn){
				// 通过btn 找到input标签(btn的上一个兄弟节点);
				var input = btn.previousElementSibling;
				// 把input的值加1再赋值个input
				input.value = input.value*1+1;
				// 获取价格btn父节点是td,td的上一个兄弟节点是price对应td 获取price的文本
				var price = btn.parentElement.previousElementSibling.innerText*1;
				// 获取小计对应的节点
				var sub = btn.parentElement.nextElementSibling;
				// 小计的文本 = input的值*价格
				sub.innerText = input.value*price;
				// 加的时候计算总价
				 calcTotal();
			}
			// 删除
			function delRow(btn){
				// console.log("this实参,btn是形参",btn);
				// 通过btn找到 tr,删除tr;parent父;Element元素节点
				var tr = btn.parentElement.parentElement;
				tr.remove();
				// 删除时候计算总价
				 calcTotal();
			}
			
		</script>
	</body>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值