前端：JS/24/BOM和DOM简介 for...in循环遍历 window对象的属性和方法延时器定时

BOM 和DOM简介

BOM ,Browser Object Model ，浏览器对象模型；

BOM主要提供了访问和操作浏览器各组件的方式；

浏览器组件：window(浏览器容器)，

location(地址栏)，

history(浏览器历史)，

screen(显示器屏幕)，

navigator(浏览器软件)，

document(网页)；

DOM，Document Object Model，文档对象模型

DOM主要提供了访问和操作HTML标记的方式

HTML标记：

图片标记，

表格标记，

表单标记，

body,html标记

…

BOM和DOM不是JS的内容，它们是W3C制定的规范,但是，BOM和DOM在浏览器中以对象的形式得以实现；

换句话说：BOM和DOM都是由一组对象构成；

W3C是制作互联网标准的一个国际化的组织，如：XHTML，CSS，JavaScript，AJAX等

BOM结构图示：

各对象之间是有层级关系的，各对象之间的访问示意：

window.document.write(“I love you”);

window.document.body.bgColor ="#FF0000";

window对象是所有其它对象的最顶层对象，因此，可以省略，如下：

document.write(“I love you”);

document.body.bgColor ="#FF0000";

window.alert(“Are you OK?”); ----> alert.(“Are you OK?”);

window.prompt(“请输入一个分数：”); ----> prompt(“请输入一个分数：”);

for …in 循环遍历：只能循环数组的下标或对象的属性，取完自动停止

1，如果循环数组的话，每次循环取下标值，对于数组中值为undefined的，不会循环；循环数组，只返回有效的值；

2，如果循环对象的话，每次循环取对象属性；

注意：严格的来说，对象中没有方法一说，所有的都是属性；只不过将一个函数赋给一个属性后，这个属性要区别于其它属性而称为方法；

1,window对象的一些属性

1,name:指浏览器容器的名字或框架的名字，这个名字是给<a>标记的target属性（目标是那,文件在那打开）来用的；

设置窗口的名字：window.name =“newWin”;

获取窗口的名字：document.write(name);

2,top:代表最顶层窗口，如：window.top ;

3,parent:代表父级窗口，主要用于框架中；

4,innerWidth:指浏览器窗口的内宽（即：不含菜单栏，工具栏，地址栏，状态栏），该属性Firefox支持；

在IE下，要使用document.documentElement.clientWidth 来代替 window.innerWidth ;

5,innerHeight:指浏览器窗口的内高（即：不含菜单栏，工具栏，地址栏，状态栏），该属性Firefox支持；

在IE下，要使用document.documentElement.clientHeight 来代替 window.innerHeight ;

document.documentElement 就是<html>标记对象

document.body 就是<body>标记对象

实例：1，测试当前网页的宽度和高度

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>window对象测试当前网页的宽度和高度</title><script type="text/javascript">//实例：测试当前网页的宽度和高度//兼容所有浏览器的写法如下var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;document.write("网页的宽度：" + width + " px ,高度：" + height + " px");//输出结果</script></head><body></body></html>

显示效果如下：

2,window 对象的一些方法

1,alert():弹出一个警告对话框；

2,prompt():弹出一个输入对话框；

3,confirm():弹出一个确认对话框；如果点击“确认”返回true，如果单击“取消”返回false;

4,close():关闭窗口；

5,print():打印窗口；

6,open():打开一个新的浏览器窗口；

语法：var winObj =window.open([url] ,[name] ,[options]);

参数：url :准备在新窗口中显示哪个文件，url可以为空字符串，表示一个空的页面；

name :新窗口的名字，该名字给<a>标记的target属性来用。

options :窗口的规格,其内容包括以下的几个常用的

width :新窗口的宽度；

height :新窗口的高度；

left :新窗口距离屏幕左边的距离；

top :新窗口距离屏幕上边的距离；

menubar :是否显示菜单栏，取值：yes,no；

toolbar :是否显示工具栏；

status :是否显示状态栏；

返回值：返回一个window 对象的变量，可以通过该名称跟踪该窗口，winObj具备window对象的所有属性和方法；

实例：弹出一个新窗口，要求：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>window.open()弹出一个新窗口</title><script type="text/javascript">function init() {//变量初始化var url2 = "";//新窗口需打开的文件的urlvar name2 = "win2";//新窗口的名字var screenWidth = screen.availWidth;//屏幕的有效宽度var screenHeight = screen.availHeight;//屏幕的有效高度var width = 400;//新窗口的宽度var height = 300;//新窗口的宽度var left = (screenWidth - width) / 2;//左距离var top = (screenHeight - height) / 2;//顶部之间的距离var options2 = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + ",menubar=no,toolbar=no";//打开一个新窗口var winObj2 = window.open(url2, name2, options2);//往新窗口中，输入一个字符串winObj2.document.write("这是新窗口中的内容");//10秒后之后，自动关闭winObj2.setTimeout("window.close()", 10000);}</script></head><body οnlοad="init()"></body></html>

显示效果如下：

onload事件：当网页加载完成，指<body>标记的所有内容加载完成，才触发该事件（条件），通过onload事件属性去调用JS的函数；onload属性只有<body>标记才有；

onclick事件：当单击时，去调用JS代码；所有的HTML标记都具有该事件属性；

HTML标记与JS进行交互是通过HTML标记的事件属性，去调用JS代码来完成的；

交互的实现，例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSwindow对象的一些方法</title><script type="text/javascript">function confirmDel() {if (window.confirm("你确认要删除吗")) {//跳转到delete.php页面，执行删除操作location.href = "delete.php";}}</script></head><body><table width="700" border="1" align="center" rules="all" cellpadding="5"><tr><th>属性或标记</th><th>含义</th></tr><tr><td>table</td><td>表格 <a href="#" onClick="confirmDel">删除此行</a></td></tr><tr><td>width</td><td>宽</td></tr><tr><td>border</td><td>边框</td></tr><tr><td>align</td><td>水平对齐方式</td></tr><tr><td>rules</td><td>内侧边框显示的规则</td></tr><tr><td>cellpadding</td><td>内边距</td></tr></table></body></html>

显示效果如下：

如例中的onClick就是一个事件属性，它是一个单击事件；

当单击<a>标记时，去调用confirmDel函数；然后在confirmDel函数中，来完成相应的功能代码；

对HTML操作有一定顺序的

1，<a>标记必须先出来；

2，鼠标单击<a>标记，事件属性onclick；

3，当onclick事件发生时，去调用confirmDel()函数；

4，转到JS代码中，去执行confirmDel()函数代码；

setTimeout()----延时器方法

setTimeout() ----设置一个延时器，即时间一到，就执行code代码一次；

语法：var timer = window.setTimeout(code ,millisec);//经过millisec毫秒后执行一次code代码

参数：code :是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中或**写函数名且不加()和"**来指向函数地址；

millisec :毫秒值，1秒=1000毫秒；

返回值：返回一个延时器的ID变量，这个ID变量给clearTimeout()用来清除；

例：window.setTimeout(“close()”,2000);//此处用的是“close()”字符串来指明是close()函数，且不会导致直接运行close()函数

例：window.setTimeout(close,2000);//此处close指的是close()函数的地址，如果直接写（window.setTimeout(close(),2000);）将会导致先运行close()函数再运行setTimeout()方法从而使延时器方法失效；

clearTimeout() ----清除延时器ID变量

语法：window.clearTimeout(timer);

参数：timer就是由setTimeout()生成的一个延时器的ID变量

clearTimeout()方法没有返回值；

实例：一个简单的计时器

####### var idObj =document.getElementById(“id”); getElementById()方法用于在document网页文件中取得指定的id对象，返回一个id对象;

setInterval() ----定时器方法

功能：设置一个定时器，定时器，重复不断的执行JD代码（周期性的）

语法：var timer =window.setInterval(code ,millisec);

参数：code :是任何合法的JS代码，一般情况下是JS函数，该函数要放在引号中或**写函数名且不加()和"**来指向函数地址；

millisec :毫秒值，1秒=1000毫秒；

返回值：返回一个定时器的ID变量，这个ID变量给clearInterval()用来清除；

clearInterval() ----清除定时器的ID变量

实例：滚动的图片

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><img src="images\td.jpg" alt="" id="img"><script>window.onload = init;var i = 1;//图片序号function init() {var id1 = window.setInterval(function () {var img = document.getElementById("img");img.src = 'images/td' + i + '.jpg';i++;console.log("此时图片的路径" + img.src)if (i > 3) {i = 1;}}, 2000)}</script></body><ml>

显示效果如下：