JavaScript高級程序設計學習筆記--DOM - Gyoung－IT工程師數位筆記本

文章出處

DOM(文檔對象模型)是針對HTML和XML文檔的一個API(應用程序接口)。

Document類型

文檔的子節點

雖然DOM標準規定Document節點的子節點可以是DocumentType,Element,ProcessingInstruction或Comment,但還有兩個內置的訪問其子節點的快捷方式。第一個就是
documnetElement屬性，該屬性始終指向HTML頁面中的<html>元素。另一個就是通過childNodes列表訪問文檔元素，但通過documentElement屬性則能更快捷、更直接地訪問該元素。

documnetElement、firstChild和childNodes[0]的值相同，都指向<html>元素
var html=documnet.documnetElement; //取得對<html>的訪問
alert(html===documnet.childNodes[0]); //true
alert(html===documnet.firstChild); //true

文檔信息

修改tilte屬性的值不會改變<title>元素。

想要取得文檔中的所有元素，可以向getElementsByTagName()中傳入"*",在JavaScript及CSS中，星號(*)通常表示“全部”，下面看一個例子：
var allElements=documnet.getElementsByTagName("*");

可以使用write()和writeIn()方法動態地包含外部資源，例如JavaScrip文件等。在包含JavaScript文件時，必須注意不能直接包含字符串"</script>"，因為這會導致該字符串
被解釋為腳本塊的結束，它后面的代碼將無法執行。為避免這個問題，只需加入轉義符\即可，如下：

<body>
<script type="text/javascript">
documnet.write("<script type=\"text/javascript\" scr=\"file.js\">"+
"<\/script>");
</script>
</body>

在HTML中，標簽名始終都以全部大寫表示；而在XML（有時候也包括XHTML）中，標簽名則始終會與源代碼中保持一致。

動態腳本

動態加載外部腳本

var script=documnet.createElement("script");
script.type="text/javascript";
script.scr="client.js";
documnet.body.appendChild(script);

動態嵌入腳本

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

下面是調用這個函數的示例：

loadScriptString("function sayHi(){alert('Hi');}");

以這種方式加載的代碼會在全局作用域中執行，而且當腳本執行后將立即可用。實際上，這樣執行代碼與在全局作用域中把相同的字符串傳遞給eval()是一樣的。

動態樣式

動態加載外部樣式

var link=documnet.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href="style.css";
var head=documnet.getElementsByTagName("head")[0];
head.appendChild(link);

必須將<link>元素添加到<head>而不是<body>元素，才能保證在所有瀏覽器中的行為一致。

動態嵌入樣式

function loadStypeString(css){
var style=documnet.createElement("style");
style.type="text/css";
try{
style.appendChild(documnet.createTextNode(css));
}catch(ex){
style.stylesheet.cssText=css;
}
var head=documnet.getElementsByTagName("head")[0];
head.appendChild(link);
}

調用這個函數的示例如下：
loadStypeString("body{background-color:red}");

文章列表