JavaScript-----BOM,DOM

最新推荐文章于 2025-05-27 22:09:04 发布

原创最新推荐文章于 2025-05-27 22:09:04 发布 · 200 阅读

CC 4.0 BY-SA版权

本文介绍了BOM（浏览器对象模型）和DOM（文档对象模型）。BOM将浏览器各部分封装为对象，如Window、Location等，有多种方法可实现弹窗、定时等功能；DOM将标记语言文档各部分封装为对象，包括Document、Element等，可获取和修改文档内容及属性。

一，BOM：Browser Object Model 浏览器对象模型

概念：将浏览器的各个组成部分封装为对象。
特点：BOM对象不能自己创建，当文档加载进内存，浏览器自动创建。
组成：
* Window()：窗口对象
* Location()：地址栏对象
* History()：历史记录(当前窗口)对象
* Navigator ：浏览器对象基本不用仅作了解
* Screen：显示器屏幕基本不用仅作了解
Window：窗口对象

使用方式：window.方法名();
（window 可以省略）方法名;
方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
与定时器有关的方法：
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。循环执行
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。只执行一次
案例：设置定时器 5秒后要执行的函数

var id=window.setTimeout("window.close()",5000);
var id1=window.setTimeout("shut()",5000);
var id2=window.setTimeout(shut，5000);						
						funtion shut(){
							window.close();
						}
//取消定时器 通过定时器的id 来取消
	window.clearTimeout(id);
	window.clearTimeout(id2);

与打开关闭有关的方法：
open():打开新窗口
close():关闭窗口
获取其他对象的属性：
history ：对 History 对象的只读引用。
location ：用于窗口或框架的 Location 对象。
Navigator 对 Navigator 对象的只读引用。
Screen 对 Screen 对象的只读引用。
document：对 Document 对象的只读引用。
二，DOM：Document Object Model 文档对象模型
概念：将标记语言文档的各个组成部分封装为对象.
组成:
* Document：文档对象
* Element:元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
* Node：节点对象
文档对象

获取：window.document
document 中 body属性可以获取body标签对象
document.body.bgColor = “blue”; //修改背景颜色
title 属性获取文档标题
var bt = document.title;
获取文档最后一次修改时间
var md=document.lastModified;
方法：

* 获取Element对象：
			* getElementById():通过id属性值获取唯一的元素
			* getElementsByTagName():通过标签名称获取元素对象数组
			* getElementsByName():通过name属性值获取元素对象数组
			* getElementsByClassName():通过class属性值获取元素对象数组
* 创建其他对象
			* createElement:创建元素对象
			* createAttribute：创建属性对象
			* createComment：创建注释对象
			* createTextNode：创建文本对象
 * 给属性对象设置值：font1.setAttribute('color','yellow');