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. 测试耗电量的工具（Android）

    Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资源的性能测试小工具. 支持SDK:Android2.2以及以上版本 Emmagee功能介绍 1.检测当前时间被测应用占用的CP ...

  2. Unity视频播放的各种实现方式汇总

    http://www.taidous.com/bbs/article-860-1.html  Unity视频播放有很多种实现方式,可根据要求来选择适当的实现,这里总结一下: 1. MovieTextu ...

  3. 滚动条--nicescroll插件（兼容各种浏览器，低至IE5）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. jmeter笔记6

     一.图形报表   图表底部参数的含义如下: 样本数目是总共发送到服务器的请求数. 最新样本是代表时间的数字,是服务器响应最后一个请求的时间. 吞吐量是服务器每分钟处理的请求数.  平均值是总运行时间 ...

  5. CentOS7+JDK8编译Hadoop2.6.4

    1. 下载相关软件 apache-maven-3.3.1-bin.tar.gz protobuf-2.5.0.tar.gz hadoop-2.6.4-src.tar.gz 2.配置好jdk8环境(请看 ...

  6. 10个很有用的高级Git命令

    迄今,我已经使用Git很长一段时间了,考虑分享一些不管你是团队开发还是个人项目,都受用的高级git命令. 1. 输出最后一次提交的改变 这个命令,我经常使用它 来发送其他没有使用git的人来检查或者集 ...

  7. hive数据库的一些应用

    1.创建表格create table usr_info(mob string,reason string,tag string) row format delimited fields termina ...

  8. [JS] 面向对象的5种写法和拓展JS对象的写法

    面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...

  9. C# EXCEL(.xls和.xlsx)导入到数据库

    C# EXCEL(.xls和.xlsx)导入到数据库  转(http://www.cnblogs.com/bart-cai/articles/2716555.html) 原理:1.判断是否是Excel ...

  10. JavaWeb基础：Servlet

    Servlet 基本概念 Servlet是Sun公司提出的一种用于开发动态Web资源的技术规范: Servlet是一个Java接口, 用户想要开发自定义的Servlet可以通过以下步骤: 编写实现Se ...