JavaScript高级程序设计26.pdf

时间:2022-12-21 05:49:53

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

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