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. 队列 - 从零开始实现by C++

    参考链接:数据结构探险-队列篇 数据结构太重要了,不学好是没法进行软件开发的. C++写数据结构基本套路:一个.h文件写该数据结构类的接口:一个.cpp文件写接口的具体实现:一个main.cpp用于测 ...

  2. Unity3D WebCamTexture 调用外部摄像头

    http://www.itnose.net/detail/6259004.html 一:Unity 中使用WebCamTexture 调用摄像头实现拍照和摄像. using UnityEngine; ...

  3. SpringMVC--xxx.xml配置

    <!--configure the setting of springmvcDispatcherServlet and configure the mapping--> <servl ...

  4. DBUtils学习

    1.       DBUtils是JDBC的简单封装,可以和JDBC混合使用. 2.       DBUtils对结果集自动封装为JavaBean是有着苛刻要求的:必须满足JavaBean的规范,其次 ...

  5. python list对象

    list对象 1.list定义l=['first','second'] 2.list追加对象list.append('aa');append的方法总是把元素追加到末尾 insert(索引号,'项目') ...

  6. (06)odoo报表

    ----------更新时间:18:06 2016-09-18 星期日18:13 2016-04-05 星期二10:31 2016-03-01 星期二----------* odoo8 采用是Qweb ...

  7. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  8. js——<script>标签的加载顺序

    用了很久的JavaScript,今天突然就碰见了将一个js文件放在<head></head>与<body></body>标签中,一个不可以执行,一个可以 ...

  9. excel快捷键设置

    Excel技能 按键 结果 序号 Alt+1 合并后居中 1 ALT+2 边框 2 ALT+3 边框线型 3 ALT+4 格式刷 4 ALT+5 清除格式 5 CTRL+SHIFT+P 设置字体 6 ...

  10. netty4 连通步骤

    转载:http://xw-z1985.iteye.com/blog/1973205 服务端依次发生的步骤 建立服务端监听套接字ServerSocketChannel,以及对应的管道pipeline: ...