第七章 DOM 编程 ② 代码
1.节点操作 添加/删除元素 >0618 Noname2
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
#con{
width:500px;
height:500px;
border:2px solid red;
}
</style>
</head>
<body>
<input type="button" value="添加元素" id="btnAdd"/>
<input type="button" value="删除元素" id="btnRemove"/>
<hr/>
<div id="con">
</div>
<!--定义js代码块-->
<script type="text/javascript">
function addElement(){
//1.创建元素
var pObj = document.createElement("p");
pObj.innerHTML="今天天气好热<a href='http://www.baidu.com'>go</a>";
//2.将元素添加到div中
con.appendChild(pObj);
}
//删除元素
function removeElement(){
//1.获取到要删除的元素
var subObj = con.lastElementChild;
//2.删除
//通过父元素，删除子元素
//con.removeChild(subObj);
//通过元素自己删除自己
subObj.remove();
}
//js事件绑定
//绑定按钮的单击事件函数
btnAdd.onclick=addElement;
btnRemove.onclick=removeElement;
</script>
</body>
</html>
运行结果如下：
2.节点具有的属性
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
.xxx{
background-color:red;
}
</style>
</head>
<body>
<div id="con" >
<h1 id="title">这是一个标题</h1>
<span style="color:red">这是一个span</span>
<p>这是一个P</p>
这是div的内容
</div>
<script type="text/javascript">
//con.className="xxx";
alert(con.outerHTML);
//遍历div的子节点
//alert(con.childNodes);
//console.log(con.childNodes);
//con.childNodes.length:子节点的长度()
//alert(con.childNodes.length);
/*for(var i=0;i<con.childNodes.length;i++){
//获取当前遍历的节点
var n = con.childNodes[i];
alert(n.nodeType+" "+n.nodeName+" "+n.nodeValue);
}*/
//遍历div的子元素(html标签)
//alert(con.children.length);
/*for(var i=0;i<con.children.length;i++){
var n = con.children[i];
alert(n.nodeType+" "+n.nodeName+" "+n.nodeValue);
}*/
//通过div查找h1
//var f1 = con.firstElementChild;
//alert(f1.nodeType+" "+f1.nodeName+" "+f1.nodeValue);
//var f2 = con.firstChild;
//alert(f2.nodeType+" "+f2.nodeName+" "+f2.nodeValue);
</script>
</body>
</html>
运行结果如下：
3.常用查询节点方法
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<div class="x1">这是一个DIV1</div>
<div class="x2">这是一个DIV2</div>
<div class="x3" id="ddd">这是一个DIV3</div>
<p class="x1">这是P元素1</p>
<p class="x2">这是P元素2</p>
<p class="x3">这是P元素3</p>
<b class="x1">这是div下的一个b</b>
<span>
<b class="x1">这是span下的一个b</b>
</span>
<hr/>
你喜欢的水果
<input type="checkbox" name="hobby" value="苹果"/>苹果
<input type="checkbox" name="hobby" value="香蕉"/>香蕉
<input type="checkbox" name="hobby" value="橘子"/>橘子
<input type="checkbox" name="hobby" value="榴莲"/>榴莲
<script type="text/javascript">
//getElementsByTagName:根据标签名获取数组元素
/*var divAry = document.getElementsByTagName("div");
for(var i=0;i<divAry.length;i++){
alert(divAry[i].innerHTML);
}*/
//getElementsByClassName:根据类名获取元素数组
var clsAry = document.getElementsByClassName("x1");
//alert(clsAry.length)
//console.log(clsAry);
/*for(var i=0;i<clsAry.length;i++){
alert(clsAry[i].innerHTML);
}*/
//getElementsByName:根据name属性获取元素数组
//html Collection
/*var ckAry = document.getElementsByName("hobby");
for(var i=0;i<ckAry.length;i++){
//设置每个复选框选中
ckAry[i].checked = true;
}*/
//querySelector:根据css选择器(id,类,标签)获取单个元素
//var obj = document.querySelector(".x1");
//alert(obj.innerHTML);
//var obj = document.querySelector("#ddd");
//alert(obj.innerHTML);
//querySelector:根据css选择器(id,类,标签)获取元素数组
/*var objAry = document.querySelectorAll("div");*/
var objAry = document.querySelectorAll(".x2");
for(var i=0;i<objAry.length;i++){
alert(objAry[i].innerHTML);
}
/*for(var i in ckAry){
alert(i+" "+ckAry[i].value);
}*/
//var clsAry = [10,20,30];
//el:元素/数据 index:索引
/*clsAry.forEach(function(el,index){
alert(index+" : "+el)
})*/
</script>
</body>
</html>
运行结果如下：
4.案例演练 发表说说
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
fieldset{
width:600px;
height:300px;
border:2px solid gray;
margin:0px auto;
}
form{
text-align:center;
}
#con{
border:2px dashed gray;
margin:10px;
height:80%;
padding:3px;
overflow:auto;
}
#con p{
border:1px solid black;
position:relative;
}
#con p span:first-child{
background-color:#ff00cc;
}
#con p .close{
width:10px;
height:10px;
border:2px solid red;
border-radius:5px;
position:absolute;
top:-5px;
right:-5px;
background-color:orange;
text-align:center;
line-height:10px;
cursor:pointer;
}
</style>
</head>
<body>
<!--
发表说说:
1.写界面
2.实现功能
-->
<fieldset>
<legend>发表说说</legend>
<form>
姓名:
<input type="text" name="xm" id="xm"/>
内容:
<input type="text" name="msg" id="msg"/>
<input type="button" value="发送" id="btnSend"/>
</form>
<div id="con">
</div>
</fieldset>
<script type="text/javascript">
//绑定单击事件函数
btnSend.onclick=function(){
//alert(123);
//创建p元素
var pObj = document.createElement("p");
//创建内容元素
var spanXm = document.createElement("span");
spanXm.innerHTML=xm.value+" : ";
var spanMsg = document.createElement("span");
spanMsg.innerHTML=msg.value;
//删除按钮
var spanClose = document.createElement("span");
spanClose.innerText="x";
spanClose.className="close";
//绑定删除事件
spanClose.onclick=function(){
if(confirm("确定要删除么?")){
//删除自己的父元素
//alert(this.innerHTML);
//this.parentElement:找到父元素
//remove:删除自己
this.parentElement.remove();
}
}
//将内容添加到p中
pObj.appendChild(spanXm);
pObj.appendChild(spanMsg);
pObj.appendChild(spanClose);
//将p添加到div中
con.appendChild(pObj);
}
</script>
</body>
</html>
运行结果如下：
#pic_center
5.案例演练 购物车框架
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
#con{
width:800px;
height:400px;
margin:10px auto;
}
</style>
</head>
<body>
<!--创建购物车页面-->
<div id="con">
<fieldset>
<legend>商品信息</legend>
<form>
品名:
<input type="text" name="goodsName" id="goodsName"/>
单价:
<input type="text" name="goodsPrice" id="goodsPrice"/>
数量:
<input type="text" name="goodsQty" id="goodsQty"/>
<input type="button" value="添加" onclick="addGoods()"/>
</form>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" align="center" width="100%">
<thead>
<tr>
<th>全选<input type="checkbox" id="ckAll" name='ckAll'/></th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="ckgoods" name="ckgoods"/></td>
<td>方便面1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><input type="button" value="删除"/></td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script type="text/javascript">
</script>
</body>
</html>
运行结果如下：
6.购物车 完善了添加功能
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
#con{
width:800px;
height:400px;
margin:10px auto;
}
</style>
</head>
<body>
<!--创建购物车页面-->
<div id="con">
<fieldset>
<legend>商品信息</legend>
<form>
品名:
<input type="text" name="goodsName" id="goodsName"/>
单价:
<input type="text" name="goodsPrice" id="goodsPrice"/>
数量:
<input type="text" name="goodsQty" id="goodsQty"/>
<input type="button" value="添加" onclick="addGoods()"/>
</form>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" align="center" width="100%">
<thead>
<tr>
<th>全选<input type="checkbox" id="ckAll" name='ckAll'/></th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyObj">
<!--
<tr>
<td><input type="checkbox" id="ckgoods" name="ckgoods"/></td>
<td>方便面1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><input type="button" value="删除"/></td>
</tr>
-->
</tbody>
</table>
</fieldset>
</div>
<script type="text/javascript">
function addGoods(){
//拼接td字符串
var tds = "";
tds+="<td><input type='checkbox' id='ckgoods' name='ckgoods'/></td>";
tds+="<td>"+goodsName.value+"</td>";
tds+="<td>"+goodsPrice.value+"</td>";
tds+="<td>"+
"<input type='button' value='+' onclick='changeQty(this)'/>"+
"<input type='text' value='" +goodsQty.value+ "' onblur='changeQty(this)'/>"+
"<input type='button' value='-' onclick='changeQty(this)'/>"+
"</td>";
tds+="<td>"+(Number(goodsPrice.value)*Number(goodsQty.value))+"</td>";
tds+="<td><input type='button' value='删除'/></td>";
//创建tr元素
var trObj = document.createElement("tr");
//将td字符串设置到tr中
trObj.innerHTML=tds;
//将tr添加到tbody中
tbodyObj.appendChild(trObj);
}
function changeQty(obj){
alert(obj.type+" "+obj.value);
}
</script>
</body>
</html>
运行结果如下：
7.购物车 完善了删除/合并/求和
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
#con{
width:800px;
height:400px;
margin:10px auto;
}
</style>
</head>
<body>
<!--创建购物车页面-->
<div id="con">
<fieldset>
<legend>商品信息</legend>
<form>
品名:
<input type="text" name="goodsName" id="goodsName"/>
单价:
<input type="text" name="goodsPrice" id="goodsPrice"/>
数量:
<input type="text" name="goodsQty" id="goodsQty"/>
<input type="button" value="添加" onclick="addGoods()"/>
</form>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" align="center" width="100%">
<thead>
<tr>
<td colspan="6">
<input type="button" value="批量删除"/>
<input type="button" value="反选"/>
</td>
</tr>
<tr>
<th>全选<input type="checkbox" id="ckAll" name='ckAll'/></th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyObj">
<!--
<tr>
<td><input type="checkbox" class="ck" name="ckgoods"/></td>
<td>方便面1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><input type="button" value="删除"/></td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="6">
总计:<span id="totalAmount">0</span>元<br/>
选中商品总计:<span>0</span>元
</td>
</tr>
</tfoot>
</table>
</fieldset>
</div>
<script type="text/javascript">
function addGoods(){
//加入判重逻辑
//1.先查看购物车中，是否已经存在要添加的商品
//2.如果存在，则做数量累加，不添加新商品行
//2.如果不存在，则做之前的流程，添加新商品行
if(tbodyObj.children.length>0){
for(var i=0;i<tbodyObj.children.length;i++){
//获取遍历到的当前行
var tr = tbodyObj.children[i];
//判断当前行中的商品和要添加的商品是否重复
if(tr.children[1].innerText==goodsName.value){
//要添加的商品和购物车商品重复，做数量累加
//1.找到数量单元格中的文本框元素
var txt = tr.children[3].children[1];
//2.将文本框数量加上要添加的商品数量
txt.value = Number(txt.value)+Number(goodsQty.value);
//3.汇总小计:单价*数量
tr.children[4].innerText = Number(tr.children[2].innerText)*
Number(txt.value);
//4.汇总总计
sum();
return;
}
}
}
//拼接td字符串
var tds = "";
tds+="<td><input type='checkbox' id='ckgoods' name='ckgoods'/></td>";
tds+="<td>"+goodsName.value+"</td>";
tds+="<td>"+goodsPrice.value+"</td>";
//onblur:文本框失去焦点事件 onfocus:获取焦点事件
tds+="<td>"+
"<input type='button' value='+' onclick='changeQty(this)'/>"+
"<input type='text' value='" +goodsQty.value+ "' onblur='changeQty(this)' />"+
"<input type='button' value='-' onclick='changeQty(this)'/>"+
"</td>";
tds+="<td>"+(Number(goodsPrice.value)*Number(goodsQty.value))+"</td>";
tds+="<td><input type='button' value='删除' onclick='del(this)'/></td>";
//创建tr元素
var trObj = document.createElement("tr");
//将td字符串设置到tr中
trObj.innerHTML=tds;
//将tr添加到tbody中
tbodyObj.appendChild(trObj);
//汇总总计
sum()
}
/*
修改数量:
1.点击加号数量加1
2.点击减号数量减去1
a.当数量变为0的时候，记录自动删除
3.直接修改文本框中的数量
a.做校验,针对非数值做校验
4.修改完数量之后，要计算小计
5.修改数量之后，要汇总总计
*/
function changeQty(obj){
//alert(obj.type+" "+obj.value);
//数量
var qty;
//判断触发事件的元素对象是按钮还是文本框
if(obj.type=="button"){ //按钮
if(obj.value=="+"){
//让文本框的数量加1
obj.nextElementSibling.value++;
qty = Number(obj.nextElementSibling.value);
}else if(obj.value=="-"){
//让文本框的数量减去1
obj.previousElementSibling.value--;
qty = Number(obj.previousElementSibling.value);
//如果数量为0，删除当前行
if(qty==0){
del(obj);
}
}
}else if(obj.type=="text"){//文本框
//将文本框的数据转为数值
qty = Number(obj.value);
if(isNaN(qty)){
//obj.style.backgroundColor="red";
alert("输入的不是数字，请重新输入");
return; //结束方法执行
}
}
//计算小计
//找到小计单元格
var tdXJ = obj.parentElement.nextElementSibling;
//找到单价单元格
var tdPrice = obj.parentElement.previousElementSibling;
//小计=单价*数量
tdXJ.innerText = Number(tdPrice.innerText)*qty
//汇总总计
sum()
}
//删除商品行
//obj:减号,删除按钮
function del(obj){
if(obj.value=="删除"){
if(!confirm('确定要删除么?')){
return;
}
}
//根据触发事件的元素，找到tr，然后删除
obj.parentElement.parentElement.remove();
}
//汇总总计
function sum(){
//1.获取tbody中的所有数据行
if(tbodyObj.children.length==0){
//如果没有商品数据，则不做累计
return;
}
//总计变量
var total = 0;
//2.遍历商品行，累加小计单元格的值
for(var i=0;i<tbodyObj.children.length;i++){
//获取遍历到的当前行
var tr = tbodyObj.children[i];
//取出当前行的小计
var xj = Number(tr.children[4].innerText);
//累加小计
total+=xj;
}
//3.将累加结果设置到span中
totalAmount.innerText=total;
}
//扩展作业:
//1.全选
//2.反选
//3.批量删除
//4.汇总选中项商品总计
</script>
</body>
</html>
运行结果如下：
8.模板字符串 >0620 Noname1
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/html" id="mytemp">
本人XM,因为SQ,需要请假KSRQ到JSRQ，共TS天。望批准!
</script>
<script type="text/javascript">
//模板字符串
var str = mytemp.innerHTML;
//alert(str);
var str1 = str.replace("XM","张三")
.replace("SQ","周末出去耍")
.replace("KSRQ","2022-06-25")
.replace("JSRQ","2022-06-28")
.replace("TS","4");
document.write(str1);
document.write("<br/>");
var str2 = str.replace("XM","李四")
.replace("SQ","要去见女朋友")
.replace("KSRQ","2022-06-26")
.replace("JSRQ","2022-06-29")
.replace("TS","4");
document.write(str2);
</script>
</body>
</html>
运行结果如下：
9.案例演练 模板字符串 实现购物车添加功能
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
#con{
width:800px;
height:400px;
margin:10px auto;
}
</style>
</head>
<body>
<!--创建购物车页面-->
<div id="con">
<fieldset>
<legend>商品信息</legend>
<form>
品名:
<input type="text" name="goodsName" id="goodsName"/>
单价:
<input type="text" name="goodsPrice" id="goodsPrice"/>
数量:
<input type="text" name="goodsQty" id="goodsQty"/>
<input type="button" value="添加" onclick="addGoods()"/>
</form>
</fieldset>
<fieldset>
<legend>购物车</legend>
<table border="1" align="center" width="100%">
<thead>
<tr>
<th>全选<input type="checkbox" id="ckAll" name='ckAll'/></th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyObj">
<!--
<tr>
<td><input type="checkbox" id="ckgoods" name="ckgoods"/></td>
<td>方便面1</td>
<td>2</td>
<td>3</td>
<td>6</td>
<td><input type="button" value="删除"/></td>
</tr>
-->
</tbody>
<tfoot>
<tr>
<td colspan="6">
总计:<span id="totalAmount">0</span>元
</td>
</tr>
</tfoot>
</table>
</fieldset>
</div>
<script type="text/html" id="tdTemp">
<td><input type="checkbox" name="ckgoods"/></td>
<td>{SPM}</td>
<td>{DJ}</td>
<td>
<input type="button" value="+" onclick="changeQty(this)"/>
<input type="text" value="{SL}" onclick="changeQty(this)"/>
<input type="button" value="-" onclick="changeQty(this)"/>
</td>
<td>{XJ}</td>
<td><input type="button" value="删除"/></td>
</script>
<script type="text/javascript">
function addGoods(){
//拼接td字符串
var tds = tdTemp.innerHTML.replace("{SPM}",goodsName.value)
.replace("{DJ}",goodsPrice.value)
.replace("{SL}",goodsQty.value)
.replace("{XJ}",Number(goodsQty.value)*Number(goodsPrice.value))
//创建tr元素
var trObj = document.createElement("tr");
//将td字符串设置到tr中
trObj.innerHTML=tds;
//将tr添加到tbody中
tbodyObj.appendChild(trObj);
}
</script>
</body>
</html>
运行结果如下：
10.js对象,json对象,json字符串
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//格式:
//{属性1:值1,属性2:值2,...,方法名:function(){}}
//1.以键值对(属性值)的方式定义数据，属性和值用冒号分隔，多个属性用逗号分隔
//2.属性不用加引号
//3.可以定义函数
//js对象/javascript对象
var stu = {
name:"张三",
age:20,
tall:1.7,
sex:"男",
introduce:function(){
alert(this.name+" "+this.age+" "+this.tall+" "+this.sex);
}
};
//alert(typeof stu);
//使用.操作符访问对象属性
//alert(stu.name+" "+stu.age);
//也可以通过[]访问对象属性
//alert(stu["name"]+" "+stu["sex"])
//通过对象调用函数
//stu.introduce();
//json对象
//1.以键值对(属性值)的方式定义数据，属性和值用冒号分隔，多个属性用逗号分隔
//2.属性名必须用双引号括起来，如果是字符串用(单/双)引号括起来
//3.不能定义函数
var people = {
"name":"李四",
"age":20,
"sex":"女",
"tall":1.6
}
//用.访问属性
//alert(people.name+" "+people.age);
//用[]访问属性
//alert(people["name"]+" "+people["tall"]);
//json字符串
//1.就是内容是json对象格式的字符串数据
//2.无法通过字符串对象直接访问其中的属性
//3.需要将json字符串转为json对象之后，才能以json对象的方式访问其中的属性
//4.如果要发送数据给其他系统可以将json对象转为json字符串
var car = '{"brand":"宝马","price":200}';
//alert(typeof car);
//将json字符串转为json对象: JSON.parse(json字符串)
//一般在服务器将字符串数据传给浏览器后，在浏览器要做这个转换
//var carObj = JSON.parse(car);
//alert(typeof carObj)
//alert(carObj.brand+" "+carObj.price);
//将json对象转为json字符串: JSON.stringify(json对象)
var goods = {"goodsId":1001,"goodsName":"方便面","price":2.5};
var str = JSON.stringify(goods);
alert(typeof str);
alert(str);
</script>
</body>
</html>
运行结果如下：
案例演练 json对象数组 ，扩展购物车功能
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<!--商品列表-->
<table id="goodsListTable" width="500" align="center" border="1">
<thead>
<tr>
<th>编号</th>
<th>名字</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyGoodsList">
</tbody>
</table>
<hr/>
<!--商品购物车-->
<table id="goodsCart" width="500" align="center" border="1">
<thead>
<tr>
<th>全选<input type="checkbox" id="ckAll"/></th>
<th>名字</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyGoodsCart">
</tbody>
</table>
<!--商品列表的行字符串-->
<script type="text/html" id="goodsListTemp">
<td>{goodsId}</td>
<td>{goodsName}</td>
<td>{goodsPrice}</td>
<td><input type="button" value="添加" onclick="addGoods(this)"/></td>
</script>
<script type="text/javascript">
//定义商品的json数组
var goodsList = [
{"goodsId":1001,"goodsName":"苹果","goodsPrice":3.5},
{"goodsId":1002,"goodsName":"香蕉","goodsPrice":4.5},
{"goodsId":1003,"goodsName":"葡萄","goodsPrice":5}
]
//生成商品列表
function renderGoodsList(){
//遍历json数组
for(var i=0;i<goodsList.length;i++){
var g = goodsList[i];
//用模板方式拼接td字符串
var tdstr = goodsListTemp.innerHTML.replace("{goodsId}",g.goodsId)
.replace("{goodsName}",g.goodsName)
.replace("{goodsPrice}",g.goodsPrice);
//创建tr
var tr = document.createElement("tr");
tr.innerHTML=tdstr;
//将tr添加到tbody中
tbodyGoodsList.appendChild(tr);
}
}
//根据点击的按钮,添加列表中的商品，到购物车表格
function addGoods(btnObj){
//通过按钮对象找到名字，价格的内容。然后拼接成购物车的数据行，添加到购物车的表格中
//btnObj.parentElement.parentElement;
}
//页面加载完成，调用渲染方法
window.onload=renderGoodsList;
</script>
</body>
</html>
运行结果如下：
模板
图片、代码的路径如下如所示：
代码如下：
// A code block
var foo = 'bar';
运行结果如下：
#pic_center
扫一扫
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
