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. 【图形学】我理解的伽马校正（Gamma Correction）

    http://blog.csdn.net/candycat1992/article/details/46228771/ 写在前面 我相信几乎所有做图像处理方面的人都听过伽马校正(Gamma Corre ...

  2. 制作Aspose CHM文档的过程记录

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  3. css读书笔记3：定位元素

    定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器 ...

  4. js中event.target,this

    event.target这是注册事件时的对象,或者它的子元素.通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的.经常用于事件冒泡时处理事件委托. 1.this和e ...

  5. mouseover,mouseenter,mouseleave,mouseout

    mouseover和mouseout对应 //鼠标移入移出触发该元素及子元素 mouseenter和mouseleave对应 //鼠标移入移出只触发该元素 看完例子即可知道其区别: mouseover ...

  6. PHP框架学习错误总结

    错误一: Fatal error: “Uncaught exception 'Zend_Controller_Response_Exception' with message 'Cannot send ...

  7. centOS wget的安装和使用

    CentOS wget是一个从网络上自动下载文件的自由工具.它支持HTTP,HTTPS和FTP协议,可以使用HTTP代理. 所谓的自动下载是指,CentOS wget可以在用户退出系统的之后在后台执行 ...

  8. easyUI dialog 弹窗 居中显示

    默认情况下应该是在屏幕居中显示的.但是有的时候没有居中只要重新纠正下就可以了 $('#add_dialog').dialog('open'); //打开添加对话框 $('#add_dialog').w ...

  9. java中汉字自动转换成拼音

    java中汉字自动转换成拼音 1.需要下载jar包 pinyin4j.2.5.0.jar ,加入到WEB-INF下的lib里边,右键add to bulid path. 2.[代码]PinYinUti ...

  10. oracle优化原则(二)

    SQL优化原则 二.SQL语句编写注意问题 www.2cto.com 下面就某些SQL语句的where子句编写中需要注意的问题作详细介绍.在这些where子句中,即使某些列存在索引,但是由于编写了劣质 ...