[JavaScript]DOM操作技术
1. 动态脚本使用<script>元素可以向页面中插入JavaScript代码,一种方式是通过src属性包含外部文件,另一种方式是用这个元素本身来包含代码。动态脚本指在页面加载时不存在,但将来某时通过修改DOM动态添加的脚本。
动态加载的外部JavaScript文本能够立即执行,例如:
<script type="text/javascript" src="test.js"></script>
创建这个节点的DOM代码如下:
var script = document.createElement("Script");
script.type = "text/javascript";
script.src = "test.js";
document.body.appendChild(script);
另一种指定JavaScript代码的方式是行内方式,例如:
<script type="text/javascript">
function myfunc() {
alert("Hello World!");
}
</script>
创建的DOM代码如下:
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function myfunc(){alert('Hello World!');}";
document.body.appendChild(script);
2. 动态样式
把CSS样式包含到HTML页面中的元素有两个。其中<link>元素用于包含来自外部的文件,而<style>元素用于指定嵌入的样式。与动态脚本类似,动态样式指在页面刚加载时不存在的样式,是在页面加载完成后动态添加到页面中的。
例如:
<link rel="stylesheet" type="text/css" href="test.css">
使用DOM代码可以动态创建出这个元素,如下所示:
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "test.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
另一种定义样式的方式是使用<style>元素来包含CSS,例如:
<style type="text/css">
body {
background-color: red;
}
</style>
对应的创建的DOM代码如下:
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(
"body{background-color: red}"));
}
catch (ex) {
style.styleSheet.cssText = "body{background-color: red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
3. 操作表格
为了方便构建表格,HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法。
为<table>元素添加的属性和方法如下:
1) caption: 保存对<caption>元素的指针。
2) tBodies: 是一个<tbody>元素的HTMLCollection。
3) tFoot: 保存对<tfoot>元素的指针。
4) tHead: 保存对<thead>元素的指针。
5) rows: 表格中所有行的HTMLCollection。
6) createTHead(): 创建<thead>元素,返回引用。
7) createTFoot(): 创建<tfoot>元素,返回引用。
8) createCaption(): 创建<caption>元素,返回引用。
9) deleteTHead(): 删除<thead>元素。
10) deleteTFoot(): 删除<tfoot>元素。
11) deleteCaption(): 删除<caption>元素。
12) deleteRow(pos): 删除指定位置的行。
13) insertRow(pos): 向rows集合中的指定位置插入一行。
为<tbody>添加的属性和方法如下:
1) rows: 保存<tbody>元素中行的HTMLCollection。
2) deleteRow(pos): 删除指定位置的行。
3) insertRow(pos): 向rows集合中的指定位置插入一行。
为<tr>元素添加的属性和方法如下:
1) cells: 保存<tr>元素中单元格的HTMLCollection。
2) deleteCell(pos): 删除指定位置的单元格。
3) insertCell(pos): 向cells
补充:web前端 , JavaScript ,