摘要：DOM操作選擇元素的方法很多,可以通過(guò)CSS選擇器來(lái)選擇如:1. 通過(guò)id 2.通過(guò)class3.通過(guò)標(biāo)簽4.還可以通過(guò)name屬性等等,做了一個(gè)同步顯示form表單輸入的內(nèi)容小案例,來(lái)練習(xí)一下DOM的基本操作<!DOCTYPE html><html lang="en"><head><meta charset="UT
DOM操作選擇元素的方法很多,可以通過(guò)CSS選擇器來(lái)選擇
如:1. 通過(guò)id
2.通過(guò)class
3.通過(guò)標(biāo)簽
4.還可以通過(guò)name屬性
等等,
做了一個(gè)同步顯示form表單輸入的內(nèi)容小案例,來(lái)練習(xí)一下DOM的基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h3 {text-align: center;}
.form {width: 200px; height: 150px; border: 1px solid #ccc; margin: 20px auto;}
input {width: 200px; height: 50px;}
table {width: 420px; margin: 20px auto;}
table tr, th, td{border: 1px solid #ccc;}
p {text-align: center;}
</style>
</head>
<body>
<h3>請(qǐng)輸入:</h3>
<div class="form">
<form action="">
<input type="text" id="name" placeholder="請(qǐng)輸入物品名稱(chēng)" onkeyup="showName()">
<input type="text" id="price" placeholder="請(qǐng)輸入物品單價(jià)" onkeyup="showPrice()">
<input type="text" id="num" placeholder="請(qǐng)輸入物品數(shù)量" onkeyup="showNum()">
</form>
</div>
<h3>您輸入的信息如下:</h3>
<hr>
<table>
<thead>
<tr>
<th>品名</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>合計(jì)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"></td>
<td class="price"></td>
<td class="num"></td>
<td class="total"></td>
</tr>
</tbody>
</table>
<p>總計(jì):</p>
<script>
//同步顯示品名
function showName(){
var input = document.getElementById('name');
var td = document.getElementsByClassName('name')[0];
td.innerHTML = input.value;
}
//同步顯示單價(jià)
function showPrice(){
var input = document.getElementById('price');
var td = document.getElementsByClassName('price')[0];
td.innerHTML = input.value;
}
//同步顯示數(shù)量
function showNum(){
var input = document.getElementById('num');
var td = document.getElementsByClassName('num')[0];
td.innerHTML = input.value;
//計(jì)算合計(jì)金額
var price = document.getElementById('price').value;
var num = document.getElementById('num').value;
var total = price*num;
var td = document.getElementsByClassName('total')[0];
td.innerHTML = total+'元';
//計(jì)算總合計(jì)金額
var a = document.getElementsByTagName('p')[0];
a.innerHTML = '總共'+total+'元';
}
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-04-04 10:49:08
老師總結(jié)：這種方式獲取元素, 直觀方便,但也是有局限性的, 因?yàn)楂@取的是一個(gè)快照, 不能反映實(shí)時(shí)的dom變化