JavaScript学习-DOM操作技术

1，动态脚本

创建动态脚本也有两种方式

插入外部文件

代码示例，也可以把这个脚本文件添加到head元素中

function loadScript(url){
var script = document.createElement("script");
script.type = "text.javascript";
script.src = url;
document.body.appendChild(script);
}

直接插入JavaScript代码

如要添加的HTML示例

<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>

脚本代码如下

function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
}

2，动态样式

介绍

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

使用\<\link>动态添加

要动态添加的元素如下：

<link rel="stylesheet" type="text/css" href="styles.css">

脚本代码如下

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

使用\<\style>

元素包含嵌入的CSS，如下

<style type="text/css">
body{
background-color:red;
}
</style>

脚本代码如下

function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch(ex){//兼容IE
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}

3，操作表格

为了方便构建表格，HTML DOM为table>、tbody、tr元素添加了一些属性和方法如下

为table元素添加的属性和方法如下



为tbody元素添加的属性和方法如下



为tr元素添加的属性和方法如下