web的浏览器对象

1. BOM与DOM

对于嵌入网页的JS来说，宿主对象就是浏览器提供的对象，又称为浏览器对象；
浏览器对象模型（简称BOM） 主要包括 windows、history、location和documnet等对象，window 对象是整个 BOM 的顶层对象，其他对象所处位置及其关系如下图所示：

文档对象模型（简称DOM） 是指W3C组织把页面（或文档）的对象组织到一个树形结构中，每个HTML标签是一个元素节点；DOM的核心操作是查看节点、创建和增加节点以及删除和替换节点；
在浏览器对象模型中，顶级对象是window对象，表示浏览器的窗口，提供产生警示消息框方法 alert()、客户端是否确认方法confirm()、定时器方法setTimeout()和setInterval()；
在浏览器窗口里，能包含文档、框架和访问历史记录等对象；几个常用的二级对象如下所示：

• document：表示浏览器窗口里的文档，提供了向窗口输出信息的方法wite()；
• location：表示窗口里文档的位置，其属性href用于客户端的页面跳转；
• navigation：表示浏览器；
• history：表示历史访问记录；

注意：（1）浏览器对象在JS脚本里直接使用，不需要实例化；
（2）在JS脚本里使用浏览器对象时需要小写，这不同于HTML标记名称及其属性名称；
（3）二级对象document、location、navigator和history时相对于顶级对象window而言的；

在一个文档里可包含超链接、图像和表单等，表单里能包含文本框、下拉列表框、提交按钮等，所以，浏览器对象模型具有多级结构；

2. 顶级对象 window 常用属性和方法

·

• window对象处于浏览器对象模型的第一层，对于每个打开窗口，系统都会自动将其定义为window对象；
• window 对象的主要属性如下：
• document：表示窗口中当前显示的文档对象；
• history：表示对象保存窗口最近加载的URL；
• location：表示当前窗口的URL；

窗口对象提供的常用方法如下：

• alert()：显示一个带有提示信息和确定按钮的警示框，单击“确定”按钮后消失；
• confiirm()：显示一个带有提示信息、“确定”按钮和“取消”按钮的确认框，单击“确定”按钮后返回TRUE，单击“取消”按钮后返回FALSE，确认框在单击按钮后消失；
• prompt()：显示可提示用户输入的对话框；
• setTimeout()：在设定的毫秒后调用方法或计算表达式——计时器；
• setInterval()：按照设定的周期（以毫秒为单位）来重复调用方法或表达式；
• clearInterval()：取消方法setInterval()设定的定时器；
• close()：关闭浏览器；
• open()：打开一个新的浏览器窗口，加载URL指定的文档；

注意：（1）使用顶级对象 window 的方法时，前面的 “windw.” 可省略；
（2）当执行alert()方法时，程序暂停在此处，所以，常用 alert()方法进行JS程序调试；
方法 alert()用来向用户弹出一个警告，或提示下一步该如何操作；一个使用alert()的示例代码入下：

var age=22;
var name='王某';
window.alert('我是：'+name+'\n'+'年龄是：'+age);

方法 prompt()用来创建提示对话框，用户可在对话框中输入信息，如密码、用户在提示对输入或个人信息（昵称或头衔等）；提示对话框中包含一个简单的文本框，用户在提示对话框中输入文本后，文本会作为值返回；
prompt()方法有两个参数：第一个参数提示用户应该输入的内容，第二个参数是文本框中显示的初始默认值；若没有传递第二个参数，文本框中默认显示 undefined；
prompt()的示例如下：

var name=window.prompt('请输入昵称：');
window.alert('welcome:'+name);

方法 confirm() 创建确认对话框，用来确认用户针对某一个问题的答案，必须经过用户同意操作才能完成；
confirm() 的示例如下：

var flag=window.confirm("确认删除吗？");
if(flag){
window.alert("执行删除操作");
}else{
window.alert(" 取消删除操作");
}

方法 open()的返回值是打开的 window对象；open() 方法的第一个参数是新窗口的URL，第二个参数是给新窗口的命名，第三个参数是设置新窗口的特征；
open() 方法常见的特征如下表：

打开主页时，广告页面也随之打开；单击主页面 “关闭广告页” 的链接时，广告页面关闭；

<script type="text/javascript">
var newWin;
window.onload=function(){
newWin=open("adv.html","adv","height=500,width=800,location=no,menubar=no,toolbar=0,resizable=no";
}
</script>
<a href="javascript:newWin.close()">关闭广告</a>

window对象有类似闹钟的两个方法：setTimeout()方法和setInterval()方法；通过这两个方法，开发人员能通过设定时间来让程序完成指定任务；
setTimeout()方法会在指定的时间内执行的代码并退出；setInterval()方法会根据设定的时间间隔反复执行指定的代码，直至程序结束或利用 clearTnterval()方法 取消；
这里两个方法的语法相同，都带有两个参数：一个是带有引号的程序代码或函数的调用；另一个是以毫秒表示的时间，这个时间代表代码的延迟；

<script type="text/javascript">
		setTimeout("alert('hello')",3000);		//设定3秒后，自动弹出信息框显示“hello”
	</script>
	<script type="text/javascript">
		setInterval("alert('hello world!')",6000);		//6秒后，反复弹出信息框，知道程序退出
	</script>

使用setTimeout()方法或者setInterval()方法，制作动画；

3. 文档对象documnet 与表单的elements 集合

1. 文档对象 document

整个HTML文档在DOM中是一个document 对象，要在JS 中访问DOM 元素，需要标识HTML元素的标识属性；
id和name都能用标识一个标记，JavaScript有两个方法getElementById()和getElementsByName()来定位DOM节点；
id 标识的元素的外观由与name属性命名表单域（表单元素）；
文档对象document获取页面元素的方法如下：

• write(exp)：向页面输出表达式exp的内容；
• writeIn(exp)：向页面输出表达式exp的内容，并添加一个空格；
• getElementByTagName(“tagName”)：返回文档里指定标签名的对象的集合；
• getElementById()：返回使用id属性定义的对象；

注意： 在HTML中，name 属性值定义一组对象，而id属性值定义不可重复对象，这是方法getElementById()的要求；

2. 表单的elemnts集合

访问上表单元素，除了能使用上面的通用方法，还能使用表单的 elements集合；
elements集合按照元素在表单里出现的先后顺序，以数组形式返回form表单所有的元素，使用格式如下：

formObject.elements[i].property		//下标i从0开始

结束语

若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有什么错误，欢迎大家指教。