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 ...
随机推荐
- S2 第二章数据库的实现
实现增删改查代码 1 select * from student --增加数据 insert into student (name,banji,xuehao) values(,) --修改数据 upd ...
- SQL Server 一列或多列重复数据的查询，删除
业务需求 最近给公司做一个小工具,把某个数据库(数据源)的数据导进另一个数据(目标数据库).要求导入目标数据库的数据不能出现重复.但情况是数据源本身就有重复的数据.所以要先清除数据源数据. 于是就把关 ...
- QA16复制_新增查询条件，修改批量使用决策
需求: 增加评估代码,检验类型条件.(检验批中部分检验项目未录结果的检验批显示 注:标准的程序,不支持空结果的查询和使用决策) 1.复制 RQEVAI10 程序 2.因为这是用的QM模块的逻辑数 ...
- C#与Java中相等关系
最近在学习java的语法,发现java中两个字符串某些情况下不能用==这个来判断,比如自己定义的类中有String属性,那么就不能用==判断两个是否相等.这才开始比较C#和Java在这里的区别,最后发 ...
- vue.js——初体验
看到最近很火的vue.js,于是开启了自己人生中首篇翻译之路,才意识到这个纯英文版的的确没有中文的通俗易懂~~~~~~不过, 还是硬着头皮把这篇英文版的博客给翻译完了,希望可以帮助自己的同时也方便别人 ...
- Android中visibility属性VISIBLE、INVISIBLE、GONE的区别
详情见:http://blog.csdn.net/chindroid/article/details/8000713
- Mysql date_sub函数使用
mysql中内置函数date_add和date_sub能对指定的时间进行增加或减少一个指定的时间间隔,语法如下: DATE_ADD(date,INTERVAL expr type) DATE_SUB( ...
- oracle Redhat64 安装
详细可以参考:http://blog.csdn.net/chenfeng898/article/details/8782679 直接执行如下yum安装命令后,如果再出错,跳到2 yum -y inst ...
- Socket通信（转）
一.Socket通信简介 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户 ...
- 获取checkbox数组 里面的值
echo '<td class="text-left"><input name="tids[]" type="checkbox&q ...