BOM编程-动态脚本，css，table

动态插入JavaScript

• 直接插入JavaScript代码
• 插入外部js文件

<!-- <script type="text/javascript" src="client.js"></script> -->
<script type="text/javascript">
var script  = document.createElement('script');
script.type='text/javascript';
script.src='client.js';
document.body.appendChild(script);//将该语句插入body的最后一个子节点的位置上

封装成函数：

function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}

loadScript("client.js");

插入JavaScript代码

直接插入一段代码

<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>

分析：
节点：Script，Text类型节点

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);

封装成函数：

function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
//IE不支持这种搞法（但是这个简单）
script.appendChild(document.createTextNode(code));
} catch (ex){
script.text = code;//给IE开个小灶
}
document.body.appendChild(script);
}

下面是调用这个函数的示例：

loadScriptString("function sayHi(){alert('hi');}");

动态样式

所谓动态样式是指在文档加载完成后，动态的将css样式插入到文档中
外部样式link
内部样式style

动态引入外部样式：

<link rel="stylesheet" type="text/css" href="styles.css">

分析：
节点：link
属性：type href

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);

注意： 必须将css样式加到head中是浏览器样式一致。

抽取成函数：

function loadStyles(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

调用 loadStyles() 函数的代码如下所示：

loadStyles("styles.css");

使用 style来引入样式

<style type="text/css">
  body {
    background-color: red;
  }
</style>

分析：
节点：style，text
属性：type

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

抽取成函数：

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        // 在IE中不允许访问style的子节点
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
        //为了兼容IE 使用styleSheet属性
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

动态操作表格

静态表格：

<table border="1" width="100%">

    <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>

可以使用添加节点的方法动态构建这个表格，但是未免麻烦；

---

JavaScript为为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 集合中的指定位置插入一个单元格，返回对新插入单元格的引用

案例：
关键节点：body，table，tbody

//创建 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);

通过循环实现：

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

for (var i = 0; i < 3; i++) {
    tbody.insertRow(i);
    for (var j = 0; j< 3; j++) {
        tbody.rows[i].insertCell(j);
        tbody.rows[i].cells[j].appendChild(document.createTextNode("Cell "+i+j));
    };

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