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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick1() {
var txt = document.getElementById("tb1");
alert(txt.value);
//alert(tb1.value); //不推荐tb1.value这种方式
}
function btnClick2() {
var txt = document.getElementById("tb2");
alert(txt.value);
//alert(Form1.tb2.value); //不推荐tb1.value这种方式,如果<input>被<form>标签包含着，就要Form1.tb2.value取得文本框的值
}
</script>
</head>
<body>
<input type="text" id="tb1" />
<input type="button" value="TextBox1" onclick="btnClick1()" />
<form action="Event.htm" id="Form1">
<input type="text" id="tb2" />
<input type="button" value="TextBox2" onclick="btnClick2()" />
</form>
</body>
</html>
B、getElementByName
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
//在JS中 for (var r in radios)并不会像C#中，遍历每个元素的值，而是遍历的Key.
for (var i = ; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
} function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = ; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<body>
<input type="radio" name="gender" value="男" />男<br />
<input type="radio" name="gender" value="保密" />保密<br />
<input type="radio" name="gender" value="女" />女<br />
<input type="button" value="OK" onclick="btnClick()" /><br /> <input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="button" value="GetElementsByTagName" onclick="btnClick2()" />
</body>
</html>
C、getElementByTagName
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = ; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnInput;
}
} function btnInput() {
var inputs = document.getElementsByTagName("input");
for (var i = ; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement取得引发事件的控件
if (input == window.event.srcElement)
input.value = "呜呜！";
else
input.value = "哈哈";
}
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="哈哈" />
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
</html>
点击其中一个按钮
点击当前按钮时，获取当前触发按钮的事件：window.event.srcElement，给按钮动态绑定事件：input.onclick = btnInput;
这让我想起用Div+CSS布局时，选项卡切换也是这个原理。
3、简单的计算器案例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function calPlus() {
var firstNum = document.getElementById("firstNum").value;
var secondNum = document.getElementById("secondNum").value;
firstNum = parseInt(firstNum, ); //转换为整型，10表示十进制，也可以转为二进制、八进制、十六进制
secondNum = parseInt(secondNum, );
document.getElementById("result").value = firstNum + secondNum;
}
</script>
</head>
<body>
<input id="firstNum" type="text" />
+
<input id="secondNum" type="text" />
<input type="button" onclick="calPlus();" value="=" />
<input id="result" type="text" readonly="readonly" />
</body>
</html>
4、注册同意页面，有10秒倒计时，打开页面不到10秒，同意按钮时禁用的。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var intervalId;
var leftsecond = ;
function countDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) //如果网速慢的话，网页上的控件还没有加载！
if (leftsecond <= ) {
btnReg.value = "同意";
btnReg.disabled = "";
clearInterval(intervalId);
} else {
btnReg.value = "请仔细阅读条款（还剩" + leftsecond + "秒)";
leftsecond--;
}
}
intervalId = setInterval("countDown()", );
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value="同意" disabled="disabled" />
</body>
</html>
5、document.write 示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
document.write("xxxxxxxxxxxxxxxxxxxxxxx");
</script>
</head>
<body>
<p>sssssssssssssssssssssss</p>
<script type="text/javascript">
document.write("yyyyyyyyyyyyyyyyyyyyyyyy");
</script>
<!--在onclick使用document.write(txt)，会把当前页面的内容给冲掉-->
<input type="button" value="测试" onclick="document.write('eeeeeeeeeee');" />
</body>
</html>
