用DOM解决“JavaScript中document.writeln()会覆盖原文档”的办法

  今天在用JavaScript做一些东西,用到document.writeln()方法,也就遇到了文档被覆盖的问题。

  原代码大体是这样:

 1 <FORM NAME="playerCtrl">                    
 2     <p>选择频道                        
 3     <SCRIPT LANGUAGE="JavaScript">                        
 4         <!--当用户从从下拉列表中选择想播放的流媒体文件后,获取该文件的URL和Name-->
 5         with (document)
 6         {                            
 7             writeln('<SELECT NAME="streams" onChange="change()">');               
 8             for (var i = 0; i < streams.length; i++) 
 9             {                            
10                 writeln('<OPTION VALUE="', streams[i].url, '">', streams[i].name);
11             }
12             writeln('</SELECT>');
13         }                        
14     </SCRIPT>                        
15     </p>                    
16 </FORM> 

   这一段其实在单个*.HTML文件中是可以正常解析的,不会出现文本覆盖问题,但是被另一个页面引用后,就会发生:除了下拉列表中的内容,整个页面中没有任何其他内容。这就是文本覆盖:原来的代码全部木有了,被清空了,整个html中只剩下document.writeln()所输出的内容了。

  为避免文本被覆盖,就需要是:在HTML指定位置进行document输出。网上冲浪一番,找到了问题的解决方案。

  这是解决后的代码:

 1 <div id="changeSelect">选择频道:</div>
 2 <script language="JavaScript" type="text/javascript">
 3     var gE = document.getElementById("changeSelect");
 4     var cE = document.createElement("select");
 5     cE.setAttribute("id", "chanelItem");
 6     cE.setAttribute("onchange", "change()");
 7     for (var i = 0; i < streams.length; i++) {
 8         cE.options[i] = new Option(streams[i].name, streams[i].url);
 9     }
10     gE.appendChild(cE);
11 </script>


         其实用到的就是DOM(Document Object Model,文档对象模型)。DOM是在IE和NetScape互掐的时候诞生出来的杰作(具体可问度娘或谷哥)。利用DOM,JavaScript可以重构整个HTML文档,动态的变化页面。要改变页面的某个东西,JavaScript需要获得HTML文档中该元素的入口,然后操作HTML元素,这些都是通过DOM获得的。

         OK,科普到此,^_^,说下如何解决文档覆盖的问题吧。

         首先,明确本次的需求:我要在某个特定的地方,动态的从ArrayList中获取内容并显示为下拉列表项,然后执行下拉列表的onchange()方法。

解决方案:

①   第一步当然是要生成一个下拉列表,用到createElement(): 

1 <div id="changeSelect">选择频道:</div>
2 <script language="JavaScript" type="text/javascript">
3     var gE = document.getElementById("changeSelect");
4     var cE = document.createElement("select");
5     gE.appendChild(cE);
6 </script>

  document.createElement()可以使任何标签对:如document.createElement(“input”), document.createElement(“p”)等;

②   第二步是设置select的属性,用到setAttribute():

1 <div id="changeSelect">选择频道:</div>
2 <script language="JavaScript" type="text/javascript">
3     var gE = document.getElementById("changeSelect");
4     var cE = document.createElement("select");
5     cE.setAttribute("id", "chanelItem");
6     cE.setAttribute("onchange", "change()");
7     gE.appendChild(cE);
8 </script>

  setAttribute(“name”, “value”)方法的第一个属性是HTML标签对的属性名,第二个属性是HTML标签对的属性值;

③   第三步是使下拉列表项显现出来:

1 <div id="changeSelect">选择频道:</div>
2 <script language="JavaScript" type="text/javascript">
3     var gE = document.getElementById("changeSelect");
4     var cE = document.createElement("select");
5     cE.setAttribute("id", "chanelItem");
6     cE.setAttribute("onchange", "change()");
7         cE.options[0] = new Option(”CCTV1”,“rtsp://124.160.11.38:1802/cctv1”);
8     gE.appendChild(cE);
9 </script>

  New Option(name, value)方法的第一个属性是要显现的东西,<option>some words</option>中间的some words的值,第二个属性是列表项的属性值,即option中的value项;

④   第四步就是动态获取ArrayList中的值了,当然这个是大部分人解决文档覆盖时所不会涉及到的问题了,就是论事,说我的解决步骤吧:

 1 <div id="changeSelect">选择频道:</div>
 2 <script language="JavaScript" type="text/javascript">
 3     var gE = document.getElementById("changeSelect");
 4     var cE = document.createElement("select");
 5     cE.setAttribute("id", "chanelItem");
 6     cE.setAttribute("onchange", "change()");
 7     for (var i = 0; i < streams.length; i++) {
 8         cE.options[i] = new Option(streams[i].name, streams[i].url);
 9     }
10     gE.appendChild(cE);
11 </script>

     

  至此,全部步骤解决完了。全部依靠DOM这个杰作啊,附效果图:

  

  至于document.createElement()的具体使用,参看“http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html”。

Lionden Lee

2012年11月20日

原文地址:https://www.cnblogs.com/lionden/p/JS_createElement.html