JavaScript之document对象使用
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对象使用的更多相关文章
- 用JAVA编写浏览器内核之实现javascript的document对象与内置方法
原创文章.转载请注明. 阅读本文之前,您须要对浏览器怎样载入javascript有一定了解. 当然,对java与javascript本身也须要了解. 本文首先介绍浏览器载入并执行javascript的 ...
- javascript之document对象
一.修改网页元素 当使用document提供的方法和Element的属性得到网页元素之后,就可以对元素的内容进行修改,如下例所示的“全选/全不选”的实现. 例3-17 <html> < ...
- Javascript的document对象
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor / ...
- javascript DOM document对象
document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
- JavaScript 之 document对象
对象属性document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)do ...
- JavaScript 客户端JavaScript之Document对象中的表单和表单元素
Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...
- JavaScript Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
- Javascript之document对象用法（很重要）
一.找到元素 document.getElementById("id"):根据id找层,最多找一个 var a=document.getElementById("id&q ...
- javascript中document对象的属性和方法
document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...
随机推荐
- （转）springAOP解析-1
原文:http://hzbook.group.iteye.com/group/wiki/2261-Spring 3.1 Spring AOP概述 3.1.1 AOP概念回顾AOP是Aspect-O ...
- Windows日志查看工具合集
欢迎关注我的社交账号: 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://github.com/jiangxincode 知乎地址 ...
- mysql通过binlog日志来恢复数据
简介 在生产的过程中有这么一个业务场景:比如我在2016-11-19 09:30:00 通过mysqldump的方式备份了数据库,但是在2016-11-19 10:30:00的时候数据库崩溃了,如果通 ...
- 日期操作类--SimpleDateFormat类
使用SimpleDateFormat格式化日期 SimpleDateFormat是一个以语言环境敏感的方式来格式化和分析日期的类.SimpleDateFormat允许你选择任何用户自定义日期时间格式来 ...
- 【MYSQL】创建虚表来辅助数据库查询
在进行数据库查询时,有时需要用到对既有的数据表进行多表查询得出的临时条件的数据表,就可以暂时创建成为虚表,并赋予简单明了的字段名以及临时表名. 例题a:查询出每门课程低于平均成绩的学生姓名.课程名称. ...
- 杭JS
杭JS的视频终于出来了.看了Garry Yao的视频依旧看不懂...总体上感觉是在职场上,我不在孤单了,勇敢的前进吧! 玉伯: 视频看了很多,什么情绪管理实践管理,最值得学习的就是知识管理定律了,找到 ...
- 关于位域如何节省内存（C++）
位域: 最先使用在c语言中后来C++继承了这一优良的特点. 举个栗子: int --> 4字节 2^32位 ,如果我们只需要其表达一个0~16的数字, 使用一个int就显得稍稍 ...
- easyui $.parser.parse 页面重新渲染
一些dom元素是动态拼接上的easui的样式,由于页面已经渲染过了,所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.par ...
- Tomcat数据库连接池的配置方法总结
Tomcat数据库连接池的配置方法总结 数据库连接是一种关键的有限的昂贵的资源,这在多用户网页应用程序中体现的尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标 ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...