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时出现问题
-------------------------------------------本章终---------------------------------------