一、JavaScript的实现包括以下3个部分:
1.ECMAScript(核心) | 描述了JS的语法和基本对象。 |
2.浏览器对象模型(BOM) | 与浏览器交互的方法和接口 |
3.文档对象模型 (DOM) | 处理网页内容的方法和接口 |
(1)ECMAScript:
1.ECMAScript是一个标准,JavaScript只是它的一个实现,还有其他实现如:ActionScript。
2.ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”,即ECMAScript不与具体的宿主环境相绑定,如JS的宿主环境是浏览器,AS的宿主环境是Flash。
3.ECMAScript描述了以下内容:语法、类型、语句、关键字、保留字、运算符对象。
(2)BOM(浏览器对象模型):是操作浏览器的API,BOM 其实就是为了控制浏览器的行为而出现的接口,window是其的一个对象。javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器)
(3)DOM(文档对象模型):是操作文档出现的 API,是为了操作文档出现的接口,document 是其的一个对象。
图示:
其中红线框起来的是BOM操作,绿线框起来的是DOM操作。
二、BOM浏览器对象模型
BOM 是 Browser Object Model,浏览器对象模型,BOM中最核心的对象是Window对象:
由于BOM的window包含了document,因此可以直接使用window对象的document属性,从window.document已然可以看出,DOM对象是BOM中window对象的子对象。操作BOM就是操作BOM的window对象。
三、window对象
1.Window对象包含几个子对象:document、location、navigator、screen、history、frames。
2.Window对象的方法:
方法 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
blur() | 把键盘焦点从顶层窗口移开。 |
clearInterval() | 取消由 setInterval() 设置的 timeout。 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
close() | 关闭浏览器窗口。 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
createPopup() | 创建一个 pop-up 窗口。 |
focus() | 把键盘焦点给予一个窗口。 |
moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
print() | 打印当前窗口的内容。 |
prompt() | 显示可提示用户输入的对话框。 |
resizeBy() | 按照指定的像素调整窗口的大小。 |
resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
scroll() | |
scrollBy() | 按照指定的像素值来滚动内容。 |
scrollTo() | 把内容滚动到指定的坐标。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
3.Window对象的属性:
属性 | 描述 |
---|---|
closed | 返回窗口是否已被关闭。 |
defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
document | 对 Document 对象的只读引用。(请参阅对象) |
frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架。 |
history | 对 History 对象的只读引用。请参数 History 对象。 |
innerHeight | 返回窗口的文档显示区的高度。 |
innerWidth | 返回窗口的文档显示区的宽度。 |
length | 设置或返回窗口中的框架数量。 |
location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
name | 设置或返回窗口的名称。 |
navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
opener | 返回对创建此窗口的窗口的引用。 |
outerHeight | 返回窗口的外部高度,包含工具条与滚动条。 |
outerWidth | 返回窗口的外部宽度,包含工具条与滚动条。 |
pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
parent | 返回父窗口。 |
screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
screenLeft | 返回相对于屏幕窗口的x坐标 |
screenTop | 返回相对于屏幕窗口的y坐标 |
screenX | 返回相对于屏幕窗口的x坐标 |
screenY | 返回相对于屏幕窗口的y坐标 |
self | 返回对当前窗口的引用。等价于 Window 属性。 |
status | 设置窗口状态栏的文本。 |
top | 返回最顶层的父窗口。 |
4.图示:
四、window对象的其它子对象
document子对象单独放到DOM中详解,只介绍location、navigator、screen、history这四子对象。
1. Navigator 对象
Navigator 对象的属性
属性 | 说明 |
---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
Navigator 对象的方法
方法 | 描述 |
---|---|
javaEnabled() | 指定是否在浏览器中启用Java |
taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
2.Screen 对象
Screen 对象的属性
属性 | 说明 |
---|---|
availHeight | 返回屏幕的高度(不包括Windows任务栏) |
availWidth | 返回屏幕的宽度(不包括Windows任务栏) |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率(每象素的位数) |
width | 返回屏幕的总宽度 |
3.History 对象
History 对象属性
属性 | 说明 |
---|---|
length | 返回历史列表中的网址数 |
History 对象方法
方法 | 说明 |
---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
4.Location 对象
Location 对象属性
属性 | 描述 |
---|---|
hash | 返回一个URL的锚部分 |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名。 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分 |
Location 对象方法
方法 | 说明 |
---|---|
assign() | 载入一个新的文档 |
reload() | 重新载入当前文档 |
replace() | 用新的文档替换当前文档 |
五、代码示例
<!--html代码-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="bom.js"></script>
</head>
<body>
hello bom
<button onclick="javascript:openwind()">新窗口</button>
<button onclick="javascript:closewind()">关窗口</button>
<br>
<a href="javascript:history.back()">上一个页面</a>
<br>
<a href="javascript:history.forward()">下一个页面</a>
<br>
<button onclick="javascript:location.href='http://www.qq.com'">GO QQ</button>
<button onclick="javascript:getNav()">浏览器信息</button>
<form action="" method="post">
<input type="text" name="tt" id="aa" value="ddd">${[javascript:getNav()]}
</form>
<p id="nav"></p>
定时器:<span id="time">3</span>秒后,跳转JD
</body>
</html>
//相应的js代码
//1.窗口操作
function openwind(){
window.open("bom.html");
}
function closewind(){
//只能关闭脚 本打开的窗口
window.close();
}
//2.定时器
function goQQ(){
var ele=document.getElementById("time").innerHTML;
if(ele==0){
location.href="http://www.jd.com";
}
document.getElementById("time").innerHTML=ele-1;
}
//setTimeout(goQQ,3000);
//setInterval(goQQ,1000);
//5.window子对象 navigator,location
function getNav(){
var str=navigator.appCodeName+" ,"+navigator.appName +" ,"+ window.navigator.appVersion +" ,"+ navigator.platform +navigator.cpuClass+"<br>";
var loc=location.host+" ,"+location.hostname+" ,"+navigator.userAgent;
document.getElementById("nav").innerHTML=str+loc ;
document.getElementById("aa").value=str+loc;
}
//6.使用console.dir()可以查看对象所有属性
console.dir(navigator);
console.dir(location);
console.dir(document);
console.dir(history);
console.dir(screen);
Javascript操作BOM和DOM详解(3)实例:js操作checkbox、select、table