本文共 1858 字，大约阅读时间需要 6 分钟。

目录

一、前言

上一篇介绍了DHTML对象_window_document的一些案例效果，详见可参考：由于篇幅过长打算在这篇博文继续整理一些案例

二、js代码实例演示

1、简易购物车01_数量变化

（1）实例代码

我们先来看看一个例子，如下代码：简易购物车01_数量变化.html

 	
   		
   
		
    
我的购物车
		
    
			     
      
				       
名称
				       
价格
				       
数量
				       
小计
			      
			      
				       
aaa
				       
10.00
				       
					
        																			
				       
10.00
			      
			      
				       
bbb
				       
20.00
				       
					
        																			
				       
20.00
			      
		     
    
	
   

接下来我们来看看 js 代码：简易购物车01.js

// 购物车某商品数量加1操作function add(btnObj){	//parentNode---父节点	//childNodes---所有的子节点，包括标签，还包括空	var nodes = btnObj.parentNode.childNodes;		//遍历所有节点	//如果节点的名称为"INPUT"，节点的类型为"text"	//那么获取此节点的value值，然后加1，赋值给它自己	for(var i=0;i
   
    =1){				n--;				nodes[i].value = n;			}		}			}}
   

（2）效果演示

用谷歌浏览器打开运行，效果如下：

此案例：主要演示一个简易购物车表格的建立，以及它的数量是可以变化的。下一个案例，我们将在它的基础上同步价格的变化，也是为了方便大家理解和查看，所以分开写成两个案例

2、简易购物车02_数量价格同步

（1）实例代码

我们先来看看一个例子，如下代码：简易购物车02_数量价格同步.html

 	
   		
   
		
    
我的购物车
		
    
			     
      
				       
名称
				       
价格
				       
数量
				       
小计
			      
			      
				       
aaa
				       
10.50
				       
					
        																			
				       
10.50
			      
			      
				       
bbb
				       
20.00
				       
					
        																			
				       
20.00
			      
		     
    
		总计：
    30.50	
   

接下来我们来看看 js 代码：简易购物车02.js

function add(btnObj){	var nodes = btnObj.parentNode.childNodes;		for(var i=0;i
   
    =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
   

（2）效果演示

用谷歌浏览器打开运行，效果如下：

转载地址：https://blog.csdn.net/YuDBL/article/details/104288762 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！