注
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>效果圖
