注
onmouseover是鼠标悬停事件
onmouseout是鼠标离开事件
onchange:值改变时触发事件
document(window对象中一个重要的对象)
DOM节点树
- DOM:文档对象模型,DOM节点树,DOM操作
- 读取,修改
1)节点信息
*节点名称: nodeName
*节点类型: nodeType
2)元素节点的内容
*innerText:设置或获取位于对象起始和结束标签内的文本
*innerHTML:设置或获取位于对象起始和结束标签内的HTML
3)节点属性
*getAttribute();根据属性名获取属性的值
*setAttribute(); 根据属性名修改属性值
*removeAttribute();根据属性名删除属性
*简单版获取节点属性:语法 节点.属性 其中特殊的是 节点.className - 查询
1)根据id查询: document.getElementById(“id名”);
2)根据标签名称查询:
*document.getElementsByTagName(标签名);在此文档下查询所有满足这个标签名的节点
*父亲.getElementsByTagName(标签名);在父亲下查询所有满足这个标签名的节点
3)根据name属性查询: document.getElementsByName(“name名”);通常用来获取表单控件
4)根据class属性查询: document.getElementsByClassName(“class名”)
5)根据层次(节点关系)查询:
*查父亲: parentNode
*查孩子:childNodes //也会查到换行或者空格 children //不带空格或者换行(新浏览器支持)
*查哥哥:previousElementSibling
*查弟弟:nextElementSibling
*查任意的兄弟:节点.父亲.孩子[n] parentNode.children[3] - 增加
1)创建新节点: document.createElement(elementName);
*返回新创建的节点
*elementName:要创建的元素标签名称
*新节点. innerHTML/innerText 往新节点中写入内容
2)添加新节点:
*父节点.appendChild(新子节点):新节点作为父节点的最后一个元素添加
*父节点.insertBefore(新子节点,旧子节点):新节点插入进旧子节点之前 - 删除
1)父节点删子节点: 父节点.removeChild(子节点)
2)自己删自己:子节点.parentNode.removeChild(子节点)
3)节点.remove();删除本身(新浏览器支持)
小练习
简单购物车
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script>
//加入购物车
//调用此函数时传入了this(按钮对象即DOM节点)
//arguments[0]->this或者是声明参数来接收this的值
//注意:参数名不能是关键字this
function add_shoppingcart(btn){
//利用父子关系导航到tr节点
var tr=btn.parentNode.parentNode;
//找到tr节点中的全部td子元素
var tds=tr.getElementsByTagName("td"); //tds=tr.children;->此方法只有最新的浏览器支持
//获取商品名及价格
var name=tds[0].innerHTML;
var price=parseFloat(tds[1].innerHTML);
//为购物车创建新的商品行
var newTr=document.createElement("tr");
newTr.innerHTML="<td>"+name+"</td>"+"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='-' onclick='cut(this);'/> "+
"<input type='text' size='2' readonly value='1'/> "+
"<input type='button' value='+' onclick='add(this);'/> "+
"</td>"+"<td>80</td>"+
"<td align='center'>"+
"<input type='button' value='x' onclick='del(this);'/>"
"</td>";
//找到tbody节点
var tbody=document.getElementById("goods");
//追加元素
tbody.appendChild(newTr);
//计算并且更新购物车全部商品的金额和总计
sum();
}
/*
*声明一个计算总计的算法
*/
function sum(){
//计算每件商品的总金额,更新金额列
var tbody=document.getElementById("goods")
//获取所有行
var trs=tbody.getElementsByTagName("tr");
var sum=0;
//遍历每一行
for(var i=0;i<trs.length;i++){
//获取所有列
var tr=trs[i];
var tds=tr.getElementsByTagName("td");
//获取单价
var price=parseFloat(tds[1].innerHTML);
//获取数量
var qty=parseFloat(tds[2].getElementsByTagName("input")[1].value);
//计算每件商品总金额
n=price*qty;
sum+=n;
tds[3].innerHTML=n;
}
//计算所有商品的总计,更新总计列
var total=document.getElementById("total");
total.innerHTML=sum;
}
/*
*删除按钮的方法
*/
function del(btn){
var tr=btn.parentNode.parentNode;
//console.log(tr);
var tbody=tr.parentNode;
//console.log(tbody);
tbody.removeChild(tr);
sum();
}
/*
*+号按钮的方法
*/
function add(btn){
//找到td及其所有的孩子
var td=btn.parentNode;
var inputs=td.getElementsByTagName("input");
//获取数量
var qty=parseInt(inputs[1].value);
//给数量+1
qty++;
//写入新数量
inputs[1].value=qty;
//重新计算
sum();
}
/*
*-号按钮的方法
*/
function cut(btn){
var td=btn.parentNode;
var inputs=td.getElementsByTagName("input");
var qty=parseInt(inputs[1].value);
qty--;
if(qty<=0){return;}
inputs[1].value=qty;
sum();
}
</script>
</head>
<body>
<h1>真划算</h1>
<table>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th>操作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>893</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
<!-- 插入新tr元素 -->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>效果图
