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. javascript的语句和函数

    1.for-in语句:是一种精准的迭代语句,可以用来枚举对象的属性. 2.label语句:在代码中添加标签,以便将来使用,由break和continue语句调用. 3.with语句:将代码的作用域设置 ...

  2. flush tables 好危险啊

    请看图 +----+------+-----------+------+------------+------+-------------------------+------------------ ...

  3. canvas实现绘画

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

  4. XPath的语法

    XPath 是XML的查询语言,和SQL的角色很类似.以下面XML为例,介绍XPath 的语法. <?xml version="1.0" encoding="ISO ...

  5. 简单的Hibernate入门简介

    其实Hibernate本身是个独立的框架,它不需要任何web server或application server的支持.然而,大多数的Hibernate入门介绍都加入了很多非Hibernate的东西, ...

  6. 【转】commons-lang.jar包简介

    转自:http://zhidao.baidu.com/share/71b48e6b3e1b1dc73fe705604b9c7584.html 1.下载jar包 包官方下载地址:http://commo ...

  7. EM算法原理以及高斯混合模型实践

    EM算法有很多的应用: 最广泛的就是GMM混合高斯模型.聚类.HMM等等. The EM Algorithm 高斯混合模型(Mixtures of Gaussians)和EM算法 EM算法 求最大似然 ...

  8. js中String.prototype.format類似于.net中的string.formitz效果

    String.prototype.format = function(args) { if (arguments.length>0) { var result = this; if (argum ...

  9. JAVA 接口与继承作业——动手动脑以及课后实验性问题

    一.继承条件下的构造方法调用 运行 TestInherits.java 示例,观察输出,注意总结父类与子类之间构造方法的调用关系修改Parent构造方法的代码,显式调用GrandParent的另一个构 ...

  10. maven install 时提示“程序包 javax.crypto不存在”

    但是javax.crypto是在jdk的jre\lib目录下的 解决方案: <compilerArguments> <bootclasspath>${java.home}/li ...