JavaScript高级程序设计26.pdf

DOM操作技术

动态脚本

指得是页面加载时不存在，但将来的某一时刻通过修改DOM动态添加的脚本，跟操作HTML元素一样，创建动态脚本也有2种方式：插入外部文件和直接插入JavaScript代码

var script=document.createElement("script");

script.type="text/javascript";

script.src="client.js";

document.body.appendChild(script);

另一种指定JavaSctipt代码的方式是行内方式，由于IE将<script>视为一个特殊的元素，不允许DOM访问其子节点，不过可以使用<script>元素里的text属性指定JavaScript代码

var script=document.createElement("script");

script.type="text/javascript";

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

document.body.appendChild(script);

Safari3.0之前的版本不能正确地支持text属性，允许使用文本节点来指定代码

var script=document.createElement("script");

script.type="text/javascript";

var code="function sayHi(){alert('Hi');}";

try{

　　script.appendChild(document.createTextNode(code));

　　}

catch(ex){

　　script.text=code;

　　}

document.body.appendChild(script);

动态样式

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

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

IE将<style>元素视为一个特殊的、与<script>类似的节点，不允许访问其子节点，解决IE这个问题就是访问元素的styleSheet属性，该属性又有一个cssText属性，通过try-catch语句捕获IE抛出的错误，再针对IE的特殊方式设置样式

操作表格

HTML DOM为<table>、<tbody>、<tr>元素添加了一些属性和方法，方便我们操作表格

使用NodeList

理解NodeList及其“近亲”NamedNodeMap和HTMLCollection，它们都是动态的，可以

len=divs.length;避免迭代NodeList时出现问题

-------------------------------------------本章终---------------------------------------