目录
一、前言
上一篇介绍了DHTML对象_window_document的一些案例效果，详见可参考：web快速入门之基础篇-js：3_2、DHTML对象_window_document（案例效果演示）由于篇幅过长打算在这篇博文继续整理一些案例
二、js代码实例演示
1、简易购物车01_数量变化
（1）实例代码
我们先来看看一个例子，如下代码：简易购物车01_数量变化.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="简易购物车01.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<h1>我的购物车</h1>
<table border="1">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>aaa</td>
<td>10.00</td>
<td>
<!-- this指向本元素对象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>10.00</td>
</tr>
<tr>
<td>bbb</td>
<td>20.00</td>
<td>
<!-- this指向本元素对象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>20.00</td>
</tr>
</table>
</form>
</body>
</html>
接下来我们来看看 js 代码：简易购物车01.js
// 购物车某商品数量加1操作
function add(btnObj){
//parentNode---父节点
//childNodes---所有的子节点，包括标签，还包括空
var nodes = btnObj.parentNode.childNodes;
//遍历所有节点
//如果节点的名称为"INPUT"，节点的类型为"text"
//那么获取此节点的value值，然后加1，赋值给它自己
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
//错误：var str = document.getElementById();
var str = nodes[i].value;
var n = parseInt(str);
n++;
nodes[i].value = n;
}
}
}
//购物车某商品数量减1操作
function sub(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0; i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
var str = nodes[i].value;
var n =parseInt(str);
if(n>=1){
n--;
nodes[i].value = n;
}
}
}
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
此案例：主要演示一个简易购物车表格的建立，以及它的数量是可以变化的。下一个案例，我们将在它的基础上同步价格的变化，也是为了方便大家理解和查看，所以分开写成两个案例
2、简易购物车02_数量价格同步
（1）实例代码
我们先来看看一个例子，如下代码：简易购物车02_数量价格同步.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="简易购物车02.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<h1>我的购物车</h1>
<table border="1" id="shoppingCart">
<tr>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>aaa</td>
<td>10.50</td>
<td>
<!-- this指向本元素对象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>10.50</td>
</tr>
<tr>
<td>bbb</td>
<td>20.00</td>
<td>
<!-- this指向本元素对象 -->
<input type="button" value="-" οnclick="sub(this);" />
<input type="text" value="1" />
<input type="button" value="+" οnclick="add(this);" />
</td>
<td>20.00</td>
</tr>
</table>
总计：<span id="sum">30.50</span>
</form>
</body>
</html>
接下来我们来看看 js 代码：简易购物车02.js
function add(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
//错误：var str = document.getElementById();
var str = nodes[i].value;
var n = parseInt(str);
n++;
nodes[i].value = n;
}
}
calTotal();
}
function sub(btnObj){
var nodes = btnObj.parentNode.childNodes;
for(var i=0; i<nodes.length;i++){
if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text"){
var str = nodes[i].value;
var n =parseInt(str);
if(n>=1){
n--;
nodes[i].value = n;
}
}
}
calTotal();
}
//计算价格
function calTotal(){
//getElementById---精确的查询单个元素对象，适用于元素已知
var table = document.getElementById("shoppingCart");
//document.getElementsByTagName("input")---元素节点的数组，用于查询某种标签
//obj.getElementsByTagName("input")---在obj的范围里进行查找
var rows = table.getElementsByTagName("tr");
var total = 0;
//for循环从下标1开始，第一行表头为下标为0，以此可过滤掉
for(var i=1;i<rows.length;i++){
var curRow = rows[i];
//价格值
var price = parseFloat(curRow.getElementsByTagName("td")[1].innerHTML);
//数量值
var q = parseInt(curRow.getElementsByTagName("td")[2].getElementsByTagName("input")[1].value);
//当前某商品总价
var sum = price*q;
//toFixed方法可把 Number 四舍五入为指定小数位数的数字
//这里是保留小数后2位
curRow.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
//每次循环进行累加
total +=sum;
}
document.getElementById("sum").innerHTML = total.toFixed(2);
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
