動(dòng)態(tài)腳本
- 使用<script>元素可以向頁(yè)面中插入JavaScript代碼，一種方式是通過(guò)其src特性包含外部文件，另一種方式就是用這個(gè)元素本身來(lái)包含代碼
- 動(dòng)態(tài)腳本，指的是在頁(yè)面加載時(shí)不存在，但將來(lái)的某一時(shí)刻通過(guò)修改DOM 動(dòng)態(tài)添加的腳本。
- 創(chuàng)建動(dòng)態(tài)腳本也有兩種方式：插入外部文件和直接插入JavaScript 代碼见秽。
- 動(dòng)態(tài)加載的外部JavaScript 文件能夠立即運(yùn)行。
<script type="text/javascript" src="client.js"></script>
- 創(chuàng)建這個(gè)節(jié)點(diǎn)的DOM 代碼
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
loadScript("client.js");
- 另一種指定JavaScript 代碼的方式是行內(nèi)方式狰住。
<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){
//針對(duì)IE
script.text = code;
}
document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert('hi');}");
動(dòng)態(tài)樣式
- 能夠把CSS 樣式包含到HTML頁(yè)面中的元素有兩個(gè)张吉。其中，<link>元素用于包含來(lái)自外部的文件催植，而<style>元素用于指定嵌入的樣式肮蛹。
- 動(dòng)態(tài)樣式是指在頁(yè)面剛加載時(shí)不存在的樣式；動(dòng)態(tài)樣式是在頁(yè)面加載完成后動(dòng)態(tài)添加到頁(yè)面中的创南。
<link rel="stylesheet" type="text/css" href="styles.css">
- 使用DOM 代碼可以很容易地動(dòng)態(tài)創(chuàng)建出這個(gè)元素
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("styles.css");
- 另一種定義樣式的方式是使用<style>元素來(lái)包含嵌入式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){
//針對(duì)IE
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
loadStyleString("body{background-color:red}");
操作表格
為了方便構(gòu)建表格伦忠，HTML DOM為<table>、<tbody>和<tr>元素添加了一些屬性和方法稿辙。
-
為<table>元素添加的屬性和方法如下昆码。
- caption：保存著對(duì)<caption>元素（如果有）的指針。
- tBodies：是一個(gè)<tbody>元素的HTMLCollection邻储。
- tFoot：保存著對(duì)<tfoot>元素（如果有）的指針赋咽。
- tHead：保存著對(duì)<thead>元素（如果有）的指針。
- rows：是一個(gè)表格中所有行的HTMLCollection吨娜。
- createTHead()：創(chuàng)建<thead>元素脓匿，將其放到表格中，返回引用宦赠。
- createTFoot()：創(chuàng)建<tfoot>元素陪毡，將其放到表格中米母，返回引用。
- createCaption()：創(chuàng)建<caption>元素毡琉，將其放到表格中铁瞒，返回引用。
- deleteTHead()：刪除<thead>元素桅滋。
- deleteTFoot()：刪除<tfoot>元素慧耍。
- deleteCaption()：刪除<caption>元素。
- deleteRow(pos)：刪除指定位置的行虱歪。
- insertRow(pos)：向rows 集合中的指定位置插入一行蜂绎。
-
為<tbody>元素添加的屬性和方法如下。
- rows：保存著<tbody>元素中行的HTMLCollection笋鄙。
- deleteRow(pos)：刪除指定位置的行。
- insertRow(pos)：向rows 集合中的指定位置插入一行怪瓶，返回對(duì)新插入行的引用萧落。
-
為<tr>元素添加的屬性和方法如下。
- cells：保存著<tr>元素中單元格的HTMLCollection洗贰。
- deleteCell(pos)：刪除指定位置的單元格找岖。
- insertCell(pos)：向cells集合中的指定位置插入一個(gè)單元格，返回對(duì)新插入單元格的引用敛滋。
使用DOM創(chuàng)建HTML表格
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//創(chuàng)建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
//創(chuàng)建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
//將表格添加到文檔主體中
document.body.appendChild(table);
使用NodeList
- 從本質(zhì)上說(shuō)许布，所有NodeList 對(duì)象都是在訪問(wèn)DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢。
//下列代碼會(huì)導(dǎo)致無(wú)限循環(huán)
var divs = document.getElementsByTagName("div"),
i,
div;
for (i=0; i < divs.length; i++){
div = document.createElement("div");
document.body.appendChild(div);
}
-要迭代一個(gè)NodeList绎晃，最好是使用length 屬性初始化第二個(gè)變量蜜唾，然后將迭代器與該變
量進(jìn)行比較。
var divs = document.getElementsByTagName("div"),
i,
len,
div;
for (i=0, len=divs.length; i < len; i++){
div = document.createElement("div");
document.body.appendChild(div);
}
- 一般來(lái)說(shuō)庶艾，應(yīng)該盡量減少訪問(wèn)NodeList的次數(shù)袁余。因?yàn)槊看卧L問(wèn)NodeList，都會(huì)運(yùn)行一次基于文檔的查詢咱揍。所以颖榜，可以考慮將從NodeList 中取得的值緩存起來(lái)。
DOM小結(jié)
- DOM是語(yǔ)言中立的API煤裙，用于訪問(wèn)和操作HTML 和XML 文檔掩完。
- DOM1 級(jí)將HTML 和XML 文檔形象地看作一個(gè)層次化的節(jié)點(diǎn)樹(shù)，可以使用JavaScript 來(lái)操作這個(gè)節(jié)點(diǎn)樹(shù)硼砰，進(jìn)而改變底層文檔的外觀和結(jié)構(gòu)且蓬。
- DOM 由各種節(jié)點(diǎn)構(gòu)成
- 最基本的節(jié)點(diǎn)類(lèi)型是Node，用于抽象地表示文檔中一個(gè)獨(dú)立的部分夺刑；所有其他類(lèi)型都繼承自Node缅疟。
- Document 類(lèi)型表示整個(gè)文檔分别，是一組分層節(jié)點(diǎn)的根節(jié)點(diǎn)。在JavaScript中存淫，document 對(duì)象是Document 的一個(gè)實(shí)例耘斩。使用document 對(duì)象，有很多種方式可以查詢和取得節(jié)點(diǎn)桅咆。
- Element 節(jié)點(diǎn)表示文檔中的所有HTML或XML元素括授，可以用來(lái)操作這些元素的內(nèi)容和特性。
- 另外還有一些節(jié)點(diǎn)類(lèi)型岩饼，分別表示文本內(nèi)容荚虚、注釋、文檔類(lèi)型籍茧、CDATA區(qū)域和文檔片段版述。
- 訪問(wèn)DOM 的操作在多數(shù)情況下都很直觀，不過(guò)在處理<script>和<style>元素時(shí)還是存在一些復(fù)雜性寞冯。
- 由于這兩個(gè)元素分別包含腳本和樣式信息渴析，因此瀏覽器通常會(huì)將它們與其他元素區(qū)別對(duì)待。這些區(qū)別導(dǎo)致了在針對(duì)這些元素使用innerHTML 時(shí)吮龄，以及在創(chuàng)建新元素時(shí)的一些問(wèn)題俭茧。
- 理解DOM的關(guān)鍵，就是理解DOM 對(duì)性能的影響漓帚。
- DOM操作往往是JavaScript程序中開(kāi)銷(xiāo)最大的部分母债，而因訪問(wèn)NodeList導(dǎo)致的問(wèn)題為最多。
- NodeList 對(duì)象都是“動(dòng)態(tài)的”尝抖，這就意味著每次訪問(wèn)NodeList對(duì)象毡们，都會(huì)運(yùn)行一次查詢。有鑒于此牵署，最好的辦法就是盡量減少DOM操作漏隐。
好好學(xué)習(xí)
