本文介绍了DOM编程中的Element对象常用属性和方法，如children、childElementCount等，并展示了如何使用JavaScript操作HTML表格，包括添加、删除和修改表格行和列的方法。通过实例代码，演示了如何动态地增删表格数据。
DOM树
document也是一个Element对象，它处于DOM树的最上级，也是HTML的父类
结构图如下
如图所示，document处于最上级，HTML是它的子类，而他又有head body等子类
Element常用属性
Element对象是HTML标签对象，也是一个节点Node对象，我们需要掌握它的常用属性
Element.children：可获得该元素中的所有子元素标签
Element.childElementCount:可获得元素中的子元素的个数
Element.firstElementChild:可获得第一个子元素
Element.lastElementChild：可获得最后一个子元素
Element.nextElementSibling:可获得i啊一个相邻元素
Element.previousElementSibling：可获得上一个是相邻元素
Element.parentElement：可获得父级元素
常用方法
document.createElement(TagName):根据标签名创建Element元素
Element.getAttribute:获取标签中的属性
Element.steAttribute：设置标签中的属性
Element.appendChild:在内容末尾添加节点
Element.after(Node):在节点后面添加节点
Element.before(Node):在节点前面添加节点
Element.cloneNode(Boolean)：复制节点，可选择是否复制子节点
Element.removeChild(Node)：移除子节点
Element.relaceChild(Node1,Node2)：替换子节点
使用JS操作表格
接下来给大家分享的是使用JS操作表格的方法
DOM结构中，table标签的子节点是tbady
table.rows：表格中的行集合
row.cells：一行中的列集合
table.insertRow(a):在表格中为i的位置插入一行
row.insertCell(a):在行为i的位置插入一列
table.deleteRow(a)：删除第第a行
这就是控制表格的基本方法了，接下来看代码进行实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
List item
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌</td>
<td>18.9</td>
<td>
<button>删除</button>
</td>
</tr>
</table>
<script>
var fn1=(status)=>{
//找到页面中所有的输入框（多选框）
//页面中拿元素: id,标签名，类名，名字
var is=document.getElementsByTagName("input")
//设置状态和status相同
for(let i of is){
i.checked=status
}
}
function load() {
//css选择器来选择元素
for(let i of document.querySelectorAll("td button")){
//i是表格中每一个按钮
i.onclick=del
}
}
function del() {
//找到tr
//this 谁调用了这个函数 this就是谁
var tr=this.parentElement.parentElement
//根据tr拿到父元素 根据父元素删除tr
//tr.parentElement.removeChild(tr)
//table.firstElementChild.removeChild(tr)
//去除该标签中的内容
//tr.innerHTML=""
tr.outerHTML=""
}
function delLast(){
if(table.rows.length>1)
table.deleteRow(-1)
}
function delAll() {
while(table.rows.length>1){
table.deleteRow(-1)
}
}
function addRow() {
var tr=table.insertRow()
var d1=tr.insertCell()
var d2=tr.insertCell()
var d3=tr.insertCell()
var d4=tr.insertCell()
//内容
d1.innerHTML='<input type="checkbox">'
d2.textContent="🍉🍉🍉🍉🍉"
d3.textContent="90.0"
d4.innerHTML="<button>删除</button>"
load()//重新给按钮设置点击事件
}
load()
</script>
<button onclick="delLast()">删除表格最后一行</button>
<button onclick="delAll()">删除表格所有数据</button>
<button onclick="addRow()">增加表格数据</button>
</body>
</html>
好了，今天的分享又要到此为止了，下期见
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
