javascript基础之BOM

来源：互联网发布：pid算法的c语言实现编辑：程序博客网时间：2024/06/09 02:59

第十一章对象模型
对象模型定义了浏览器和文档可以被JavaScript操作的一些特征。本章介绍最基本的对象模型，高级事件模型。将在下一章介绍
11.1 对象模型的概念
本节介绍JavaScript对象模型的基础性概念，包括对象模型基本结构和初始化对象模型。
对象模型是描述对象结构的接口。从JavaScript对象模型的示意图中可以看出：JavaScript对象模型由四部分组成，
第一部分：JavaScript核心语言，声明，运算符，表达式，数据类型。
第二部分：基于数据类型的基本对象，String，Date,Math。
第三部分：浏览器对象，Window，Navigator,Location.
第四部分：文档对象，Document，Form，Image.
其中，前两部分已经介绍，以后的章节主要介绍浏览器对象和文档对象。
11.1.2 初始对象模型
Window对象定义了与浏览器相关联的属性和方法，。在通常情况下可以认为是对当前Window对象进行操作，所以可以省略Window.
浏览器对象的核心对象：
window 关联当前浏览器窗口
document 包含各类HTML属性与文本片断的对象
frames[] Window对象包含的框架数组，每个框架依次引用另外的Window对象，该对象可包含更多框架
history 包含了当前窗口的历史记录列表，即用户最近浏览的各类URL信息记录
location 包含一个URL及其片断表单的可见文本
navigator 描述浏览器的基本特征，类型，版本等的对象。
11.2 Document对象简介
在JavaScript对象中，Document对象是最常用的对象，本节介绍该对象的常见用法。
11.2.1 Document对象的属性与方法
Document对象提供了一系列属性和方法，可以对页面元素进行属性设置。
Document对象的常见方法如下：
close() 关闭对文档的输入流
open() 打开文档准备输入
write() 向文档输入内容
writeln() 在文档中追加新行并输入内容
常用Document对象的属性
alinkColor:活动链接的颜色，默认为红色
anchors[]文档的锚对象数组
bgcolor 页面背景色
cookie 访问页面cookie的字符串
fgColor 文档内的颜色
forms[] 文档中包含表单元素的数组
LastModified 包含文档最后修改时间的字符串
links[] 文档中的链接的数组
linkColor: 没有访问的链接的颜色
location 包含文档中URL的字符串
referrer 包含指向自己访问过的文档内链接的字符串
Title 包含文档标题的字符串
URL 包含文档URL的字符串
vlinkColor 访问过的链接的颜色。
11.2.2 属性及方法的应用
<html>

<head>

<title>传统文档对象测试</title>
<script language="javascript">

</script>
<style>
body{background-color:white;
color:green;
}
:link{
color"red";

:visited{
color:#FFFF00;
}
h4{
text-align:center;
}
</style>
</head>

<body>
<h4>测试文档</h4>
<a href="http://www.print.com">链接一</a>
<a name="anchor1></a>
<a name="anchor2" href="http://www.javascript.com">链接二</a>
<form></form>
<form></form>
<script language="javascript">
showProps();
</script>
</body>

</html>
11.2.3 文档元素的按位置访问
在上面的代码中可以看到，可以使用类似forms[0]这样的方式来访问不同的表单，。如下：
window.document.forms[0].elements[0]
更好的方式是按名称来访问
11.4.2 文档元素的按名称访问
为了便于读取和操作，JavaScript允许对网页元素命名，基本方式是附加一个id属性，id属性几乎可以关联任何HTML元素。为元素命名后，就可以避免由于位置访问带来的错误，。为了保持旧版浏览器的兼容性，网页开发者必须小心使用name属性，为安全起见，在给网页元素命名时，可以同时使用name,id。只要使两者具有相同的值就可以了。
11.2.5 事件控制器
从前面的章节，您已经知道如何来访问表单对象，现在要介绍如何为用户活动监控这些对象，首要的方法就是通过事件控件器来响应用户操作。所谓事件控件器，就是一连串的JavaScript代码，例如，单击，提交等的操作。
11.3 组合应用

<html>
<head></head>
<body>
<form id="myform" name="myform" action="#" method="get">
<strong>请输入你的名字</strong>
<input type="text" id="username" name="username" size=20>
<br><br>
<input type="button" value="确定" onclick="sayHello();">
<script language="javascript">

</script>
</form>
</body>
</html>
11.4 动态修改表单元素内容
使用JavaScript不仅可以对页面元素内容进行读取，而且可以改变其内容。
在以上的代码中，使用了window.document.colletionname的形式来访问网页元素，其中，collectionname是一个JavaScript对象数组，为些数组包括forms[],anchors[];links[];然而，支持W3C DOM的现代浏览器中，则不需要这样的形式。例如下面：
<p id="para"></p>
document.getElementById("para");
可以通过上述方式对标签访问，。实现了对该标签的访问，就可以使用已经定义的对属性值进行设置。

甚至可以通过style属性设置其CSS样式。

第二十章浏览器与性能检测
浏览器检测对于编写适用于多种浏览器的代码是非常有用的。而性能检测主要是对客户端浏览器，显示器等性能的检测。这些检测可以确定客户端面插件，语言等信息。对于编写针对不同用户的代码也是非常有用的。
20.1 浏览器检测
进行浏览器检测主要是使用Navigator对象，其属性经常用于浏览器版本的检测。属性如下：
appCodeName 包含用户浏览器的名称
appMinorVersion 浏览器的子版本号
appName 浏览器的官方名称
appVersion 包含浏览器的版本
userAgent 浏览器传送到服务器完整的用户代理值
vendor 指明浏览器厂商
VendorSub 指明浏览器的版本数
<html>
<head></head>
<body>
<script language="javascript">
var browserName=navigator.appName;
var browserVersion=parseFloat(navigator.appVersion);
var userAgent=navigator.userAgent;
document.write("your browser's user-agent string="+userAgent+"<br>");
document.write(browserName+"<br>");
document.write(browserVersion+"<br>");
</script>
</body>
</html>
20.2 检测内容
本节介绍检测性能可以应运到的领域。
JavaScript检测：
JavaScript支持检测被看作是最容易的检测技术。如果一段脚本不有运行，就会认为浏览器不支持JavaScrpt，
JavaScript版本检测
使用JavaScript的非标准属性language。本书的很多示例中使用了标准的type.使用language属性时，浏览器会绕过不支持的<script>标签内容。
JavaScript对象检测
很多时候，用户并不关心使用的是哪一个版本。而更关心哪些对象和方法是可用的。
可以使用下列来检测是不是使用了IE浏览器
var id=document.all?true:false;//在火狐浏览器下会返回false
var getbyId=document.getElementById?true:false;
java检测
可以使用Navigator的javaEnabled()来检测浏览器是不是支持Java.如果支持，返回true,如果不支持。返回false.
插件检测
浏览器中安装的每一个插件都会有一个入口程序，用来接入plugins[]数组。
if(navigator.plugins["Shockwave Flash"])
alert(you hava flash);
else
alert("undetectable:rely on tag");
20.2.6 语言检测
在Netscape和Opera浏览器中，使用window.navigator.language.
在IE中，使用window.navigator.userLanguage,window.navigator.systemLanguage;前者指浏览器的语言，后者指操作系统的语言。
20.3 用于可视化检测的Screen对象
用来指示浏览器的基本屏幕特性。
下面的代码说明Screen对象的基本用法：

<html>
<head></head>
<body>
<h2>current screen properties</h2>
<script type="text/javascript">
if(window.screen){
document.write("height:"+screen.height+"<br>");
document.write("width:"+screen.width+"<br>");
document.write("available height:"+screen.availHeight+"<br>");
document.write("available width:"+screen.availWidth+"<br>");
document.write("color depth:"+screen.colorDepth+"bit<br?");
}
</script>
</body>
</html>
获取浏览器窗口的实际大小，
对于同样的功能，可能需要不同的方法来实现，对于要得到窗口的尺寸，对于不同的浏览器来说，需要使用不同的属性和方法。
若想要检测窗口的真实尺寸，在‘Netscape中需要使用Window对象
在IE需要深入到Document中对body进行检测。
在DOM中，需要注意根元素<html>的尺寸。如下代码：

<html>
<head></head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2>
<hr>
<form name="myform" id="myform" action="#" method="get">
浏览器窗口的实际高度：<input type="text" name="availHeight" id="availHeight" size="4"><br>
浏览器窗口的实际宽度：<input type="text" name="availWidth" id="availWidth" size="4"><br>
</form>
<script language="javascript">
var winWidth=0;
var winHeight=0;
function findDimensions(){
if(window.innerWidth)
winWidth=window.innerWidth;
else if(document.body&&document.body.clientWidth)
winWidth=document.body.clientWidth;
if(window.innerHeight)
winHeight=window.innerHeight;
else if(document.body&&document.body.clientHeight)
winHeight=document.body.clientHeight;
if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth){
winWidth=document.documentElement.clientWidth;
winHeight=document.documentElement.clientHeight;
}
document.myform.availHeight.value=winHeight;
document.myform.availWidth.value=winWidth;

}
window.onresize=findDimensions;
</script>
</body>
</html>
20.3.2 设置屏幕对象的尺寸
该实例允许在运行时改变内容和样式风格的浏览器中，还可以设置屏幕对象的尺寸，例如可以设置文字大小随窗口大小而改变。
如下代码所示：

<html>
<head>
<style type="text/css">

</style>
<link type="text/css" rel="stylesheet" href="20.8.css">
<script src="20.8.css" language="javascript"></script>
</head>
<body>
<h1 id="test" style="font-family:verdana;text-align:center;">请改变大小，注意字号的变化</h1>
<script language="javascript">

</script>
</body>
</html>
高级检测技术
关于浏览器检测技术还有很多技巧，例如可以通过传递给用户一组数据来确定下载速度。也可以在Navigator对象中增加自己的属性。
如下代码：
出点问题。帮进行下一项
个性设置，指定主页

<html>
<head>
</head>
<body>
<a href="#" onclick="HomePage='http://www.baidu.com';this.style.behavior='url(#default#homepage)';this.setHomePage(HomePage);return false">设置百度首页</a>
<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com');return false">设置百度为首页</a>
</body>
</html>

0 0