DOM:document object model(文档对象模型)
parentnode:返回节点的父节点
first child:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
last child:返回节点的最后一个子节点
nextsibling:下一个节点
previousibing:上一个节点
firstElementChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild:返回节点的最后一个子节点
nextElementSibling:下一个节点
previousElementSibling:上一个节点
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问当当购物车页面节点</title>
<link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<style>
body,ul,li,div,p,h1,h2,ol {
margin: 0;
padding: 0;
}
ul,li,ol{
list-style: none;
}
.content{
width: 810px;
margin: 0 auto;
font-family: "微软雅黑";
}
.logo{
margin: 10px 0;
}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
background: url("../images/shoppingBg.jpg") no-repeat;
height: 414px;
overflow: hidden;
}
.cartList ul{
float: right;
width: 450px;
}
.cartList ul:nth-of-type(1){
margin-top: 125px;
}
.cartList ul:nth-of-type(2){
margin-top:70px;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
float: left;
}
.cartList ul li input[name="price"]{
border: none;
background: transparent;
width: 45px;
text-align: center;
}
.cartList ul li input[name="amount"]{
width: 45px;
text-align: center;
border: 1px solid #999999;
border-left: none;
border-right: none;
height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
height: 25px;
border: 1px #999999 solid;
width: 25px;
text-align: