9月22日下午JavaScript----Document对象

document对象

一、找元素

1.根据id找

示例：

<input id = "a"  type="button" value="找元素" onclick="Show()" />

function Show()

{

    alert(document.getElementById("a"));

}

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

2.根据class找

　　示例：

<div class="aa"></div>

<div class="aa"></div>

<span class="aa"></span>

alert(document.getElementsByClassName("aa"));

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

3.根据name找

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

示例：

<input type="text" name="cc" />

alert(document.getElementsByName("cc")[0]);

//取索引0，找到的结果是<input>标签。

4.根据标签名找

　　示例：

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

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

二、操作内容

1.普通元素

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

①.获取内容文本

　示例：

<div id="a">hello</div> //普通的div

var a = document.getElementById("a")//找到id是a里的div

alert(a.innerText);//获取div里的内容

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

②.内容设置（.innerText）

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

③.获取内容代码

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

<div id="a"><span>hello</span></div>

var a = document.getElementById("a")

alert(a.innerHTML);

④.内容设置(a.innerHTML)

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

⑤.显示出标签

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

2.表单元素

示例：

<input type="text" id="txt" value="hello" />

var a = document.getElementById("txt")

alert(a.value);

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

三、操作属性

1.设置属性　　　

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

示例：

<input type="radio" name="sex" id="sex" text="aa" />男

var a = document.getElementById("sex")

a.setAttribute("checked","checked")

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

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

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

四、操作样式

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

1.获取样式

示例：

<div id="d" style="width:200px; height:200px; background-color:#F00"></div>

var a = document.getElementById("d");

alert(a.style.backgroundColor);

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

2.设置样式

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

3.修改样式

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

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

<style type="text/css">

*{ margin:0px auto; padding:0px}

</style>

</head>

<body>

<div style="width:500px; height:500px">

　　<div style="margin-top:20px">

　　　　<input type="radio" name="sure" id="s1" onclick="KeYong()" />同意

　　　　<input type="radio" name="sure" id="s2" onclick="BuKeYong()" />不同意

　　</div>

<div style="margin-top:30px">

　　<input type="submit" value="确定" id="btn" style="width:100px; height:35px" disabled="disabled" />

</div>

</div>

</body>

<script type="text/jscript">

　　function KeYong()

　　{

　　　　var a = document.getElementById("btn");

　　　　a.removeAttribute("disabled");

　　}

　　function BuKeYong()

　　{

　　　　var a = document.getElementById("btn");

　　　　a.setAttribute("disabled","disabled");

　　}

</script>

例题二：倒计时按钮可用

<body>

<div style="width:500px; height:500px; margin:100px 0px 0px 100px">

　　<input id="btn" type="submit" value="确定" style="width:100px; height:35px" disabled="disabled" />

　　<span id="daojishi">10</span>

</div>

</body>

<script type="text/javascript">

window.setTimeout("YanChi()",1000);

function YanChi()

{

　　var span = document.getElementById("daojishi")

　　/*var n =span.innerText;

　　n--;                      //标记的3行等于下面的1行的效果

　　span.innerText = n;*/

　　span.innerText = span.innerText-1;

　　if(span.innerText == 0)

　　{

　　　　document.getElementById("btn").removeAttribute("disabled");

　　　　return;

　　}

window.setTimeout("YanChi()",1000);

}

</script>

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

<body>

<div style="margin-top:20px; margin-left:30px">

　　<span id="h"></span>

　　<span id="m"></span>

　　<span id="s"></span>

</div>

</body>

<script>

window.setInterval("Bian()",1000);

function Bian()

{

　　var sj = new Date();

　　document.getElementById("h").innerText = sj.getHours();

　　document.getElementById("m").innerText = sj.getMinutes();

　　document.getElementById("s").innerText = sj.getSeconds();

}

</script>

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

<body>

<select id="sel" style="width:200px;" size="10">

<option>11</option>

<option>22</option>

<option>33</option>

</select>

<input type="text" id="nr" />

<input type="button" value="添加" id="btn1" onclick="Add()" />

</body>

<script type="text/javascript">

function Add()

{

　　var v = document.getElementById("nr").value;     取出用户输入的值

　　var list = document.getElementById("sel");        向列表里添加

　　list.innerHTML = list.innerHTML+"<option>"+v+"</option>";

}

</script>

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

9月20日下午JavaScript函数--递归
例题1:公园里有200个桃子,猴子每天吃掉一半以后扔掉一个,问6天以后还剩余多少桃子? var sum = 200; for(var i= 0;i<6;i++) { sum = parseInt ...
9月19日下午JavaScript数组冒泡排列和二分法
数组一.冒泡排列对数组attr = [1,8,6,4,5,3,7,2,9]进行由大到小排列,用冒泡排列的方法排列时,会对数组进行比较互换.如果前一个数字较大,这2个元素排列方式不变,如果后一个元素 ...
12月22日《奥威Power-BI财务报表数据填报》腾讯课堂开课啦
一扇可以通向任何地方的“任意门”,是我们多少人幼时最梦寐以求的道具之一.即使到了现在,工作中的我们还会时不时有“世界那么大,我想去看看”的念头,或者在突然不想工作的时刻,幻想着自己的家门变成了“任意门 ...
Autodesk 最新开发技术研讨会 -8月22日-Autodesk北京办公室
为了增进与广大中国地区Autodesk产品的二次开发人员的了解与互动,帮助中国地区的Autodesk产品二次开发人员了解Autodesk最新的二次开发技术动向,并获得Autodesk公司专业开发支持顾 ...
见见面、聊聊天 - 5月22日晚7点Meetup，三里屯绿树旁酒吧，畅谈云技术和应用
总是邮件.QQ什么的线上聊,让我们见面吧,不怕见光死,呵呵. 我和同事会先抛砖引玉,给大家介绍一下Autodesk几款最新的云技术和解决方案,然后大家就可畅所欲言,自由交流.来自五湖四海的人,为了 ...
2016年12月22日星期四 --出埃及记 Exodus 21:17
2016年12月22日星期四 --出埃及记 Exodus 21:17 "Anyone who curses his father or mother must be put to deat ...
转：[置顶] 从头到尾彻底理解KMP（2014年8月22日版）
[置顶] 从头到尾彻底理解KMP(2014年8月22日版)
2016年11月22日星期二 --出埃及记 Exodus 20:13
2016年11月22日星期二 --出埃及记 Exodus 20:13 "You shall not murder.不可杀人.
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 ...

随机推荐

auto refresh iframe
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
Android下常见的四种对话框
摘要:在实际开发过程有时为了能够和用户进行很好的交互,需要使用到对话框,在Android中常用的对话框有四种:普通对话框.单选对话框.多选对话框.进度对话框. 一.普度对话框 public void ...
__getattribute__
class Foo: def __init__(self,x): self.x = x def __getattribute__(self, item): print('不管是否纯在,我都会执行') ...
Jquery.min.js 下载
Jquery 下载:http://www.jq22.com/jquery-info122
Java中字符串的几个实例
String str=new String("abc");new 对象时,位于堆中,同时看字符串常量中是否有字符串"abc",如果没有,则进行添加,同时进行关联 ...
Servlet 工作原理解析
转自:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/ Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 J ...
数据结构之二分查找（PHP)
<?php //二分查找算法 //前提:索引数组.数组已排好顺序 $a=array(1,3,4,6,8,9,11,13,15,24,25,27,30,38); $search = 30;//要查 ...
perl 哈希连接符
#!/usr/bin/perl -w use strict; my $test_1 = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; my $test_2 ...
Android笔试和面试提点
Android基础知识 Android 的四大组件是哪些? Activity,Service,Broadcast和ContentProvide Android 的常用的容器布局是哪些? FrameLa ...
【codevs1086】栈
http://codevs.cn/problem/1086/ (题目链接) 题意给出1~n总共n个数,对它们进行入栈出栈操作,问一共有多少种不同的方案. Solution 找规律手玩前5个1 2 5 ...

9月22日下午JavaScript----Document对象

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

随机推荐

热门专题