<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态脚本 动态样式 操作表格 使用NodeList</title>
</head>
<body>
</body>
<script>
/*动态脚本
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script)
* */
/*
动态样式
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
* */
/*
操作表格
* */
//创建 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 cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);
//创建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2 = document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);
//将表格添加到文档主体中
document.body.appendChild(table);
/*为<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>元素中行的 HTMLCollection。
deleteRow(pos)：删除指定位置的行。
insertRow(pos)：向 rows 集合中的指定位置插入一行，返回对新插入行的引用。
为<tr>元素添加的属性和方法如下。
cells：保存着<tr>元素中单元格的 HTMLCollection。
deleteCell(pos)：删除指定位置的单元格。
insertCell(pos)：向 cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。
使用这些属性和方法，可以极大地减少创建表格所需的代码数量。例如，使用这些属性和方法可以
将前面的代码重写如下（加阴影的部分是重写后的代码）。*/
//创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建 tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(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.insertRow(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);
/*
使用NodeList
理解 NodeList 及其“近亲”NamedNodeMap 和 HTMLCollection，是从整体上透彻理解 DOM 的
关键所在。这三个集合都是“动态的”；
* */
</script>
</html>