六、JS操作节点

一、本课目标

• 熟练使用JS操作DOM节点：能够熟练的进行节点的创建、添加、删除、替换等；能够熟练的设置元素的样式

二、节点信息

image.png

示例代码：

    
    


nodeName
nodeValue
nodeType

运行结果：

image.png

此时修改一下代码如下：

    
    



    
nodeName
nodeValue
nodeType

三、操作节点

image.png

3.1操作节点属性

语法：

getAttribute("属性名")
setAttribute("属性名", "属性值")

示例代码：

    
    
    



    选择你喜欢的书：
    我和狗狗一起活下来
    灰霾来了怎么办


    

3.2创建和插入节点

image.png

示例代码：

    
    
    


选择你喜欢的书：我和狗狗一起活下来 灰霾来了怎么办

3.3删除和替换节点

这两种都是通过父节点来进行操作的

image.png

示例代码：

3.4操作节点样式

改变样式的属性思路：

• 改变style属性
• 改变className属性

1、style属性

语法示例：

image.png

可修改的属性：

image.png

修改属性的触发事件：

image.png

2、className属性

image.png

示例代码：

    
    
    



    
我的购物车1
    

        
最新加入的商品
        

            

            
倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）
            
¥558.00×1
删除
        
        
共1件商品共计¥558.00 去购物车
    

CSS样式：

*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}
ul,li{list-style: none;}
#shopping{margin: 20px auto 0 auto; width: 320px;
}
#cart{
    background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;
    border: solid 1px #dcdcdc;
    float: right;
    width: 100px;
    height: 28px;
    padding-left: 45px;
    line-height: 28px;
    position: relative;
    cursor: pointer;
}
#cart span{
    position: absolute;
    color: #fff;
    background: #dc1742;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top:-5px;
    right: 20px;
    font-size: 8px;
    line-height: 15px;
    text-align: center;
}
#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}
#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}
#cartList li{float: left;}
#cartList li:nth-of-type(1){width: 65px; text-align: center;}
#cartList li:nth-of-type(2){width: 155px;}
#cartList li:nth-of-type(3){text-align: center; width: 85px;}
#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0  5px;}
#cartList .footer span{padding: 0 12px;}
#cartList .footer span:nth-of-type(2){
    color: #fff;
    background: #dc1742;
    display: block;
    height: 25px;
    border-radius: 6px;
    float: right;
    text-align: center;
    font-weight: bold;
    margin-top: 5px;
}

#shopping .cartOver{
    background-color: #ffffff;
    z-index: 100;
    border-bottom: none;
}
#shopping .cartListOver{
    display:block;
    position:relative;
    top:-1px;
}
#shopping .cartOut{
    background-color:#f9f9f9;
    border-bottom:solid 1px #dcdcdc;
}
#shopping .cartListOut{
    display:none;
}

这两种思路一个是选中了之后直接在js里面改样式，一个是选中了之后，调用css文件里面的其他样式。推荐第二种。

3.5获取元素的样式

image.png

只能获取内联样式表的属性值，无法获取到内部样式表或外部样式表的属性值。但是在实际工作当中，通常样式和内容是分离的，所以在实际的工作当中，不能使用上面这种方式来获取元素样式。可以使用下面这种方式来获取样式：

但是上面这种方式在IE中是不兼容的，在IE中要使用如下的方式：

image.png

四、总结

image.png