1. 程式人生 > >DOM操作技術

DOM操作技術

腳本 tco 不同的 操作dom element TE 外部文件 動態 需要

很多時候,DOM操作都是比較簡明的,因此用JavaScript生成那些通常原本用HTML代碼生成的內容並不麻煩。不過,也有一些時候,操作DOM並不像表面上看起來那麽簡單,由於瀏覽器中充斥著隱藏的陷阱和不兼容,用JavaScript代碼處理DOM的某些部分要比處理其他部分更復雜一些。

動態腳本

使用<script>元素可以向頁面插入JavaScript代碼,一種是通過雙人床特性包含外部文件,另一種就是用這個元素本身來包含代碼,接下來要說的動態腳本,只的是在頁面加載時不存在,但將來的某一時刻通過修改DOM動態添加的腳本。

var script = document.createElement("script");
script.type = "text/javascript";
script.src = ‘aaa.js‘;
document.body.appendChild(script);
// 等同於
<script text="text/javascript" src =‘aaa.js‘></script>

整個過程可以使用下面的函數來封裝:

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

另一種指定JavaScript代碼的方式是行內方式:

<script text
="text/javascript" > function sayHi(){ console.log(Hi); }
</script>

從邏輯上來講,下面的代碼是有效的:

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){console.log(‘Hi‘);}"));
document.body.appendChild(script);

上面的DOM代碼在其他瀏覽器中可正常運行,但在IE中,則會報錯,因為IE將<script>視為一個特殊的元素,不允許DOM訪問其子節點,不過可以使用<script>元素的text屬性來指定JavaScript代碼:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "function sayHi(){console.log(‘Hi‘);}";
document.body.appendChild(script);

這樣修改之後的代碼可以在IE及其他瀏覽器中運行,但Safari3.0之前的版本不能正確的支持text屬性,因此,如果需要兼容早期的Safari,可以這樣修改:

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

整個過程可以使用下面的函數來封裝:

function addScriptCode(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);
}

動態樣式

能夠把CSS樣式包含到HTML頁面中元素有兩個,其中,<link>元素用於包含來自外部的文件,而<style>元素用於指定嵌入的樣式。與動態腳本類似,動態樣式是值在頁面剛加載時不存在的樣式,動態樣式是在頁面加載完成後動態添加到頁面中的。

var link = document.createElement(‘link‘);
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style/css";
var head = document.getElementsByTagName("head")[0]; head.appendChild(link); // 等同於
<link rel="stylesheet" href="style.css">

和script不同的是,必須將<link>元素添加到<head>而不是<body>元素中,才能保證在所有瀏覽器中的行為一致,整個過程可以用以下的函數來表示:

function addStyle(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{
         color:red;
     }
</style>

按照相同的邏輯,下列DOM代碼應該是有效的:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

事實上,上面的代碼在其他的瀏覽器中可以正常運行,但在IE中會報錯,同<style>一樣,IE將<style>視為一個特殊的節點,不允許訪問其子節點,解決這個問題的辦法就是訪問元素的styleSheet屬性,該屬性有一個CSSText屬性,可以接受CSS代碼。

var style = document.createElement("style");
style.type = "text/css";
try{
     style.appendChild(document.createTextNode("body{color:red}"));
}catch(ex){
     style.styleSheet.cssText = "body{color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

同理,上面的整個過程可以使用下面的函數來封裝:

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

需要註意的是,如果專門針對IE編寫代碼,需小心使用styleSheet.cssText 屬性,在重用同一個<style>元素並再次設置這個屬性時,有可能會導致瀏覽器崩潰,同樣,將CSSText屬性設置為空字符串也可能導致瀏覽器崩潰。

DOM操作技術