黑马程序员_Dom中window的document属性_dom.window.document 标签属性-CSDN博客

本文链接：https://blog.csdn.net/zhanghuaijing/article/details/8771494

------- 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" />

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="哈哈"/>

</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>