Dom笔记5：document对象的属性

来源：互联网发布：阿里云9.9学生机怎么用编辑：程序博客网时间：2024/06/07 16:32

document 是 window 对象的一个属性，代表着当前的HTML页面，因为使用 window 对象成员的时候可以省略 window. ，所以一般直接写 document。

document 的方法：

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

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

注意：如果在 onclick 等事件中（此时页面已经加载完毕了）写的代码，会冲掉页面中的内容。
必须只有在页面加载过程中（即页面下载过程中） write 才会与原有内容融合在一起。

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

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

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

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

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

<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=0;i<inputs.length;i++)        {            var input=inputs[i];            input.onclick=btnclick;//为控件绑定事件  input的点击事件绑定为自定义事件btnclick，注意，不是btnclick（），不带括号。        }    }        //控件事件    function btnclick()    {        var inputs=document.getElementsByTagName("input");        for(var i=0;i<inputs.length;i++)        {            var input=inputs[i];           // window.event.srcElement  取得引发btnclick事件的控件            if(input==window.event.srcElement)                {                input.value="呜呜";                }            else                {                input.value="哈哈";                }        }    }        </script></head><body onload="initEvent()">//在此处初始化绑定事件，注意！    <input id="Button1" type="button" value="哈哈" />    <input id="Button2" type="button" value="哈哈" />    <input id="Button4" type="button" value="哈哈" />    <input id="Button5" type="button" value="哈哈" />    <input id="Button6" type="button" value="哈哈" />    <input id="Button7" type="button" value="哈哈" />    <input id="Button3" type="button" value="哈哈" /></body></html>

案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。

思路：
1：注册按钮初始状态为不可用，disable。
2：启动定时器，setInterval，1秒钟运行一次CountDown方法，设定一个初始值为10的全局变量，在CountDown方法总对全局变量进行倒数，然后将倒数的值写到注册按钮上（请仔细阅读注册协议（还剩8秒））。
3：直到全局变量的值<=0，就让注册按钮为可用，将按钮的文本设置为“同意”。

html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>无标题页</title>    <script type="text/javascript">    var leftSeconds=10;    var interTimer;    function CountDown()    {        var btnReg=document.getElementById("btnReg");        //在这里先判断一下按钮控件是否已经加载完毕，如果没有加载好，就不能用。（如果网速慢的话，可能定时器运行时候控件还没有加载完成！）        if(btnReg)        {            if(leftSeconds<=0)            {                btnReg.value="同意";                btnReg.disabled=false;//或者btnReg.disabled="";也行，控件设为可用                clearInterval(interTimer);//停止定时器            }            else            {            btnReg.value="请仔细阅读注册协议（还剩"+leftSeconds+"秒）";            leftSeconds--;            }        }    }    interTimer=setInterval("CountDown()",1000);//启动定时器，一秒运行一次    </script></head><body><textarea></textarea>    <input id="btnReg" type="button" value="同意" disabled="disabled"/></body></html>