WebBasic07-JS
注
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>效果图
