DOM – 4.doucument属性

4.document属性

2.1 write

2.2 getElementById 方法

getElementsByName

getElementsByTagName

案例：全选反选

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

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

练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。

练习：图片浏览器。

4.document属性

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

2. document的方法：

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

<input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
    <script type="text/javascript">
        document.write('<font color=red>你好</font>');
    </script>

write经常在广告代码、整合资源代码中被使用。见备注

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

2.2 getElementById 方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
（*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个 RadioButton 的name一样，因此getElementsByName返回值是对象数组。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        //radio单选(集合)

        f1 = function () {

            var radios = document.getElementsByName("sex");

            for (var i = 0; i < radios.length; i++) {

                if (radios[i].checked) {

                    alert(radios[i].value);

                    break;

                }

            }

        }

        //checkbox多选

        function f2() {

            var s = "";

            var checkboxs = document.getElementsByName("number");

            for (var i = 0; i < checkboxs.length; i++) {

                if (checkboxs[i].checked) {

                    s

+= checkboxs[i].value + ";"

;

                }

            }

            alert(s);

        }

    </script>

</head>

<body>

    <input type="radio" value="man" checked="checked" name="sex" />男

    <input type="radio" value="woman" name="sex" />女

    <input type="radio" value="yao??" name="sex" />人妖？

    <input type="button" onclick="f1()" value="click" />

    <br />

    <div>

        <input type="checkbox" name="number" checked="checked" value="1" />1

        <input type="checkbox" name="number" value="2" />2

        <input type="checkbox" name="number" value="3" />3

         <input type="button" onclick="f2()" value="click" />

    </div>

</body>

</html>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        //全选

        function Allchecked() {

            //触发事件的对象 全选的checkbox

            var obb = event.srcElement;

            //获取所有的input标签

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                //判断当前的input对象是不是checkbox

                if (inputs[i].type == "checkbox") {

                    inputs[i].checked = obb.checked;

                }

            }

        }

        //取消全选

        function oneChecked() {

            //获取所有的input标签

            var inputs = document.getElementsByTagName("input");

            //全选框

            for (var i = 0; i < inputs.length; i++) {

                //判断当前的input对象是不是checkbox

                if (inputs[i].type == "checkbox") {

                    //判断当前的input对象不是全选时

                    if (inputs[i].id != document.getElementById('chkAll')) {

                        //假设所有checkbox被选中

                        var ischeckAll = true;

                        //再循环一次

                        for (var j = 0; j < inputs.length; j++) {

                            if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {

                                //判断是否被选中

                                if (!inputs[j].checked) {

                                    ischeckAll = false;

                                    break;

                                }

                            }

                        }

                        //

                        document.getElementById('chkAll').checked = ischeckAll;

                    }

                }

            }

        }

    </script>

</head>

<body>

    <div>

        <input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选

        <br />

        <input type="checkbox" value="A" onclick="oneChecked()" />吃饭

        <br />

        <input type="checkbox" value="B" onclick="oneChecked()" />睡觉

        <br />

        <input type="checkbox" value="C" onclick="oneChecked()" />玩电脑

        <br />

        <input type="button" onclick="reverseChecked()" value="反选" />

    </div>

</body>

</html>

案例：全选反选（完整代码）

显示行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```
```
    <script type="text/javascript">
```
```
        //1.全选
```
```
        function Allchecked() {
```

            //触发事件的对象 全选的checkbox

            var obb = event.srcElement;

            //获取所有的input标签

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                //判断当前的input对象是不是checkbox

                if (inputs[i].type == "checkbox") {

                    inputs[i].checked = obb.checked;

```
                }
```
```
            }
```
```
        }
```
```
        //2.取消全选
```
```
        function oneChecked() {
```

            //获取所有的input标签

            var inputs = document.getElementsByTagName("input");

```
            //全选框
```

            for (var i = 0; i < inputs.length; i++) {

                //判断当前的input对象是不是checkbox

                if (inputs[i].type == "checkbox") {

                    //判断当前的input对象不是全选时

                    if (inputs[i].id != document.getElementById('chkAll')) {

                        //假设所有checkbox被选中

```
                        single();
```
```
                    }
```
```
                }
```
```
            }
```
```
        }
```
```
        //3.反选
```
```
        function reverseChecked() {
```

            //获取所有的input标签

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                //判断当前的input对象是不是checkbox

                if (inputs[i].type == "checkbox") {

                    //1.判断当前的input对象不是全选时

                    if (inputs[i].id != document.getElementById('chkAll')) {

```
                        //取反
```

                        inputs[i].checked = !inputs[i].checked;

```
                    }
```
```
                }
```
```
            }
```
```
            single();
```
```
        }
```

        //4.判断所有子checkbox是否被选中

```
        function single() {
```

            var inputs = document.getElementsByTagName("input");

```
            var ischeckAll = true;
```
```
            //再循环一次
```

            for (var j = 0; j < inputs.length; j++) {

                if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {

                    //判断是否被选中

                    if (!inputs[j].checked) {

                        ischeckAll = false;

```
                        break;
```
```
                    }
```
```
                }
```
```
            }
```

            document.getElementById('chkAll').checked = ischeckAll;

```
        }
```
```
</script>
```
```
</head>
```
```
<body>
```
```
    <div>
```

        <input type="checkbox" id="chkAll" value="全选" onclick="Allchecked()" />全选

```
<br />
```

        <input type="checkbox" value="A" onclick="oneChecked()" />吃饭

```
<br />
```

        <input type="checkbox" value="B" onclick="oneChecked()" />睡觉

```
<br />
```

        <input type="checkbox" value="C" onclick="oneChecked()" />玩电脑

```
<br />
```

        <input type="button" onclick="reverseChecked()" value="反选" />

```
    </div>
```
```
</body>
```
```
</html>
```

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

显示行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```
```
    <script type="text/javascript">
```
```
        window.onload = function () {
```

            var haha = document.getElementsByTagName("input");

            for (var i = 0; i < haha.length; i++) {

                if (haha[i].type == "button") {

                    //注册onclick事件

                    haha[i].onclick = function () {

                        //alert(i);   //i的值等于7,因为onload加载完i值等于最后的6,然后再循环1次

                        for (var i = 0; i < haha.length; i++) {

                            if (haha[i].type == "button") {

                                haha[i].value = "哈哈";

```
                            }
```
```
                        }
```

                        //触发事件的对象

                        event.srcElement.value = "呜呜";

```
                    }
```
```
                }
```
```
            }
```
```
        };
```
```
</script>
```
```
</head>
```
```
<body>
```
```
    <div>
```

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

        <input type="button" value="哈哈" name="haha" /><br />

```
    </div>
```
```
</body>
```
```
</html>
```

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

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

隐藏行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```
```
    <script type="text/javascript">
```
```
        var count = 10;
```
```
        //设置计数器
```

        var tmrId = setInterval("test()", 1000);

```
　       function test() {
```

        var btn = document.getElementById("btn");

```
        if (count > 0) {
```
```
                aa = Date();
```

                btn.value = "请仔细阅读（" + count + "）秒";

```
                count--;
```
```
            } else {
```
```
                btn.value = "同意";
```
```
                btn.disabled = false;
```
```
                clearInterval(tmrId);
```
```
            }
```
```
        }
```
```
</script>
```
```
</head>
```
```
<body>
```
```
    <div>
```

        <input id="btn" type="button" value="设置" disabled="disabled" />

```
    </div>
```
```
</body>
```
```
</html>
```

倒计时中 --- 》

练习：加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中。

练习：图片浏览器。

显示行号复制代码？这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```
```
    <script type="text/javascript">
```
```
        window.onload = function () {
```

            var ul = document.getElementById("meinv");

```
            //获取ul中的a标签
```

            var nv = ul.getElementsByTagName("a");

            for (var i = 0; i < nv.length; i++) {

                //为ul下的a标签注册onclick事件

                nv[i].onclick = function () {

                    var img = document.getElementById("i1");

                    //img的地址等于当前点击a标签地址

                    img.src = event.srcElement.href;

```
                    //防止跳转
```
```
                    return false;
```
```
                }
```
```
            }
```
```
        }
```
```
</script>
```
```
</head>
```
```
<body>
```
```
    <ul id="meinv">
```

        <li><a href="image/1.jpg">美女1</a></li>

        <li><a href="image/2.jpg">美女2</a></li>

        <li><a href="image/3.jpg">美女3</a></li>

        <li><a href="image/4.jpg">美女4</a></li>

```
    </ul>
```
```
    <br />
```

    <img id="i1" src="data:image/1.jpg" />

```
</body>
```
```
</html>
```

DOM – 4.doucument属性的更多相关文章

html标签属性（attribute）和dom元素的属性（property）
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性引用文档的子节点 docum ...
HTML DOM 的nodeType属性
在HTML DOM中每一部分都是节点: HTML元素是元素节点 HTML中属性是属性节点文本是文本节点注释是注释节点这时我们要给它区分开我们就可以使用HTML DOM的nodeType属性 no ...
js 获取DOM的style属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
DOM常用的属性和方法
之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...
DOM相关方法，属性整理
DOM相关方法,属性整理1.获取元素的方法 1根据id获取对象 document.getElementById(''); 2根据标签名获取对象 document.getElementsByTagNam ...
DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
HTML DOM对象的属性和方法介绍(原生JS方法)
HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口), ...
HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

随机推荐

揭露QPS增高后的秘密
导读很多人在实际的开发中害怕系统的QPS增高,因为觉得QPS太高会导致系统挂掉;基于这种心理会想着尽量的降低系统的请求量,甚至有人会将很多处理放置到服务中来处理,这样外部发一起请求,服务就把所有的业 ...
51Nod 1378 夹克老爷的愤怒
Description 一棵树,可以进行染色,被染色的点可以控制与它距离不超过 \(k\) 的所有点,问控制整棵树最少需要染几个点. Sol 贪心. 记录一下最深的未染色点和最浅的染色点,判断一下能否 ...
Java abstract
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型,也就是编译时类型.抽象类就相当于一类的半成品, ...
vb.net 控件（包括字体）随窗体按比例缩放
Public Class frmDl Dim x As Single = 0 Dim y As Single = 0 Private Sub frmDl_Load(ByVal sender As Sy ...
3D音效
摘自:http://baike.baidu.com/view/1330437.htm?fr=aladdin 3D音效就是用扬声器仿造出似乎存在但是虚构的声音.例如扬声器仿造头顶上有一架飞机从左至右飞过 ...
在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作
Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...
sharepoint---RBS回收站清空设置
默认天数 :
pypi 国内镜像及修改全局方法
PyPi的官方网站为https://pypi.python.org,有时访问中会很慢,使用pip命令安装带其他依赖包的安装包,会经常失败.解决办法,使用国内PyPi镜像网站,修改pip的源. 网上搜索 ...
[Linux]centOS7下RPM安装Perl
1.下载rpm依赖包,依照顺序安装. perl-parent-0.225-244.el7.noarch perl-HTTP-Tiny-0.033-3.el7.noarch perl-podla ...
c语言实现面向对象OOC
这种问题比较锻炼思维,同时考察c和c++的掌握程度.如果你遇到过类似问题,此题意义自不必说.如果用c实现c++,主要解决如何实现封装,继承和多态三大问题,本文分两块说. 1.封装 // Example ...

DOM – 4.doucument属性

案例：全选反选（完整代码）

DOM – 4.doucument属性的更多相关文章

随机推荐

热门专题