1.document 对象常用的有三种：

A、document.getElementById:通过html元素的Id，来获取html对象。适用于单个的html元素。

B、document.getElementByName:通过html相同的名字获取一组对象，适用于radio 元素中name都有相同的名称。

C、document.getElementByTagName:通过html元素标签的名称，获取到html页面某些元素标签对象。

D、document.write是在html页面的元素融合在一起，不能再事件中使用document.write("sss"),否则会把网页上原有的内容给覆盖掉，切记！

现在百度新闻代码、广告联盟、CMZZ流量统计等功能都是做好的js代码块，可以快速的融合到你的网站中，实际上他们在JS脚本块中用的也是document.write()

document 对象还有很多，还有一一列举，有兴趣的话可以自己研究一下

2. document 实例：

A、getElementById

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

 <head>

     <title></title>

     <script type="text/javascript">

         function btnClick1() {

             var txt = document.getElementById("tb1");

             alert(txt.value);

             //alert(tb1.value);  //不推荐tb1.value这种方式

         }

         function btnClick2() {

             var txt = document.getElementById("tb2");

             alert(txt.value);

             //alert(Form1.tb2.value);  //不推荐tb1.value这种方式,如果<input>被<form>标签包含着，就要Form1.tb2.value取得文本框的值

         }

     </script>

 </head>

 <body>

    <input type="text" id="tb1" />

    <input type="button" value="TextBox1" onclick="btnClick1()" />

    <form action="Event.htm" id="Form1">

        <input type="text" id="tb2" />

        <input type="button" value="TextBox2" onclick="btnClick2()" />

    </form>

 </body>

 </html>

B、getElementByName

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

 <head>

     <title></title>

     <script type="text/javascript">

         function btnClick() {

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

             //在JS中 for (var r in radios)并不会像C#中，遍历每个元素的值，而是遍历的Key.

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

                 var radio = radios[i];

                 alert(radio.value);

             }

         }

         function btnClick2() {

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

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

                 var input = inputs[i];

                 input.value = "hello";

             }

         }

     </script>

 </head>

 <body>

     <input type="radio" name="gender" value="男" />男<br />

     <input type="radio" name="gender" value="保密" />保密<br />

     <input type="radio" name="gender" value="女" />女<br />

     <input type="button" value="OK" onclick="btnClick()" /><br />

 <input type="text" /><br />

 <input type="text" /><br />

 <input type="text" /><br />

 <input type="text" /><br />

 <input type="text" /><br />

 <input type="button" value="GetElementsByTagName" onclick="btnClick2()" />

 </body>

 </html>

C、getElementByTagName

 <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 = ; i < inputs.length; i++) {

                 var input = inputs[i];

                 input.onclick = btnInput;

             }

         }

         function btnInput() {

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

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

                 var input = inputs[i];

                 //window.event.srcElement取得引发事件的控件

                 if (input == window.event.srcElement)

                     input.value = "呜呜！";

                 else

                     input.value = "哈哈";

             }

         }

     </script>

 </head>

 <body onload="initEvent()">

    <input type="button" value="哈哈" />

    <input type="button" value="哈哈"/>

    <input type="button" value="哈哈"/>

    <input type="button" value="哈哈"/>

    <input type="button" value="哈哈"/>

 </body>

 </html>

点击其中一个按钮

点击当前按钮时，获取当前触发按钮的事件：window.event.srcElement，给按钮动态绑定事件：input.onclick = btnInput;

这让我想起用Div+CSS布局时，选项卡切换也是这个原理。

3、简单的计算器案例

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

 <head>

     <title></title>

     <script type="text/javascript">

         function calPlus() {

             var firstNum = document.getElementById("firstNum").value;

             var secondNum = document.getElementById("secondNum").value;

             firstNum = parseInt(firstNum, );   //转换为整型，10表示十进制，也可以转为二进制、八进制、十六进制

             secondNum = parseInt(secondNum, );

             document.getElementById("result").value = firstNum + secondNum;

         }

     </script>

 </head>

 <body>

    <input id="firstNum" type="text" />

    +

    <input id="secondNum" type="text" />

    <input type="button" onclick="calPlus();" value="=" />

    <input id="result" type="text" readonly="readonly" />

 </body>

 </html>

4、注册同意页面，有10秒倒计时，打开页面不到10秒，同意按钮时禁用的。

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

 <head>

     <title></title>

     <script type="text/javascript">

         var intervalId;

         var leftsecond = ;

         function countDown() {

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

             if (btnReg)  //如果网速慢的话，网页上的控件还没有加载！

                 if (leftsecond <= ) {

                     btnReg.value = "同意";

                     btnReg.disabled = "";

                     clearInterval(intervalId);

                } else {

                     btnReg.value = "请仔细阅读条款（还剩" + leftsecond + "秒)";

                     leftsecond--;

                 }

             }

             intervalId = setInterval("countDown()", );

     </script>

 </head>

 <body>

    <textarea></textarea>

    <input id="btnReg" type="button" value="同意" disabled="disabled" />

 </body>

 </html>

5、document.write 示例

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

 <head>

     <title></title>

     <script type="text/javascript">

         document.write("xxxxxxxxxxxxxxxxxxxxxxx");

     </script>

 </head>

 <body>

    <p>sssssssssssssssssssssss</p>

    <script type="text/javascript">

        document.write("yyyyyyyyyyyyyyyyyyyyyyyy");

    </script>

    <!--在onclick使用document.write(txt)，会把当前页面的内容给冲掉-->

    <input type="button"  value="测试" onclick="document.write('eeeeeeeeeee');" />

 </body>

 </html>

JavaScript之document对象使用的更多相关文章

  1. 用JAVA编写浏览器内核之实现javascript的document对象与内置方法

    原创文章.转载请注明. 阅读本文之前,您须要对浏览器怎样载入javascript有一定了解. 当然,对java与javascript本身也须要了解. 本文首先介绍浏览器载入并执行javascript的 ...

  2. javascript之document对象

    一.修改网页元素 当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现. 例3-17 <html> < ...

  3. Javascript的document对象

    对象属性 document.title                 //设置文档标题等价于HTML的<title>标签 document.bgColor               / ...

  4. javascript DOM document对象

    document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...

  5. JavaScript 之 document对象

    对象属性document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)do ...

  6. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  7. JavaScript Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  8. Javascript之document对象用法（很重要）

    一.找到元素 document.getElementById("id"):根据id找层,最多找一个 var a=document.getElementById("id&q ...

  9. javascript中document对象的属性和方法

    document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...

随机推荐

  1. html 实体 => htmlspecialchars

    因为没有办法判断用户输入的数据是否安全, 可能含有和sql语句相冲突的字符,比如 '  " < >,那就有一个办法, 把这些特殊字符处理一下,比如吧空格符号变成 ,这样sql语句 ...

  2. 测序原理 - PacBio技术资料

    手头有一套完整的PacBio技术资料,会慢慢的总结到博客上. 写在前面:PacBio公司主要有两个测序平台一个是RS,一个是最新的Sequel,下面如果没有指明则是在讲RS平台. SMRT测序技术总览 ...

  3. android中的通信机制总结

      第一种:使用handler来进行通信   handler 大家可以把它想象成主线程(UI线程)的一个子线程,它可以给主线程(UI线程)发送数据从而更新主线程(UI线程)的UI与逻辑,handler ...

  4. MariaDB 加密特性及使用方法

    版权声明:本文由吴洪辉原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/193 来源:腾云阁 https://www.qclo ...

  5. java 集合2（迭代器）

    迭代器方法:(把迭代器想象成抓娃娃机的爪子) hasNext()     问是否有元素可遍历,如果有元素可以遍历,返回true,否则返回false 工作原理:这一个迭代的过程是这样的,获取到迭代器时候 ...

  6. mongodb配置及简单示例

    安装 在官网下载安装 https://www.mongodb.com/ 配置 我的电脑—>右键属性—>左边列表中的高级程序设置—>环境变量 点击path 把你的mongodb文件路径 ...

  7. canvas drawImage异步特性

    先看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. .net 时间戳和日期互转 【转】http://www.cnblogs.com/zhuiyi/p/5307540.html

    .net 时间戳和日期互转 1.时间戳转日期public static DateTime IntToDateTime(int timestamp){ return TimeZone.CurrentTi ...

  9. <mvc:annotation-driven />注解意义

    <mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案. <mvc:annotation-dr ...

  10. 前端面试题之nina分享

    HTML相关 1.<!DOCTYPE>标签的定义与用法. <!DOCTYPE>的定义: <!DOCTYPE>声明位于文档中的最前面的位置,处于<html> ...