Dom中的节点都是对象，通过Tolist留言删除 、模拟数组数据填充到表格中俩个小案例，熟悉DOM操作，包括准确找到节点，父节点添加子节点，删除节点，创建节点，给节点添加文本子节点内容，获取子节点数，还有数组遍历方法forEach。
一、Tolist留言删除
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tolist添加和删除功能</title>
</head>
<body>
<!-- 留言板实现 添加删除功能 -->
<h3>留言板</h3>
<input type="text">
<ul></ul>
<!-- 通过js实现 -->
<script>
// 获取input节点
var comment = document.querySelector('input');
//获取节点ul
var ul = document.getElementsByTagName('ul')[0];
//自动获得焦点
comment.focus();
//给input添加按键按下的事件
comment.onkeydown=function (event) {
// 判断是不是按下的回车
// 添加删除功能 给li里面添加点击事件 然后调用del函数
if (event.keyCode === 13) {
// 创建一个li节点
var li = document.createElement('li');
// li节点下的文本内容就是input里的value属性值
li.innerHTML = comment.value + "<a href='javascript:;' onclick='del(this)'>删除</a>";
// 判断如果ul下为空li是第一条 那么就添加在ul下面否则就添加到li里的第一条
if (ul.childElementCount === 0) {
// 将li节点添加到ul下面
ul.appendChild(li);
// 留言成功后把input清空
comment.value = "";
} else {
// 获取到目前子节点的第一条
var first = ul.firstElementChild;
// 添加到现有子节点的前面
ul.insertBefore(li, first);
}
}
}
// 删除函数
function del(ele) {
// 先进性确认 确认返回true
if (confirm('是否删除')) {
// 要删除li 先调用li节点
var li = ele.parentNode;
//li采用 removechild要先找到上面的父节点在删除自己
li.parentNode.removeChild(li);
}
// 返回false初始化
return false;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、模拟数组数据填充到表格中
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js动态获取数据填入表格</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>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<table id="cart3">
<caption>购物车2</caption>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- js添加数据 -->
<script>
// 模拟一组数组数据
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];
// 数组遍历数据方法
date.forEach(function (value) {
// 创建tr
var tr = document.createElement('tr');
// 将数据添加到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添加子节点
tbody.appendChild(tr);
});
// 用另外一种方法
// 获取cart3
var cart3 = document.getElementById('cart3');
// 获取到tbody
var tbody = cart3.children[2];
// 用for循环遍历出数组下的三个对象值
for (var i=0;i<date.length;i++) {
// 通过循环分别创建一次相对应的tr
var tr = document.createElement('tr');
// 获取每个对象里的键组成新的数组，遍历这个数组通过键获取键值然后给到tr下
Object.keys(date[i]).forEach(function (key) {
tr.innerHTML += '<td>'+date[i][key]+'</td>';
// tbody添加子节点
tbody.appendChild(tr);
});
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、操作DOM的前提就是要找准节点，这里可以用标签（getElementsByTagName('a')[0]）、ID(getElementById（‘a’）)、class（getElementsByClassName('a')[0]）、表单中的name（getElementsByName('a')）以上都是可以动态实时反映变化；css获取时静态的（querySelector('h3')只返回第一个值，querySelectorAll（‘a’）【0】）
2、留言板功能实现主要时要找到ul节点然后创建li节点，通过将input的value值传递给li的子文本节点。删除功能中需要注意的是，但删除一个节点是可以通过parentNode找的父节点在删除子节点removeChild();功能——最后的留言在最前面的实现是，先判断如果ul下的节点数为0那么就用appendChild插入子节点，如果不为0那么就在第一个子元素（firstElement）前添加insertBefore.
3、把数组数据用js填入表格功能，首先要知道table自动生成tbody，要先找到table，然后他的第三个子元素tbody，然后是tbody下的tr；数组里面实际上是对象，通过forEsch（）方法遍历出来，然后调用里面的属性值得相应的数据，在填充到tr然后在添加到tbody
