1.document 对象常用的有三种：
A、document.getElementById:通过html元素的Id，来获取html对象。适用于单个的html元素。
B、document.getElementByName:通过html相同的名字获取一组对象，适用于radio 元素中name都有相同的名称。
C、document.getElementByTagName:通过html元素标签的名称，获取到html页面某些元素标签对象。
D、document.write是在html页面的元素融合在一起，不能再事件中使用document.write("sss"),否则会把网页上原有的内容给覆盖掉，切记！
现在百度新闻代码、广告联盟、CMZZ流量统计等功能都是做好的js代码块，可以快速的融合到你的网站中，实际上他们在JS脚本块中用的也是document.write()
document 对象还有很多，还有一一列举，有兴趣的话可以自己研究一下
2. document 实例：
A、getElementById
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 function btnClick1() { 6 var txt = document.getElementById("tb1"); 7 alert(txt.value); 8 //alert(tb1.value); //不推荐tb1.value这种方式 9 } 10 function btnClick2() { 11 var txt = document.getElementById("tb2"); 12 alert(txt.value); 13 //alert(Form1.tb2.value); //不推荐tb1.value这种方式,如果<input>被<form>标签包含着，就要Form1.tb2.value取得文本框的值 14 } 15 </script> 16 </head> 17 <body> 18 <input type="text" id="tb1" /> 19 <input type="button" value="TextBox1" onclick="btnClick1()" /> 20 <form action="Event.htm" id="Form1"> 21 <input type="text" id="tb2" /> 22 <input type="button" value="TextBox2" onclick="btnClick2()" /> 23 </form> 24 </body> 25 </html>
B、getElementByName
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 function btnClick() { 6 var radios = document.getElementsByName("gender"); 7 //在JS中 for (var r in radios)并不会像C#中，遍历每个元素的值，而是遍历的Key. 8 for (var i = 0; i < radios.length; i++) { 9 var radio = radios[i]; 10 alert(radio.value); 11 } 12 } 13 14 function btnClick2() { 15 var inputs = document.getElementsByTagName("input"); 16 for (var i = 0; i < inputs.length; i++) { 17 var input = inputs[i]; 18 input.value = "hello"; 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <input type="radio" name="gender" value="男" />男<br /> 25 <input type="radio" name="gender" value="保密" />保密<br /> 26 <input type="radio" name="gender" value="女" />女<br /> 27 <input type="button" value="OK" onclick="btnClick()" /><br /> 28 29 <input type="text" /><br /> 30 <input type="text" /><br /> 31 <input type="text" /><br /> 32 <input type="text" /><br /> 33 <input type="text" /><br /> 34 <input type="button" value="GetElementsByTagName" onclick="btnClick2()" /> 35 </body> 36 </html>
C、getElementByTagName
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 function initEvent() { 6 var inputs = document.getElementsByTagName("input"); 7 for (var i = 0; i < inputs.length; i++) { 8 var input = inputs[i]; 9 input.onclick = btnInput; 10 } 11 } 12 13 function btnInput() { 14 var inputs = document.getElementsByTagName("input"); 15 for (var i = 0; i < inputs.length; i++) { 16 var input = inputs[i]; 17 //window.event.srcElement取得引发事件的控件 18 if (input == window.event.srcElement) 19 input.value = "呜呜！"; 20 else 21 input.value = "哈哈"; 22 } 23 } 24 </script> 25 </head> 26 <body onload="initEvent()"> 27 <input type="button" value="哈哈" /> 28 <input type="button" value="哈哈"/> 29 <input type="button" value="哈哈"/> 30 <input type="button" value="哈哈"/> 31 <input type="button" value="哈哈"/> 32 </body> 33 </html>
点击其中一个按钮
点击当前按钮时，获取当前触发按钮的事件：window.event.srcElement，给按钮动态绑定事件：input.onclick = btnInput;
这让我想起用Div+CSS布局时，选项卡切换也是这个原理。
3、简单的计算器案例
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 function calPlus() { 6 var firstNum = document.getElementById("firstNum").value; 7 var secondNum = document.getElementById("secondNum").value; 8 firstNum = parseInt(firstNum, 10); //转换为整型，10表示十进制，也可以转为二进制、八进制、十六进制 9 secondNum = parseInt(secondNum, 10); 10 document.getElementById("result").value = firstNum + secondNum; 11 } 12 </script> 13 </head> 14 <body> 15 <input id="firstNum" type="text" /> 16 + 17 <input id="secondNum" type="text" /> 18 <input type="button" onclick="calPlus();" value="=" /> 19 <input id="result" type="text" readonly="readonly" /> 20 </body> 21 </html>
4、注册同意页面，有10秒倒计时，打开页面不到10秒，同意按钮时禁用的。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 var intervalId; 6 var leftsecond = 10; 7 function countDown() { 8 var btnReg = document.getElementById("btnReg"); 9 if (btnReg) //如果网速慢的话，网页上的控件还没有加载！ 10 if (leftsecond <= 0) { 11 btnReg.value = "同意"; 12 btnReg.disabled = ""; 13 clearInterval(intervalId); 14 } else { 15 btnReg.value = "请仔细阅读条款（还剩" + leftsecond + "秒)"; 16 leftsecond--; 17 } 18 } 19 intervalId = setInterval("countDown()", 1000); 20 </script> 21 </head> 22 <body> 23 <textarea></textarea> 24 <input id="btnReg" type="button" value="同意" disabled="disabled" /> 25 </body> 26 </html>
5、document.write 示例
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script type="text/javascript"> 5 document.write("xxxxxxxxxxxxxxxxxxxxxxx"); 6 </script> 7 </head> 8 <body> 9 <p>sssssssssssssssssssssss</p> 10 <script type="text/javascript"> 11 document.write("yyyyyyyyyyyyyyyyyyyyyyyy"); 12 </script> 13 <!--在onclick使用document.write(txt)，会把当前页面的内容给冲掉--> 14 <input type="button" value="测试" onclick="document.write('eeeeeeeeeee');" /> 15 </body> 16 </html>
