JS 第六讲 DOM编程

DOM：Document Object Model 研究和操作整个页面 ，进行添加和删除，被看作是以树形结构，HTML根节点，元素节点(标签)，属性节点(标签与标签中间的内容)，注释节点

节点与节点之间层次关系：

1.父子节点：包含

2.同胞节点（兄弟）：平级

DOM方法：

1.添加购物车

            
            
            
            加入购物车
        
        

         

            

                
全选
                
商品名称
                
单价
                
数量
                
小计
                
操作
            
         

function addcart(){
        //获取商品信息
        var goodsname=document.getElementById("goodsname").value;
        var goodsprice=document.getElementById("goodsprice").value;
        var goodsnum=document.getElementById("goodsnum").value;
        //创建tr和td
        var tr=document.createElement("tr");
        var td1=document.createElement("td");
        td1.innerHTML=""
        var td2=document.createElement("td");
        td2.innerText=goodsname
        var td3=document.createElement("td");
        td3.innerText=goodsprice
        var td4=document.createElement("td");
        td4.innerHTML="-+"
        // td4.innerText=goodsnum
        var td5=document.createElement("td");
        td5.innerText=goodsprice*goodsnum
        var td6=document.createElement("td");
        td6.innerHTML=" 删除 "
        //3. td放到tr
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5); 
        tr.appendChild(td6);
        //4.将tr放到tdble里面
        var table=document.getElementsByTagName("table")[0];
        table.appendChild(tr)
    }
function del(obj){
        //1.点击删除a，实际删除tr tr是a的父节点的父节点
        if(confirm("确认删除"))
        obj.parentNode.parentNode.remove(); 
    }

第二种方式

    
        
        
    
    
        
        
        
        加入购物车 
        

        

            

                
全选
                
商品名称
                
单价
                
销量
                
小计
                
操作
            
        
    


 

计算小计

var goodsprice=obj.parentElement.previousElementSibling.innerText;
//计算小计 取得输入的价格 乘积写进加减按钮里跟随加减
            var subtotal=goodsprice*num;
            obj.parentElement.nextElementSibling.innerText=subtotal;

全选

function selectall(){
            //1.先寻找事件发生源
            //2.拿到所有的复选框
            var goodslist=document.getElementsByClassName("goods")
            //3.拿到全选框的值
            var selall=document.getElementById("selall")
            for(var i=goodslist.length-1;i>=0;i--){
                //第一种 if判断选框情况
                // if(goodslist[i].checked){
                //  goodslist[i].checked=false
                // }else{
                //  goodslist[i].checked=true
                // }
                //第二种 反选
               // goodsList[i].checked=!goodsList[i].checked
               //第三种 检查后实现
               goodslist[i].checked=selall.checked
            }
        }

删除选中

写个超链接 获取监听
function delsel(){
        var goodslist=document.getElementsByClassName("goods")
        for(var i=goodslist.length-1;i>=0;i--){
            if(goodslist[i].checked){
                goodslist[i].parentElement.parentElement.remove();
            }
        }
    }

计算总价

总价input里面放allprice"
复选框里放监听和goods类以此求总价
​
function allprice(){
        var sum=0;//求和
        var goodslist=document.getElementsByClassName("goods")
        //被选中的放到总价里
        for (var i=0;i 
第三节 JS中对象 
对象：一个具体的事物，里面有属性(静态特征)和方法(动态行为)
 
第一种:
var goods={
	'goodsid':1,
	'goodsname':"手机",
	'goodsprice':1999,
	openPhone:function(){}
}
第二种方式：
var goods=new Object();
goods.goodsid=1;
goods.goodsname="手机"

var goodslist=[	{"goodsid":1,"goodsname":"redmi","goodsprice":1999.9},	{"goodsid":2,"goodsname":"huawei","goodsprice":5999.9},
{"goodsid":1,"goodsname":"苹果","goodsprice":8999.9},
]