今天在用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()的具体使用，参看“”。
Lionden Lee
2012年11月20日
:
