Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

操作DOM表格

早些时候，HTML 还是以表格布局为主， 所以DOM操作表格是比较重要的一点

但是现如今 有其它的选择，所以表格的操作也就慢慢地淡出了人们的视线

所以这里也就不过多去详细展开，这里也就做一个简要地记录

我们知道 HTML  中表格由许多元素构成

所以为了方便我们的操作DOM为我们提供了一些属性和方法，以便我们更方便地构建一个表格

<table>元素

有以下方法及属性：

• caption：保存对<caption>的引用
• tBodies：<tbody>元素的 HTMLCollection 集合
• tFoot：对<tfoot> 元素的引用
• tHead：对<thead>元素的引用
• rows：表格中所有行元素的 HTMLCollection
• createTHead()：创建<thead>元素并返回引用
• createTFoot()：创建<tfoot>元素并返回引用
• createCaption()：创建<caption>元素返回引用
• deleteCaption()：删除caption
• deleteRow(n)：删除指定行
• insertRow(n）：指定位置插入行

<tr>元素有以下属性及方法：

• cells: 保存表格中单元格的 HTMLCollection
• deleteCell（n）:删除指定位置的单元格
• insertCell（n）： 向指定位置插入单元格

DOM动态集合

我们知道在DOM操作中一些方法获取的结果是动态的，也就是我们常说的动态方法，比如getElementsByTagName

有一些方法获取的结果又是静态的比如 querySelector

这两类方法的具体区别在于

DOM中提供了三种动态类型，而动态方法返回的也正是动态类型的集合

1.NodeList

2.NamedMap

3.HTMLCollection

以上三种都是动态的集合

也就是说每当文档发生改变时，这些集合也会随之改变，他们始终保持着与当前文档的一致

当我们实践时就需要注意这些动态方法，避免陷入死循环

如下方代码：

var div = document.getElementsByTagName("div");

for(let i = 0; i<div.length ; i++){
    document.body.appendChild(document.createElement("div"));
}

由于我们在循环体中不停地向Body插入div所以当每次我们将新创建的 div 插入文档时，div的length就会随之增加，所以会陷入死循环

所以我们在使用动态类型时需要十分的注意