------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------
document是window对象的一个属性。一般直接写document
document的方法：
1. write：向文档中写入内容。writeline，和write相比，最后添加一个回车。
在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
<body>
大家好
<scripttype="text/javascript">
document.write("<font color=red>红色</font>"); 在页面中执行添加并显示。
</script>
<inputtype="button" value="你好 "onclick="document.write('hello')"/> 点击后将替换掉原来页面中的内容
嘿嘿
</body>
write经常在广告代码、整合资源代码中被使用。这样不需要引用引用他的网站去进行维护，只要被引用网站内容进行了修改，使用它的也会跟着修改。
2. getElementById（最常用），根据元素的id获得对象，并对元素进行操作。网页中的id不能重复。也可以直接通过元素的id来引用元素，但是有Form表单中控件等问题，所以不建议。
function btnClick1() {
//alert(txtbox2.value); //无法获得Form表单中的Id
//alert(form1.txtbox2.value); //虽然获得了表单中的Id，但是麻烦
var txt = document.getElementById("txtbox2");
alert(txt.value);
}
3. getElementsByName(),根据元素的name获得对象，由于页面中的name可以重复，如radio，因此getElementsByName返回值是对象数组
<inputtype="radio" name="gender" value="男"/>男
<inputtype="radio" name="gender" value="女"/>女
<inputtype="radio" name="gender" value="保密"/>保密
获得name为gender的值：
function btnClick() {
var radios = document.getElementsByName("gender"); //获得name为gender的元素数组
/*for (var r in radios) { //在js中，for (var r in radios)不像C#中的foreach，并不会遍历每个元素，而是遍历的key
alert(r.value);
}*/
for(var i=0;i<radios.length;i++){ //遍历这些元素，并弹出这些元素的值
var radio=radios[i];
alert(radio.value);
}
4.getElementsByTagName，获取指定标签名称的元素数组。
获取所有input标签元素，为其赋值“hello”
<inputtype="text" />
<inputtype="text" />
<inputtype="text" />
function btnClick2() {
var inputs = document.getElementsByTagName("input"); //获取所有input标签
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
Dom练习：
1. 点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
Html代码：
<bodyonload="initEvent()"> <!—等网页加载完毕后才会执行 -->
<inputtype="button" value="哈哈 "/>
<inputtype="button" value="哈哈"/>
<inputtype="button" value="哈哈"/>
<inputtype="button" value="哈哈"/>
<inputtype="button" value="哈哈"/>
<inputtype="button" value="哈哈"/>
<inputtype="button" value="哈哈"/>
</body>
Js中的方法
//获取所有input元素
function initEvent() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick; //每个input的onclick事件
}
}
//按钮点击时触发
function btnClick() {
var inputs = document.getElementsByTagName("input"); //获得所有input元素
for (var i = 0; i < inputs.length; i++) { //遍历input元素
var input = inputs[i];
//获得被点击了的input元素，将其value值改为“呜呜”，其余的为“哈哈”
if (input == window.event.srcElement) { //window.event.srcElement,取得引发事件的控件
input.value = "呜呜";
}
else {
input.value = "哈哈";
}
}
}
2. 美女时钟：每过一秒钟，显示一张不同的根据小时秒数定义的美女图片 （图片名 00_00.jpg）
<bodyonload="Refresh()"> //当页面加载完成后执行
<imgid="imgMM" src="" /> //定义一个图片
</body>
<scripttype="text/javascript">
//var now = new Date(); //不能写在这，否则取得的时间不变
function Fill2Len(i) { //判断分钟数和小时数是否是两位数，以和图片的名称一致
if (i < 10) {
return "0" + i;
}
else {
return i;
}
}
function Refresh() {
var imgMM = document.getElementById("imgMM"); //获得放置图片的元素
if (!imgMM) { //判断是否已经加载了该元素
return;
}
var now = new Date(); //获取当前时间
//获得与当前时间对应的图片的名称
var filename = Fill2Len(now.getHours()) +"_" + Fill2Len(now.getSeconds()) + ".jpg";
imgMM.src = "img/" + filename; //对图片元素赋值，显示图片
}
setInterval("Refresh()",1000); //由于时钟每隔一秒转动一次，所以每隔一秒换一张图片，即每隔1秒执行一次对图片元素的赋值
</script>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
