用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日