收藏
批改狀態(tài)：合格
老師批語：
Dom中的節(jié)點(diǎn)都是對象，通過Tolist留言刪除 、模擬數(shù)組數(shù)據(jù)填充到表格中倆個小案例，熟悉DOM操作，包括準(zhǔn)確找到節(jié)點(diǎn)，父節(jié)點(diǎn)添加子節(jié)點(diǎn)，刪除節(jié)點(diǎn)，創(chuàng)建節(jié)點(diǎn)，給節(jié)點(diǎn)添加文本子節(jié)點(diǎn)內(nèi)容，獲取子節(jié)點(diǎn)數(shù)，還有數(shù)組遍歷方法forEach。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tolist添加和刪除功能</title>
</head>
<body>
<!-- 留言板實(shí)現(xiàn) 添加刪除功能 -->
<h3>留言板</h3>
<input type="text">
<ul></ul>
<!-- 通過js實(shí)現(xiàn) -->
<script>
// 獲取input節(jié)點(diǎn)
var comment = document.querySelector('input');
//獲取節(jié)點(diǎn)ul
var ul = document.getElementsByTagName('ul')[0];
//自動獲得焦點(diǎn)
comment.focus();
//給input添加按鍵按下的事件
comment.onkeydown=function (event) {
// 判斷是不是按下的回車
// 添加刪除功能 給li里面添加點(diǎn)擊事件 然后調(diào)用del函數(shù)
if (event.keyCode === 13) {
// 創(chuàng)建一個li節(jié)點(diǎn)
var li = document.createElement('li');
// li節(jié)點(diǎn)下的文本內(nèi)容就是input里的value屬性值
li.innerHTML = comment.value + "<a href='javascript:;' onclick='del(this)'>刪除</a>";
// 判斷如果ul下為空li是第一條 那么就添加在ul下面否則就添加到li里的第一條
if (ul.childElementCount === 0) {
// 將li節(jié)點(diǎn)添加到ul下面
ul.appendChild(li);
// 留言成功后把input清空
comment.value = "";
} else {
// 獲取到目前子節(jié)點(diǎn)的第一條
var first = ul.firstElementChild;
// 添加到現(xiàn)有子節(jié)點(diǎn)的前面
ul.insertBefore(li, first);
}
}
}
// 刪除函數(shù)
function del(ele) {
// 先進(jìn)性確認(rèn) 確認(rèn)返回true
if (confirm('是否刪除')) {
// 要刪除li 先調(diào)用li節(jié)點(diǎn)
var li = ele.parentNode;
//li采用 removechild要先找到上面的父節(jié)點(diǎn)在刪除自己
li.parentNode.removeChild(li);
}
// 返回false初始化
return false;
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js動態(tài)獲取數(shù)據(jù)填入表格</title>
<style>
table,th,td{
border: 1px solid #666;
}
table {
width: 500px;
text-align: center;
border-collapse: collapse;
}
table caption {
font-size: 1.2rem;
margin-bottom: 15px;
}
/* 這里必須在nth-of-type(1)前添加父元素,否則thead,tbody中的第一行都會生效 */
thead tr:nth-of-type(1) {
background-color: lightblue;
}
</style>
</head>
<body>
<table id="cart2">
<caption>購物車2</caption>
<thead>
<tr>
<th>編號</th>
<th>品名</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<table id="cart3">
<caption>購物車2</caption>
<thead>
<tr>
<th>編號</th>
<th>品名</th>
<th>數(shù)量</th>
<th>單價(jià)</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- js添加數(shù)據(jù) -->
<script>
// 模擬一組數(shù)組數(shù)據(jù)
var date = [
{id: 1, name: '牛奶', count: 3, price: 50},
{id: 2, name: '蘋果', count: 10, price: 80},
{id: 3, name: '衣服', count: 2, price: 600}
];
// 獲取cart2
var cart2 = document.getElementById('cart2');
// 獲取到tbody
var tbody = cart2.children[2];
// 數(shù)組遍歷數(shù)據(jù)方法
date.forEach(function (value) {
// 創(chuàng)建tr
var tr = document.createElement('tr');
// 將數(shù)據(jù)添加到tr里面
tr.innerHTML = '<td>'+value.id+'</td>';
tr.innerHTML += '<td>'+value.name+'</td>';
tr.innerHTML += '<td>'+value.count+'</td>';
tr.innerHTML += '<td>'+value.price+'</td>';
// tbody添加子節(jié)點(diǎn)
tbody.appendChild(tr);
});
// 用另外一種方法
// 獲取cart3
var cart3 = document.getElementById('cart3');
// 獲取到tbody
var tbody = cart3.children[2];
// 用for循環(huán)遍歷出數(shù)組下的三個對象值
for (var i=0;i<date.length;i++) {
// 通過循環(huán)分別創(chuàng)建一次相對應(yīng)的tr
var tr = document.createElement('tr');
// 獲取每個對象里的鍵組成新的數(shù)組，遍歷這個數(shù)組通過鍵獲取鍵值然后給到tr下
Object.keys(date[i]).forEach(function (key) {
tr.innerHTML += '<td>'+date[i][key]+'</td>';
// tbody添加子節(jié)點(diǎn)
tbody.appendChild(tr);
});
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)：
1、操作DOM的前提就是要找準(zhǔn)節(jié)點(diǎn)，這里可以用標(biāo)簽（getElementsByTagName('a')[0]）、ID(getElementById（‘a(chǎn)’）)、class（getElementsByClassName('a')[0]）、表單中的name（getElementsByName('a')）以上都是可以動態(tài)實(shí)時反映變化；css獲取時靜態(tài)的（querySelector('h3')只返回第一個值，querySelectorAll（‘a(chǎn)’）【0】）
2、留言板功能實(shí)現(xiàn)主要時要找到ul節(jié)點(diǎn)然后創(chuàng)建li節(jié)點(diǎn)，通過將input的value值傳遞給li的子文本節(jié)點(diǎn)。刪除功能中需要注意的是，但刪除一個節(jié)點(diǎn)是可以通過parentNode找的父節(jié)點(diǎn)在刪除子節(jié)點(diǎn)removeChild();功能——最后的留言在最前面的實(shí)現(xiàn)是，先判斷如果ul下的節(jié)點(diǎn)數(shù)為0那么就用appendChild插入子節(jié)點(diǎn)，如果不為0那么就在第一個子元素（firstElement）前添加insertBefore.
3、把數(shù)組數(shù)據(jù)用js填入表格功能，首先要知道table自動生成tbody，要先找到table，然后他的第三個子元素tbody，然后是tbody下的tr；數(shù)組里面實(shí)際上是對象，通過forEsch（）方法遍歷出來，然后調(diào)用里面的屬性值得相應(yīng)的數(shù)據(jù)，在填充到tr然后在添加到tbody
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號