下面我们接着旅程2继续我们的Dom征程。在这片博文中我完成了document属性的所有介绍，并在最后用几个小案例充分的讲解了这些知识点。这些里面有些特效很常见，在我们网站注册的时候我们会限制单击控件的时间，让用户有足够的时间读完协议控件才能可用，实现注册。
- document属性1
(1) document是window对象的一个属性，因为使用window对象成员的时候可以省略window,所以一直写document。
(2) document的方法
1) write：向文档写入内容，writeln和write差不多，只不过最后添加一个回车。
<script type="text/javascript">
document.write("<a href='http://www.baidu/com'>百度</a>");
</script>
<input type="button" value="点击" onclick="document.write('您好')" />
注释：在onclick等事件中写的代码会冲掉页面的内容，只有在页面加载过程中write才会与原有内容结合在一起。
2) write经常在广告代码，整合资源代码中被广泛的使用。
(3) getElementById方法(非常有用)，根据元素的Id获得对象，网页中Id不能重复，也可以直接通过元素的Id来引用元素，但是有有效范围之类的问题，因此不建议通过Id操作对象，而是通过getElementById。
<script type="text/javascript">
function btnClick() {
var txt = document.getElementById("textBox1");
//alert(txt.value);
alert(textBox1.value);
}
function btnClick2() {
var txt = document.getElementById("textBox2");
//alert(txt.value);
//alert(textBox2.value) //这句话是错误的
alert(form1.textBox2.value);
}
</script>
<input type="text" id="textBox1" />
<input type="button" value="点一下" onclick="btnClick()" />
<form action="f1f2.htm" id="form1">
<input type="text" id="textBox2" />
<input type="button" value="点击" onclick="btnClick2()" />
</form>
注释：建议使用getElementById获取对象
(4) getElementByName，根据元素的name获取对象，由于页面中元素的name可以重复，比如：多个RadioButton的name一样，因此getElementByName返回值是对象数组
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
/*在JS中下面的代码不像C#中的foreach，并不是遍历每一个元素，而是遍历Key
for (var r in radios) {
alert(r.value);
}*/
for (var i = 0; i < radios.length; i++) {
var radio = radios[i];
alert(radio.value);
}
}
</script>
<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="click" onclick="btnClick()" />
(5) getElementsByTagName，获得指定标签过程的元素数组，比如：getElementByTagName(“P”)可以获得所有的<p>标签。
function btnClick1() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "韩迎龙";
}
}
<input type="button" value="click" onclick="btnClick()" />
<input type="button" value="click" />
<input type="button" value="click" />
<input type="button" value="click" onclick="btnClick1()" />
案例1：当单击某个控件的时候某个控件的属性变化案例，也就是我们的控件上面显示的是”哈哈”，但是当我们单击的时候就会变成”Hello”，当我们单击其他的时候前面的控件恢复原始状态。
<script type="text/javascript">
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick; //单击控件的onclick事件
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement——>取得引发事件的控件
if (input == window.event.srcElement) {
input.value = "Hello";
}
else {
input.value = "哈哈";
}
}
}
</script>
<body onload="initEvent()">
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
<input type="button" value="哈哈" />
</body>
案例2：十秒钟后协议文本框的注册按钮才能够点击，时钟倒数(btn.disabled=true)。
思路 1.注册按钮初始化状态不可用，disabled
2.启动定时器，setInterval,设定一个初始值为10的全局变量，1秒钟运行一次CountDown方法，在CountDown方法中对全局变量倒数，然后将到数值写在注册按钮上面(请仔细阅读协议(还剩8秒))
3.直到全局变量值<=0,就让注册按钮可用，将按钮的文本设置为”同意”。
<script type="text/javascript">
var leftSeconds = 10;
var intervalId;
function CountDown() {
var btnReg = document.getElementById("btnReg");
if (btnReg) { //如果网页速度非常慢的话，可能定时器运行的时候控件还没有加载
if (leftSeconds <= 0) {
btnReg.value = "同意";
btnReg.disabled = "";
clearInterval(intervalId); //停止定时器
}
else {
btnReg.value = "请仔细阅读协议(还剩" + leftSeconds + "秒)";
leftSeconds--;
} } }
intervalId = setInterval("CountDown()", 1000);
</script>
<body>
<textarea></textarea><br /><br />
<input type="button" value="同意" disabled="disabled" id="btnReg" />
</body>
案例3：加法计算器，两个文本框中输入数据，点击[=]按钮将相加的结果放在第三个文本框中。
<script type="text/javascript">
function CalClick() {
var value1 = document.getElementById("txt1").value;
var value2 = document.getElementById("txt2").value;
value1 = parseInt(value1, 10);
value2 = parseInt(value2, 10);
document.getElementById("txtResult").value = value1 + value2;
}
</script>
<body>
<input type="text" id="txt1" />+<input type="text" id="txt2" />
<input type="button" onclick="CalClick()" value="=" />
<input type="text" id="txtResult" readonly="readonly" />
</body>
案例3：美女时钟，每一秒循环显示一个美女，考虑(当最后一秒的时候变成个位数)。
<script type="text/javascript">
//var now = new Date(); 不要写在这里，否则取得的时间不变
function FillTwoLen(i) {
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refersh() {
var imgMM = document.getElementById("imgMM");
if (!imgMM) {
return;
}
var now = new Date();
var fileName = FillTwoLen(now.getHours()) + "-" + FillTwoLen(now.getSeconds()) + ".jpg";
imgMM.src = "images/" + fileName;
}
setInterval("Refersh()", 1000);
</script>
<body onload="Refersh()">
<img id="imgMM" src="" />
</body>