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;idocument.createElement("div");
document.body.appendChild(div);
}
一种能避免上述问题的迭代NodeList的方法，就是使用使用length属性初始化第二个变量，然后将迭代器与该变量进行比较。
var divs = document.getElementsByTagName("div"),i,div,len;
for(i=0,len = divs.length;i"div");
document.body.appendChild(div);
} len保存着对divs.length在循环开始时的一个快照，因此就会避免上一个例子中的无限循环问题。
一般来说，应该尽量减少访问NodeList的次数。因为每次访问NodeList，都会运行一次基于文档的查询。所以，可以考虑将从NodeList中取得的值缓存起来。