JavaScript DOM基础知识总结（二）

一、动态脚本

动态脚本是指页面加载时不存在，但将来某一时刻通过修改DOM动态添加的脚本。创建动态脚本有以下两种方法：插入外部文件和直接插入JS代码。如下面代码示例，两种方法都需要等到”document.body.appendChild(script);”这句代码执行完之后才会将脚本引入。第二种方法中使用异常处理的目的是要兼容IE浏览器。

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

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

loadScript("client.js");
loadScriptString("function haha() { console.log('haha~'); }");

二、动态样式

与动态脚本类似，动态样式是指页面刚加载时不存在的样式，页面加载完成后动态添加到页面的样式。添加动态样式也有两种方式：通过< link>标签引入外部文件和通过< style>标签直接写入CSS代码。下面给出代码示例，大部分与动态脚本的写法类似。

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

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

loadStyle("styles.css");
loadStyleString("body {background-color: red}");

三、操作表格

为了方便构建表格，HTML DOM为< table>、< tbody>、< tr>元素添加了一些属性和方法。需要时可以查看一下相关文档，这里不作列举。

四、使用NodeList

NodeList、NamedNodeMap和HTMLCollection这三个集合都是动态的，每当文档结构发生变化，他们就会得到更新。因此，他们始终会保存着最新最准确的信息。如以下代码示例，for循环会一直下去，因为divs.length会不断更新，i永远会小于divs.length。每次访问NodeList都会运行一次基于文档的查询，因此需要尽量减少访问NodeList的次数，减少DOM操作。

var divs = document.getElementsByTagName("div");
var div = null;
// 死循环
for (var i = 0; i < divs.length; ++i) {
div = document.createElement("div");
document.body.appendChild(div);
}

// 缓存NodeList的信息，不反复访问NodeList
var len = divs.length;
for (var i = 0; i < len; ++i) {
// ...
}