2.window、document对象0806_[window, document, l]-CSDN博客

本文链接：https://blog.csdn.net/handing2011/article/details/6668027

一、 window : alert()/confirm()/setInterval/setTimeout

setInterval(code,time)方法可以每隔 time毫秒执行一次code.

其中的code有两种方式：

1.直接传入某个方法对象 - setInterval(showTime,1000);

2.直接传入要执行的 js代码字符串 - setInterval("alert(1);",1000);

二、关于 for in (用来循环对象的属性和值)

使用 for in 来循环数组时，会将数组的属性先循环出来

然后再循环数组里的元素，但此时循环出来的 k 是元素的下标

三、innerHTML

将字符串添加到对应的双标签中间。

并且立刻对该字符串进行解析，如果符合html标签的语法，

则，立即调用浏览器的解析器，对该字符串进行html解析，并

生成对应的 dom 对象，最后，将该dom对象，追加到被添加的

对象的子元素集合(ChildNodes)中。

======================================================================

function test(){

alert(document.documentElement);

alert(document.documentElement.title);

}

</script>

<body>

这时返回的就是<html>标签，

=====================================================

当前的html代码解析成的DOM树就挂靠在window.document下

2．Window对象

(1)window.confirm(“是否删除”);//确定、取消对话框，返回true或false;

(1)function doDel(id){

if(confirm("您是否要删除？")){

alert("删除了第"+id+"行");

}

(2)window.close();//关闭浏览器窗口

(3)window.prompt(text,defaultText) ;//弹出一个输入框,返回用户输入的值

(3)当点击0710班时，弹出框：

function changeName(){

var str = prompt("请输入新班级名：","班级名");

alert("str");

}

改进：function changeName(tdObj){

var str = prompt("请输入新班级名：",tdObj.innerHTML);//这里tdObj.innerHTML获得了td标签中的值:"0710班"

if(str!=null){

//alert(str);

tdObj.innerHTML = str;

}

注意：在这里进行的操作都是针对 DOM树的操作,在”查看源代码”中发现代码没有改变，当页面刷新后，对页面的修改不会保存，因为这时又重新加载页面

• (4) window.navigate(url);//将网页重新导航到url,只支持IE,建议使用window.location.href=‘url’;//支持大多数浏览器

”修改”页面的实现：

//修改页面的实现

function doModify(id,cName){

//window.location="modify.htm?i="+id;

//控制浏览器的地址栏，跳转到指定页面上并带上指定参数

window.navigate("modify.htm?i="+id+"&name="+cName);//URL传参也叫get传参

}

**window.location.search用法

window.onload = function(){

alert(window.location);

}

alert(window.location.search);//代表URL参数字符串

• (5) setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识

var intervalId=setInterval("alert('hello')", 5000);

****窗体自动关闭页面

01.htm: <input type="button" οnclick="window.open('C03_0806_adv.html');"value="广告页面自动关闭" />

C03_0806_adv.html:

window.onload = function(){

// setInterval( showTime,1000);//这里showTime方法不加大括号{}

var methodName = "showTime()";//调用方法执行的时候，如果带双引号就要加括号(),如果不带双引号,就不加()

setInterval(methodName,1000);

}

var seconds = 5;

function showTime(){

if(seconds>0){

seconds--;

var divMsg = document.getElementById("msgDiv");

divMsg.innerHTML = seconds+"秒后，窗体自动关闭";

}else

window.close();

}

</script>

</head>

<body>

广告来了---！

5秒后，窗体自动关闭

</div>

</body>

setInterval(showTime,1000)和setInterval(“showTime()”,1000)两者等价，第一个参数可以是一个方法的对象(方法的引用)，也可以是js代码字符串；

• (6) clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

var intervalId = setInterval("alert('hello')", 5000);

clearInterval(intervalId);

var timer;

window.onload = function(){

// setInterval( showTime,1000);//这里showTime方法不加大括号{}

var methodName = "showTime()";

timer= setInterval(methodName,1000);

}

var seconds = 5;

function stopTimer(){

clearInterval(timer);//根据计时器id，停止指定的计时器

}

l (7) setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。

var timeoutId = setTimeout("alert('hello')", 2000);

//-------------------只执行一次的计时器

var timeOutId;

function testTimeOut() {

timeOutId =setTimeout("alert('我只出现一次，我只看看');", 1000);

}

function stopTimeOut() {

clearTimeout(timeOutId);

}

l 8)showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。

• 第一个参数为弹出模态窗口的页面地址。

• 在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。

body、document对象的事件

l （1）onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成

l （2）onunload：网页关闭（或者离开）后触发。

l （3）onbeforeunload：在网页准备关闭（或者离开）前触发。

• <body οnbefοreunlοad=“return ‘真的要放弃发帖退出吗?’; ">。显示的文字随浏览器版本而有差异。

l window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).

• altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击" οnclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；

function testAltKey(){

alert(window.event.altKey);

}

• clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。

function moveMouse(){

var x = window.event.clientX;

var y = window.event.clientY;

document.getElementById("mouse").innerHTML=x+"=="+y;

• }

• <body οnmοusemοve="moveMouse();">

•

• returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。

• //window.event.returnValue不兼容火狐浏览器

<a href="1.html" οnclick="window.event.returnValue=false;">超链接无效啦～～！</a>

这样点击后不会发生跳转

l window.event对象的成员：

• srcElement，获得事件源对象。几个事件共享一个事件响应函数用。****_click(object sender,EventArgs e)//只有IE支持。

function showSource(){

alert( window.event.srcElement.value);

}

• button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。//要测试event.button的值的时候，请在onmousedown事件中测试。如果在onclick事件中只能识别鼠标左键的单击。

l clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。

• 案例：复制地址给友好。见备注。

• 当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body οncοpy="alert('禁止复制！');return false;"

• 很多元素也有oncopy、onpaste事件：

//------------自动复制当前页面到粘贴板

function copyTo(){

clipboardData.setData("Text","给你推荐个网站"+location);

alert("复制成功");

}

l history操作历史记录

• window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进

全选反选的实现：

//---------------通过name来查找元素

function findEleByName(n,c) {

var eles = document.getElementsByName(n);

for (i = 0; i < eles.length; i++) {

eles[i].checked = c.checked;

}

function fanXuan() {

var eles = document.getElementsByName("chkS");

for (i = 0; i < eles.length; i++) {

if (eles[i].type == "checkbox") {//排除掉同名的非复选框对象

eles[i].checked = !eles[i].checked;

}

} <th><input type="checkbox" οnclick="findEleByName('chkS',this)"/></th>

l document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document

l 在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起

l <script type="text/javascript">

l document.write('<font color=red>你好</font>');

l </script>

getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById

l （*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

l （*）getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的<p>标签。

案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。

var buts;

//窗体资源加载完成后，执行此匿名方法

window.onload = function(){

buts = document.getElementsByTagName("input");//根据标签名获得所有的input对象

for(i=0;i<buts.length;i++)//循环input对象组

{

if(buts[i].type=="button"){

buts[i].onclick = doClick;//为每个input对象的onclick事件注册方法 doClick

}

//点击按钮方法

function doClick(){

var clickBtn = window.event.srcElement;//获得被点击的按钮对象(事件源对象)

clickBtn.value="呜呜~~~~(>_<)~~~~ ";//修改被点击按钮的value

for(i=0;i<buts.length;i++)//循环，将其他按钮的value修改

{

if(buts[i]!=clickBtn)

{

buts[i].value = "O(∩_∩)O哈哈~";

}

l 几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。

• <a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>

• <input type="button" value="inner*" οnclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />

l 用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建

• function createlink() {

• var divMain = document.getElementById("divMain");

• divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";

• }

• <span/>的innerHTML和<span></span>的innerHTML不一样。//建议，在使用之前要保证标签具有开始和结束标记，否则，会出现一下意想不到的后果