js学习笔记：DOM——DOM操作技术

动态脚本

使用< script>元素可以向页面中插入js代码，一种方式是通过其src特性包含外部文件；另一种方式就是用这个元素本身来包含代码。
而动态脚本指的是，在页面加载时不存在，但在将来的某一时刻通过修改DOM动态添加的脚本。

跟操作HTML元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入js代码。

• 动态加载的外部js文件能够立即执行：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

在最后一行代码把script元素添加到页面中之前，是不会下载外部文件的。

• 另一种指定js代码的方式是行内方式

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

也可以使用script元素的text属性指定js代码：

script.text = "function(){alert('hi');}"

以这种方式加载的代码会在全局作用域中执行，而且当加载完成后可以立即使用。

实际上，这样执行代码与在全局作用域中把相同的字符串传递给eval（）是一样的。

动态样式

能把CSS样式包含到HTML页面中的元素有两个。

• < link>元素用于包含来自外部的文件
• < style>元素用于指定嵌入的样式

与动态脚本类似，动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的，

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

加载外部样式文件的过程是异步的.

另一种定义样式的方式是使用style元素来包含嵌入式css。

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

而在IE中上面的方法会出错，只能使用style元素的styleSheet属性，该属性又有一个cssText属性，可以接受CSS代码：

style.styleSheet.cssText = "body{background-color:red}";

这种方式会实时地向页面中添加样式，因此能够马上看到变化。

使用NodeList

NodeList、NamedNodeMap、HTMLCollection，都是动态的，即每次文档结构发生变化时，他们都会得到更新。从本质上说，以上三个对象都是在访问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,div,len;
for(i=0,len = divs.length;i<len;i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

len保存着对divs.length在循环开始时的一个快照，因此就会避免上一个例子中的无限循环问题。

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