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>

image
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>

imageimage 

（*）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>

image

image

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

显示行号 复制代码 ？ 这是一段程序代码。 
  1. <!DOCTYPE html>

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

  3. <head>

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

  5.     <title></title>

  6.     <script type="text/javascript">

  7.         //1.全选

  8.         function Allchecked() {

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

  10.             var obb = event.srcElement;

  11.             //获取所有的input标签

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

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

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

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

  16.                     inputs[i].checked = obb.checked;

  17.                 }

  18.             }

  19.         }

  20.         //2.取消全选

  21.         function oneChecked() {

  22.             //获取所有的input标签

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

  24.             //全选框

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

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

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

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

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

  30.                         //假设所有checkbox被选中

  31.                         single();

  32.                     }

  33.                 }

  34.             }

  35.         }

  36.         //3.反选

  37.         function reverseChecked() {

  38.             //获取所有的input标签

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

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

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

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

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

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

  45.                         //取反

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

  47.                     }

  48.                 }

  49.             }

  50.             single();

  51.         }

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

  53.         function single() {

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

  55.             var ischeckAll = true;

  56.             //再循环一次

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

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

  59.                     //判断是否被选中

  60.                     if (!inputs[j].checked) {

  61.                         ischeckAll = false;

  62.                         break;

  63.                     }

  64.                 }

  65.             }

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

  67.         }

  68. </script>

  69. </head>

  70. <body>

  71.     <div>

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

  73. <br />

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

  75. <br />

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

  77. <br />

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

  79. <br />

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

  81.     </div>

  82. </body>

  83. </html>

 


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

显示行号 复制代码 ？ 这是一段程序代码。 
  1. <!DOCTYPE html>

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

  3. <head>

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

  5.     <title></title>

  6.     <script type="text/javascript">

  7.         window.onload = function () {

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

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

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

  11.                     //注册onclick事件

  12.                     haha[i].onclick = function () {

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

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

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

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

  17.                             }

  18.                         }

  19.                         //触发事件的对象

  20.                         event.srcElement.value = "呜呜";

  21.                     }

  22.                 }

  23.             }

  24.         };

  25. </script>

  26. </head>

  27. <body>

  28.     <div>

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

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

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

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

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

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

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

  36.     </div>

  37. </body>

  38. </html>

 

image

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

隐藏行号 复制代码 ？ 这是一段程序代码。 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         var count = 10;
  8.         //设置计数器
  9.         var tmrId = setInterval("test()", 1000);
  10. 　       function test() {
  11.         var btn = document.getElementById("btn");
  12.         if (count > 0) {
  13.                 aa = Date();
  14.                 btn.value = "请仔细阅读（" + count + "）秒";
  15.                 count--;
  16.             } else {
  17.                 btn.value = "同意";
  18.                 btn.disabled = false;
  19.                 clearInterval(tmrId);
  20.             }
  21.         }
  22. </script>
  23. </head>
  24. <body>
  25.     <div>
  26.         <input id="btn" type="button" value="设置" disabled="disabled" />
  27.     </div>
  28. </body>
  29. </html>




倒计时中 --- 》  image



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


练习：图片浏览器。


imageimage  





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




    

  1. <!DOCTYPE html>

    

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

    

  3. <head>

    

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

    

  5.     <title></title>

    

  6.     <script type="text/javascript">

    

  7.         window.onload = function () {

    

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

    

  9.             //获取ul中的a标签

    

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

    

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

    

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

    

  13.                 nv[i].onclick = function () {

    

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

    

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

    

  16.                     img.src = event.srcElement.href;

    

  17.                     //防止跳转

    

  18.                     return false;

    

  19.                 }

    

  20.             }

    

  21.         }

    

  22. </script>

    

  23. </head>

    

  24. <body>

    

  25.     <ul id="meinv">

    

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

    

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

    

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

    

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

    

  30.     </ul>

    

  31.     <br />

    

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

    

  33. </body>

    

  34. </html>





 








            

            
posted @ 
2013-06-20 21:20 
【唐】三三 
阅读(669) 
评论(0) 
编辑 
收藏 
举报