JavaScript之document对象使用

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>

JavaScript之document对象使用

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>

View Code