【javascript】DOM操作技术

动态脚本

• 使用<script>元素可以向页面中插入JavaScript代码，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码
• 动态脚本，指的是在页面加载时不存在，但将来的某一时刻通过修改DOM 动态添加的脚本。
• 创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript 代码。
• 动态加载的外部JavaScript 文件能够立即运行。

<script type="text/javascript" src="client.js"></script>

• 创建这个节点的DOM 代码

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>

function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex){
        //针对IE
        script.text = code;
    }
    document.body.appendChild(script);
}

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

动态样式

• 能够把CSS 样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。
• 动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。

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

• 使用DOM 代码可以很容易地动态创建出这个元素

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("styles.css");

• 另一种定义样式的方式是使用<style>元素来包含嵌入式CSS.

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

function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch (ex){
        //针对IE
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

loadStyleString("body{background-color:red}");

操作表格

• 为了方便构建表格，HTML DOM为<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>元素中行的HTMLCollection。
  • deleteRow(pos)：删除指定位置的行。
  • insertRow(pos)：向rows 集合中的指定位置插入一行，返回对新插入行的引用。

• 为<tr>元素添加的属性和方法如下。

  • cells：保存着<tr>元素中单元格的HTMLCollection。
  • deleteCell(pos)：删除指定位置的单元格。
  • insertCell(pos)：向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用。

• 使用DOM创建HTML表格

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

//创建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 对象都是在访问DOM文档时实时运行的查询。

//下列代码会导致无限循环
var divs = document.getElementsByTagName("div"),
i,
div;
for (i=0; i < divs.length; i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

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

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

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

DOM小结

• 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操作。

好好学习