DOM(7)——document的属性、方法

一、document的属性

document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document 。

 

二、document的方法：

1、write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车。

<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />

（1）在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。

    <script type="text/javascript">
        document.write('<font color=red>你好</font>');
    </script>

<script type="text/javascript">
    document.write("<font color=red>红色呀</font>");
</script>

（2）write经常在广告代码、整合资源代码中被使用：

① 广告代码的例子：在http://heima8.com/注册一个账户（测试用 账户名：itcast0710 密码：123456），申请一个广告代码，然后放到页面中。

② 整合资源的例子：百度新闻 http://news.baidu.com/newscode.html

③ 百度新闻代码相当于页面中嵌入另外一个网站的js文件，js文件就是一个大的write语句，这样的好处就是主页面不用写死内容，被嵌入的js内容变了嵌入的内容就变了。

（3）内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。

 

2、getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById 。

 

3、getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

 

4、getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的<p>标签。

===============================

1、案例：实现checkbox的全选，反选。

2、案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。

3、案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true ) 。

思路： （1）注册按钮初始状态为不可用，disabled 。

（2）启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法中对全局变量倒数，然后将倒数的值写到注册按钮上（请仔细阅读协议（还剩8秒））。

（3）直到全局变量值为<=0，就让注册按钮可用，将按钮的文本设置为“同意” 。

4、练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。parseInt()把字符串转换成整数。

    <input type="text" id="num1" />+<input type="text" id="num2" />
    <input type="button" onclick="calc()" value="=" /><input type="text" id="num3" />
        function calc() {
            var s1 = document.getElementById("num1").value;
            var s2 = document.getElementById("num2").value;
            var i3 = parseInt(s1) + parseInt(s2); //parseInt转换成数字
            document.getElementById("num3").value = i3;
        }

5、练习：美女时钟。