2018-12-26

10.2.3 操作表格

<table>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须设计表示表格行、单位格、表头等方面的标签。

<table>
    <tbody>
            <tr>
                  <td>cell 1,1</td>
                  <td>cell 2,1</td>
            </tr>
            <tr>
                  <td>cell 1,2</td>
                  <td>cell 2,2</td>
            </tr>
    </tbody>
</table>

由于涉及的标签多，使用核心DOM方法创建这些元素，得写很多代码：

//创建table
var table = document.createElement("table");
table.border=1;
table.width = "100%";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell_1=document.createElement("td");
cell_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(Cell1_1);
var cell2_2=document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_2);

//将表格添加到文档主体中
document.body.appendChild(table);

为了方便构建表格，HTMLDOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法

为<table>元素添加的属性和方法：
◆ caption：保存着对<caption>元素的指针（如果有的话）
◆ tBodies：是一个<tbody>元素的HTMLCollection
◆ tFoot：保存着对<tfoot>元素的指针
◆ tHead：保存着对<thead>元素的指针
◆ rows：是一个表格中所有行的HTMLCollection
◆ createTHead()：创建<thead>元素，将其放在表格中，返回调用。
◆ createTFoot()：创建<tfoot>元素。
◆ createCaption()：创建<caption>元素，将其放到表格中，返回引用。
◆ deleteTHead()：删除<thead>元素
◆ deleteTFoot()：删除<tfoot>元素
◆ deleteCaption()：删除<caption>元素
◆ deleteRow（pos）：删除指定位置的行
◆ insertRow(pos)：向rows集合中的指定位置插入一行

为<tbody>元素添加的属性和方法如下：
◆ rows：保存着<tbody>元素中行的HTMLCollextion
◆ deleteRow（pos）：删除指定位置的行。
◆ insertRow（pos）：向rows集合中的指定位置插入一行，返回对新插入行的引用。

为<tr>元素添加的属性和方法：
◆ cells：保存着<tr>元素中单元格的HTMLCollection。
◆ deleteCell（pos）：删除指定位置的单元格。
◆ inserCell（pos）：向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。

使用以上的这些属性和方法，可以极大的减少创建表格所需的代码数量：

//创建table
var table=document.createElement('table');
table.border=1;
table.width="100%";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
tbody.inserRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//创建第二行
tbody.inserRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中
document.body.appendChild(table);

10.2.4 使用NodeList

NodeList及其“近亲”NameNodeMap和HTMLCollection，是从整体上透彻理解DOM的关键所在。
这三个集合都是“动态的”；就是说每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息

本质上来说，所有NodeList对象都是在访问DOM文档时实时运行的查询，下面代码会导致无限循环：

var divs = document.getElementByTagName("div"),//取得文档中所有<div>元素的HTMLCollection
//只要有新的<div>元素被添加到页面中，这个元素也会被添加到该集合中
      i,
      div;

for(i=0;i<divs.length;i++){
      div = document.createElement("div");
      document.body.appendChild(div);
}
//每次循环都要对条件i<divs.length求值，意味着会运行取得所有<div>元素的查询
//循环体每次都会创建一个新<div>元素并将其添加到文档中，因此divs.length的值在每次循环后都会递增。
//i和length每次都会同事递增，结果他们的值永远也不会相等。

浏览器不会将创建的 所有集合都保存在一个列表中，而是在下一次访问时再更新集合。

如果想要迭代一个NodeList，最好是使用length属性初始化第二个变化，然后将迭代器与该变量进行比较：

var divs = document.getElementByTagName("div"),
      i,
      len,//len中保存着对divs.length在循环开始时的一个快照，因此能避免无限循环问题
      div;

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

一般来说，尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以，可以考虑将从NodeList中取得的值缓存起来。

10.3 小结

DOM是语言中立的API，用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档形象看作一个层次化的节点树，可以使用Javascript来操作这个节点树，进而改变底层文档的外观和结构。

DOM由各种节点构成：
◆ 最基本的节点类型是Node，用于抽象的表示文档中一个独立的部分；所有其他类型都继承自Node
◆ Document类型表示整个文档，是一组分层节点的根节点。在Javascript中，document对象是Document的一个实例。使用document对象，有很多种方式可以查询和取得节点
◆ Element节点表示文档中的所有HTML或XML元素，可以用来操作这些元素的内容和特性。
◆ 另外还有一些节点类型，分别表示文本内容、注释、文档类型、CDATA区域和文档片段。

访问DOM的操作在多数情况下都很直观，不过在处理<script>和<style>元素时还是存在一些复杂性。
由于这两个元素分别包含脚本和样式信息，因此浏览器通常会将它们与其他元素区别对待。这些区别导致了再针对这些元素使用innerHTML时，以及在创建新元素时的一些问题。
理解DOM的关键，就是理解DOM对性能的影响。DOM操作往往是Javascript程序中开销最大的部分，而因访问NodeList导致的问题为最多。NodeList对象都是“动态的”，这就意味着每次访问NodeList对象，都会运行一次查询。所以最好的办法就是尽量减少DOM操作。