Dom笔记5：document对象的属性

最新推荐文章于 2021-06-17 07:08:31 发布

zhanzkw

最新推荐文章于 2021-06-17 07:08:31 发布

阅读量575

点赞数

分类专栏： Dom 文章标签： button input radiobutton function html 文档

本文链接：https://blog.csdn.net/studyalllife/article/details/6752346

版权

Dom 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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=" 点击 " οnclick="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.οnclick=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 οnlοad="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>

zhanzkw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom笔记5：document对象的属性

document 是 window 对象的一个属性，代表着当前的HTML页面，因为使用 window 对象成员的时候可以省略 window. ，所以一般直接写 document。 document 的方法：（ 1 ） write ：向文档中写入内容。 w
复制链接

扫一扫