document对象

一、找元素

1.根据id找

示例：

  1. <input id = "a"  type="button" value="找元素" onclick="Show()" />
  2. function Show()
  3. {
  4.     alert(document.getElementById("a"));
  5. }

输出的结果是[objectHTMLDivElement]，意思是找到了HTML里面的div。根据id找到的是唯一一个元素。

2.根据class找

　　示例：

  1. <div class="aa"></div>
  2. <div class="aa"></div>
  3. <span class="aa"></span>
  4. alert(document.getElementsByClassName("aa"));

输出的结果是[objectHTMLDivCollection]。Elements后面多了一个s，是个复数形式，表明找到的不是一个元素，而是很多元素，这些元素放在一个数组里面。如果再在后面加上allert(attr[0]);输出的结果就是一个div。根据class找，返回的是一个数组。

3.根据name找

表单里面有一个比较特殊的属性name，相当于它的名称。也可以根据name找元素，返回的也是一个数组。

示例：

  1. <input type="text" name="cc" />
  2. alert(document.getElementsByName("cc")[0]);
  3. //取索引0，找到的结果是<input>标签。

4.根据标签名找

　　示例：

  1. alert(document.getElementsByTagName("div").length);

　　表示根据标签名div找，返回的也是数组。上面代码是输出数组的长度，输出结果是3，表示有3个div。

二、操作内容

1.普通元素

　　这里的内容指的是元素（标签）里面的内容，开始标签和结束标签之间的内容。

①.获取内容文本

　示例：

  1. <div id="a">hello</div> //普通的div
  2. var a = document.getElementById("a")//找到id是a里的div
  3. alert(a.innerText);//获取div里的内容

如果在hello外面套一个<span>，获取的还是hello，这说明.innerText获取的是能在网页上看到的内容，是文本，而不是网页的代码。

②.内容设置（.innerText）

　　.innerText除了可以获取内容外，还可以设置内容，例如在上面的代码下面再加上a.innerText = "ok"，输出的结果就成为了ok，取代了hello。直接拿来用是取值，让它等于一个值就是赋值。

③.获取内容代码

　　alert(a.innerHTML);表示获取代码，例如下面代码输出的结果就是<span>hello</span>，获取的是代码。

  1. <div id="a"><span>hello</span></div>
  2. var a = document.getElementById("a")
  3. alert(a.innerHTML);

④.内容设置(a.innerHTML)

　　在上面代码下面加上a.innerHTML = "<span style='color:red'>ok</span>";输出的结果就是红色的ok，相当于把这行代码替换了原来的代码。

⑤.显示出标签

显示出的标签要用a.innerText来做，例如a.innerText = "<a href='#'>超链接</a>";页面上就会显示"<a href='#'>超链接</a>。

2.表单元素

示例：

  1. <input type="text" id="txt" value="hello" />
  2. var a = document.getElementById("txt")
  3. alert(a.value);

用value获取表单里的内容。上面代码输出结果是hello。如果想要设置内容，可以在上面的代码下面加上a.value = "ok";，输出就过就成了ok。

三、操作属性

1.设置属性　　　

属性是在标签里面写的，checked表示选中。

示例：

  1. <input type="radio" name="sex" id="sex" text="aa" />男
  2. var a = document.getElementById("sex")
  3. a.setAttribute("checked","checked")

上面代码表示原来按钮属性里面“男”没有选中，用a.setAttribute("checked","checked")给按钮添加属性。第一个"checked"是属性名，第二个"checked"是属性值。

2.移除属性;a.removeAttribute("checked");括号里的就是属性名。

3.获取属性:alwrt(a.getAttribute("checked"));如果里面有一个属性，通过属性名来取出里面的值。输出的属性值就是checked。

四、操作样式

注意JS中的样式和body中的样式不太一样，中间没有-隔开，而中间有大写的字母。

1.获取样式

示例：

  1. <div id="d" style="width:200px; height:200px; background-color:#F00"></div>
  2. var a = document.getElementById("d");
  3. alert(a.style.backgroundColor);

上面代码是获取div的背景色。也可以获取宽度、高度。如果把div的样式做成内嵌的，就找不到样式的值了。说明JS里操作样式只能操作内联的，不能操作内嵌的。

2.设置样式

示例：如果加上a.style.fontSize = "30px";，上面的div中的字体就会变成30px。

3.修改样式

示例：和设置样式格式一样，a.style.backgroundColor = "green";表示背景色换成绿色。修改样式只能一条一条的写。

例题一：单选按钮确定提交是否可用

  1. <style type="text/css">
  2. *{ margin:0px auto; padding:0px}
  3. </style>
  4. </head>
  5. <body>
  6. <div style="width:500px; height:500px">
  7. 　　<div style="margin-top:20px">
  8. 　　　　<input type="radio" name="sure" id="s1" onclick="KeYong()" />同意
  9. 　　　　<input type="radio" name="sure" id="s2" onclick="BuKeYong()" />不同意
  10. 　　</div>
  11. <div style="margin-top:30px">
  12. 　　<input type="submit" value="确定" id="btn" style="width:100px; height:35px" disabled="disabled" />
  13. </div>
  14. </div>
  15. </body>
  16. <script type="text/jscript">
  17. 　　function KeYong()
  18. 　　{
  19. 　　　　var a = document.getElementById("btn");
  20. 　　　　a.removeAttribute("disabled");
  21. 　　}
  22. 　　function BuKeYong()
  23. 　　{
  24. 　　　　var a = document.getElementById("btn");
  25. 　　　　a.setAttribute("disabled","disabled");
  26. 　　}
  27. </script>

例题二：倒计时按钮可用

  1. <body>
  2. <div style="width:500px; height:500px; margin:100px 0px 0px 100px">
  3. 　　<input id="btn" type="submit" value="确定" style="width:100px; height:35px" disabled="disabled" />
  4. 　　<span id="daojishi">10</span>
  5. </div>
  6. </body>
  7. <script type="text/javascript">
  8. window.setTimeout("YanChi()",1000);
  9. function YanChi()
  10. {
  11. 　　var span = document.getElementById("daojishi")
  12. 　　/*var n =span.innerText;
  13. 　　n--;                      //标记的3行等于下面的1行的效果
  14. 　　span.innerText = n;*/
  15. 　　span.innerText = span.innerText-1;
  16. 　　if(span.innerText == 0)
  17. 　　{
  18. 　　　　document.getElementById("btn").removeAttribute("disabled");
  19. 　　　　return;
  20. 　　}
  21. window.setTimeout("YanChi()",1000);
  22. }
  23. </script>

例题三：在网页上显示和系统时间同步的  时  分   秒

  1. <body>
  2. <div style="margin-top:20px; margin-left:30px">
  3. 　　<span id="h"></span>
  4. 　　<span id="m"></span>
  5. 　　<span id="s"></span>
  6. </div>
  7. </body>
  8. <script>
  9.  
  10. window.setInterval("Bian()",1000);
  11. function Bian()
  12. {
  13. 　　var sj = new Date();
  14. 　　document.getElementById("h").innerText = sj.getHours();
  15. 　　document.getElementById("m").innerText = sj.getMinutes();
  16. 　　document.getElementById("s").innerText = sj.getSeconds();
  17. }
  18. </script>

例题四：往一个列表里面添加数据

  1. <body>
  2. <select id="sel" style="width:200px;" size="10">
  3. <option>11</option>
  4. <option>22</option>
  5. <option>33</option>
  6. </select>
  7. <input type="text" id="nr" />
  8. <input type="button" value="添加" id="btn1" onclick="Add()" />
  9. </body>
  10. <script type="text/javascript">
  11. function Add()
  12. {
  13. 　　var v = document.getElementById("nr").value;     取出用户输入的值
  14. 　　var list = document.getElementById("sel");        向列表里添加
  15. 　　list.innerHTML = list.innerHTML+"<option>"+v+"</option>";
  16. }
  17. </script>

9月22日下午JavaScript----Document对象的更多相关文章

  1. 9月20日下午JavaScript函数--递归

    例题1:公园里有200个桃子,猴子每天吃掉一半以后扔掉一个,问6天以后还剩余多少桃子? var sum = 200; for(var i= 0;i<6;i++) { sum = parseInt ...

  2. 9月19日下午JavaScript数组冒泡排列和二分法

    数组 一.冒泡排列 对数组attr = [1,8,6,4,5,3,7,2,9]进行由大到小排列,用冒泡排列的方法排列时,会对数组进行比较互换.如果前一个数字较大,这2个元素排列方式不变,如果后一个元素 ...

  3. 12月22日《奥威Power-BI财务报表数据填报》腾讯课堂开课啦

    一扇可以通向任何地方的“任意门”,是我们多少人幼时最梦寐以求的道具之一.即使到了现在,工作中的我们还会时不时有“世界那么大,我想去看看”的念头,或者在突然不想工作的时刻,幻想着自己的家门变成了“任意门 ...

  4. Autodesk 最新开发技术研讨会 -8月22日-Autodesk北京办公室

    为了增进与广大中国地区Autodesk产品的二次开发人员的了解与互动,帮助中国地区的Autodesk产品二次开发人员了解Autodesk最新的二次开发技术动向,并获得Autodesk公司专业开发支持顾 ...

  5. 见见面、聊聊天 - 5月22日晚7点Meetup，三里屯绿树旁酒吧，畅谈云技术和应用

    总是邮件.QQ什么的线上聊,让我们见面吧,不怕见光死,呵呵.   我和同事会先抛砖引玉,给大家介绍一下Autodesk几款最新的云技术和解决方案,然后大家就可畅所欲言,自由交流.来自五湖四海的人,为了 ...

  6. 2016年12月22日 星期四 --出埃及记 Exodus 21:17

    2016年12月22日 星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...

  7. 转：[置顶] 从头到尾彻底理解KMP（2014年8月22日版）

    [置顶] 从头到尾彻底理解KMP(2014年8月22日版)

  8. 2016年11月22日 星期二 --出埃及记 Exodus 20:13

    2016年11月22日 星期二 --出埃及记 Exodus 20:13 "You shall not murder.不可杀人.

  9. 2016年10月22日 星期六 --出埃及记 Exodus 19:6

    2016年10月22日 星期六 --出埃及记 Exodus 19:6 you will be for me a kingdom of priests and a holy nation.' These ...

随机推荐

  1. Android中this、super的区别

    转载:http://blog.csdn.net/dyllove98/article/details/8826232 在Java中,this通常指当前对象,super则指父类的.当你想要引用当前对象的某 ...

  2. oracle-day1

    今天的学习内容是oracle产品的三种安装方式,还有使用dbca静默建库 oracle产品的三种安装方式分别为: 1.图形化(Java向导)安装引导 2.使用应答文件静默安装 3.直接将装好的orac ...

  3. iOS开发中的错误整理，pod文件Install失败

    一.之前用黑苹果,编辑pod文件用一下格式 platform :ios, "8.0" pod "MJExtension" pod "MJRefresh ...

  4. caffe使用

    训练时, solver.prototxt中使用的是train_val.prototxt ./build/tools/caffe/train -solver ./models/bvlc_referenc ...

  5. 关于二叉排序树 BST

    #include<stdio.h> #include<stdlib.h> typedef struct node { double w; struct node *l,*r; ...

  6. hibernate-取消关联外键引用数据丢失抛异常的设置@NotFound

    hibernate项目里面配了很多many-to-one的关联,后台在查询数据时已经作了健全性判断,但还是经常抛出对象找不到异常: org.hibernate.ObjectNotFoundExcept ...

  7. 关于Android中图片大小、内存占用与drawable文件夹关系的研究与分析

    原文:关于Android中图片大小.内存占用与drawable文件夹关系的研究与分析 相关: Android drawable微技巧,你所不知道的drawable的那些细节 经常会有朋友问我这个问题: ...

  8. Android中处理崩溃异常CrashHandler

    来源:http://blog.csdn.net/liuhe688/article/details/6584143 大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程 ...

  9. Java 代码编译和执行的整个过程

    Java 代码编译是由 Java 源码编译器来完成,流程图如下所示: Java 字节码的执行是由 JVM 执行引擎来完成,流程图如下所示: Java 代码编译和执行的整个过程包含了以下三个重要的机制: ...

  10. 输入一个数组，求最小的K个数

    被这道题困了好久,看了剑指Offer才知道OJ上的要求有点迷惑性. 题目: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4. 一 ...