DOM编程

动态脚本

  • <script>元素用于向网页中插人JavaScript代码,可以是src属性包含的外部文件，也可以是作为该元素内容的源代码。
  • 有两种方式通过<script>动态为网页添加脚本:引人外部文件和直接插人源代码。
  • 动态脚本就是在页面初始加载时不存在，之后又通过DOM包含的脚本。
  • 可以通过DOM编程创建这个节点:
1
2
3
let script = document.createElement("script"); 
script.src = "foo.js"; 
document.body.appendChild(script);
  • 抽象出一个跨浏览器的函数:
1
2
3
4
5
6
7
8
9
10
11
12
function loadScriptString(code){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    try { 
        script.appendChild(document.createTextNode(code)); 
    } catch (ex){ 
        script.text = code; 
    } 
    document.body.appendChild(script); 
}
//这个函数可以这样调用：
loadScriptString("function sayHi(){alert('hi');}");

动态样式

  • CSS样式在HTML页面中可以通过两个元素加载：<link>和<style>
    • <link>：用于包含CSS外部文件；
    • <style>：用于添加嵌入样式。
1
<link rel="stylesheet" type="text/css" href="styles.css"> 
1
2
3
4
5
6
7
//使用 DOM 编程创建出来
let link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = "styles.css"; 
let head = document.getElementsByTagName("head")[0]; 
head.appendChild(link);

  • 应该把<link>元素添加到<head>元素而不是<body>元素，这样才能保证所有浏览器都能正常运行。

  • 这个过程可以抽象为以下通用函数:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function loadStyles(url){ 
        let link = document.createElement("link"); 
        link.rel = "stylesheet"; 
        link.type = "text/css"; 
        link.href = url; 
        let head = document.getElementsByTagName("head")[0]; 
        head.appendChild(link); 
    }
    //这样调用这个 loadStyles()函数了：
    loadStyles("styles.css");

  • 通过外部文件加载样式是一个异步过程。因此，样式的加载和正执行的 JavaScript 代码并没有先后顺序。

  • 另一种定义样式的方式是使用<script>元素包含嵌入的 CSS 规则

    1
    2
    3
    4
    5
    <style type="text/css"> 
    body { 
        background-color: red; 
    } 
    </style> 
    1
    2
    3
    4
    5
    let style = document.createElement("style"); 
    style.type = "text/css"; 
    style.appendChild(document.createTextNode("body{background-color:red}")); 
    let head = document.getElementsByTagName("head")[0]; 
    head.appendChild(style);

操作表格

  • 表格是 HTML 中最复杂的结构之一。通过 DOM 编程创建<table>元素，通常要涉及大量标签，包括表行、表元、表题，等等。因此，通过 DOM 编程创建和修改表格时可能要写很多代码。
1
2
3
4
5
6
7
8
9
10
11
12
<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> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 创建表格
let table = document.createElement("table"); 
table.border = 1; 
table.width = "100%"; 
// 创建表体
let tbody = document.createElement("tbody"); 
table.appendChild(tbody); 
// 创建第一行
let row1 = document.createElement("tr"); 
tbody.appendChild(row1); 
let cell1_1 = document.createElement("td"); 
cell1_1.appendChild(document.createTextNode("Cell 1,1")); 
row1.appendChild(cell1_1); 
let cell2_1 = document.createElement("td"); 
cell2_1.appendChild(document.createTextNode("Cell 2,1")); 
row1.appendChild(cell2_1); 
// 创建第二行
let row2 = document.createElement("tr"); 
tbody.appendChild(row2); 
let cell1_2 = document.createElement("td"); 
cell1_2.appendChild(document.createTextNode("Cell 1,2")); 
row2.appendChild(cell1_2); 
let cell2_2= document.createElement("td"); 
cell2_2.appendChild(document.createTextNode("Cell 2,2")); 
row2.appendChild(cell2_2); 
// 把表格添加到文档主体
document.body.appendChild(table);
  • 为了方便创建表格，HTML DOM给```、和``元素添加了一些属性和方法。
  • <table>元素添加了以下属性和方法:
  • <tbody>元素添加了以下属性和方法:
  • <tr>元素添加了以下属性和方法:
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 创建表格
    let table = document.createElement("table"); 
    table.border = 1; 
    table.width = "100%"; 
    // 创建表体
    let 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

    • DOM编程的关键是：理解NodeList对象和相关的NameNodeMap、HTMLCollection。
    • 以上三个集合类型是“实时的”，意味着文档结构的变化会实时地在他们身上反映出来，它们的值始终代表最新的状态。
    • NodeList是基于DOM文档的实时查询。
    • 任何时候需要迭代NodeList，最好初始化一个变量保存当时查询时的长度，然后使用循环变量与这个变量进行比较。
    1
    2
    3
    4
    5
    let divs = document.getElementsByTagName("div"); 
    for (let i = 0, len = divs.length; i < len; ++i) { 
        let div = document.createElement("div"); 
        document.body.appendChild(div); 
    }