abstrakt：DOM操作選擇元素的方法很多,可以通過CSS選擇器來選擇如:1. 通過id 2.通過class3.通過標簽4.還可以通過name屬性等等,做了一個同步顯示form表單輸入的內(nèi)容小案例,來練習一下DOM的基本操作<!DOCTYPE html><html lang="en"><head><meta charset="UT
DOM操作選擇元素的方法很多,可以通過CSS選擇器來選擇
如:1. 通過id
2.通過class
3.通過標簽
4.還可以通過name屬性
等等,
做了一個同步顯示form表單輸入的內(nèi)容小案例,來練習一下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>請輸入:</h3>
<div class="form">
<form action="">
<input type="text" id="name" placeholder="請輸入物品名稱" onkeyup="showName()">
<input type="text" id="price" placeholder="請輸入物品單價" onkeyup="showPrice()">
<input type="text" id="num" placeholder="請輸入物品數(shù)量" onkeyup="showNum()">
</form>
</div>
<h3>您輸入的信息如下:</h3>
<hr>
<table>
<thead>
<tr>
<th>品名</th>
<th>單價</th>
<th>數(shù)量</th>
<th>合計</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>總計:</p>
<script>
//同步顯示品名
function showName(){
var input = document.getElementById('name');
var td = document.getElementsByClassName('name')[0];
td.innerHTML = input.value;
}
//同步顯示單價
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;
//計算合計金額
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+'元';
//計算總合計金額
var a = document.getElementsByTagName('p')[0];
a.innerHTML = '總共'+total+'元';
}
</script>
</body>
</html>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-04-04 10:49:08
Zusammenfassung des Lehrers：這種方式獲取元素, 直觀方便,但也是有局限性的, 因為獲取的是一個快照, 不能反映實時的dom變化