用DOM解決“JavaScript中document.writeln()會覆蓋原文檔”的辦法

　　今天在用JavaScript做一些東西，用到document.writeln()方法，也就遇到了文檔被覆蓋的問題。

　　原代碼大體是這樣：

<FORM NAME="playerCtrl">                    
    <p>選擇頻道                        
    <SCRIPT LANGUAGE="JavaScript">                        
        <!--當用戶從從下拉列表中選擇想播放的流媒體文件后，獲取該文件的URL和Name-->
        with (document)
        {                            
            writeln('<SELECT NAME="streams" onChange="change()">');               
            for (var i = 0; i < streams.length; i++) 
            {                            
                writeln('<OPTION VALUE="', streams[i].url, '">', streams[i].name);
            }
            writeln('</SELECT>');
        }                        
    </SCRIPT>                        
    </p>                    
</FORM> 

 　　這一段其實在單個*.HTML文件中是可以正常解析的，不會出現文本覆蓋問題，但是被另一個頁面引用后，就會發生：除了下拉列表中的內容，整個頁面中沒有任何其他內容。這就是文本覆蓋：原來的代碼全部木有了，被清空了，整個html中只剩下document.writeln()所輸出的內容了。

　　為避免文本被覆蓋，就需要是：在HTML指定位置進行document輸出。網上沖浪一番，找到了問題的解決方案。

　　這是解決后的代碼：

<div id="changeSelect">選擇頻道：</div>
<script language="JavaScript" type="text/javascript">
    var gE = document.getElementById("changeSelect");
    var cE = document.createElement("select");
    cE.setAttribute("id", "chanelItem");
    cE.setAttribute("onchange", "change()");
    for (var i = 0; i < streams.length; i++) {
        cE.options[i] = new Option(streams[i].name, streams[i].url);
    }
    gE.appendChild(cE);
</script>

         其實用到的就是DOM（Document Object Model，文檔對象模型）。DOM是在IE和NetScape互掐的時候誕生出來的傑作（具體可問度娘或谷哥）。利用DOM，JavaScript可以重構整個HTML文檔，動態的變化頁面。要改變頁面的某個東西，JavaScript需要獲得HTML文檔中該元素的入口，然后操作HTML元素，這些都是通過DOM獲得的。

         OK，科普到此，^_^，說下如何解決文檔覆蓋的問題吧。

         首先，明確本次的需求：我要在某個特定的地方，動態的從ArrayList中獲取內容並顯示為下拉列表項，然后執行下拉列表的onchange()方法。

解決方案：

①   第一步當然是要生成一個下拉列表，用到createElement()：　

<div id="changeSelect">選擇頻道：</div>
<script language="JavaScript" type="text/javascript">
    var gE = document.getElementById("changeSelect");
    var cE = document.createElement("select");
    gE.appendChild(cE);
</script>

　　document.createElement()可以使任何標簽對：如document.createElement(“input”), document.createElement(“p”)等；

②   第二步是設置select的屬性，用到setAttribute()：

<div id="changeSelect">選擇頻道：</div>
<script language="JavaScript" type="text/javascript">
    var gE = document.getElementById("changeSelect");
    var cE = document.createElement("select");
5     cE.setAttribute("id", "chanelItem");
6     cE.setAttribute("onchange", "change()");
    gE.appendChild(cE);
</script>

　　setAttribute(“name”, “value”)方法的第一個屬性是HTML標簽對的屬性名，第二個屬性是HTML標簽對的屬性值；

③   第三步是使下拉列表項顯現出來：

<div id="changeSelect">選擇頻道：</div>
<script language="JavaScript" type="text/javascript">
    var gE = document.getElementById("changeSelect");
    var cE = document.createElement("select");
    cE.setAttribute("id", "chanelItem");
    cE.setAttribute("onchange", "change()");
        cE.options[0] = new Option(”CCTV1”,“rtsp://124.160.11.38:1802/cctv1”);
    gE.appendChild(cE);
</script>

　　New Option(name, value)方法的第一個屬性是要顯現的東西，<option>some words</option>中間的some words的值，第二個屬性是列表項的屬性值，即option中的value項；

④   第四步就是動態獲取ArrayList中的值了，當然這個是大部分人解決文檔覆蓋時所不會涉及到的問題了，就是論事，說我的解決步驟吧：

<div id="changeSelect">選擇頻道：</div>
<script language="JavaScript" type="text/javascript">
    var gE = document.getElementById("changeSelect");
    var cE = document.createElement("select");
    cE.setAttribute("id", "chanelItem");
    cE.setAttribute("onchange", "change()");
    for (var i = 0; i < streams.length; i++) {
        cE.options[i] = new Option(streams[i].name, streams[i].url);
    }
    gE.appendChild(cE);
</script>

     

　　至此，全部步驟解決完了。全部依靠DOM這個傑作啊，附效果圖：

　　

　　至於document.createElement()的具體使用，參看“http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html”。

 

Lionden Lee

2012年11月20日