桃园三结义——JavaScript客户端的实现

浏览数：12 / 时间：2015年06月09日

我们在提到Javascript的时候，都会说JavaScript实现了Web浏览器的交互功能，但是我们在为JavaScript祝酒之时，请不要忘记与其并肩作战开国元勋——BOM和DOM。坦率地讲，一个JavaScript程序应该由以下3部分组成：

Core(JavaScript核心编程）
BOM（浏览器对象模型）
DOM(文档对象模型）

一、BOM（浏览器对象模型）

定义：BOM也叫浏览器对象模型，提供了很多对象，用于访问浏览器的功能。
目的：通过脚本访问和操作浏览器窗口。
特点：BOM是JavaScript应用中唯一没有相关标准的部分
用途：处理浏览器窗口和框架（客户端Javascript脚本语言的扩展）

常见对象：

（一）window对象：表示浏览器的一个实例。是客户端JavaScript的全局对象，客户端JavaScript程序正是在Window对象提供的全局域空间中运行的。 Window对象处于Javascript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window对象。实际上，Window对象代表的是一个浏览器窗口或者窗口中的一个框架。

1.全局作用域:

在客户端浏览器重，Window作为全局对象，也称为第一类对象。所有客户端JavaScript代码都将在全局环境中运行。作为全局环境，Window对象提供了全局作用域。

例如：

var a ="window.a";             //全局变量
function f(){                      //全局函数
	alert(a);
}
alert (window.a);              //引用window对象的属性a,返回字符串"window.a"
window.f();                      //调用window对象的方法f(),返回字符创”window.a“

2.生命周期

与一般对象不同，Window对象存在于浏览器当前进程中。也就是说，如果当前浏览器的进程没有被终止，Window对象依然会存在。

例如：新建一个窗口，然后关闭，再原窗口中检测已关闭窗口的Window对象是否存在。

<body>
<script>
function fw(){
	w=window.open();
}
</script>
<input type ="button" value ="新建一个window对象" onclick="fw();"/>
<input type ="button" value ="检测window对象是否存在" onclick="alert(w.alert)"/>

</body>

在上面的例子当中，在IE和FireFox浏览器中因为几个窗口同为一个进程，所以不管是否关闭，都会检测到新开窗口的Window对象，而对于Chrome浏览器来说，由于每新开一个窗口，都会新建一个进程，所以当关闭新开窗口时，原窗口中就不会检测到新建的Window对象。

常用系统弹出框：

alert():提示对话框 ,包含一个可选提示信息参数。
confirm():提示对话框，包含两个按钮（确定、取消），点击确定，返回true;点击取消，返回false;
prompt():接收用户输入信息框，并把用户输入的信息返回。

（二）、Location对象：包含当前页面与位置（URL）相关的信息。该对象存储在Window对象的location属性中，表示特定窗口中当前显示文档的Web地址。

常见方法:

reload():重新装载当前文档
replace():装载一个新文档而无须为它创建一个新的历史记录。

（三）、History对象：是 window 对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起。

常见方法：

back():返回到前一个URL
forward():返回下一个URL
go():根据不同的参数决定访问的URL
- 正整数：在历史列表中向前移动
- 负整数：在历史列表中向后移动
- 零：刷新页面
- 字符串：检索包含该字符串的URL，并访问第一个检索到的URL。

二、DOM（文档对象模型）

定义：DOM是HTML和XML的应用程序接口（API),DOM能够把整个文档提炼为以节点为单元的树形结构，并具备检索树形结构、操作属性结构，以及编辑节点内容的能力。

用途：删除、添加、替换节点

特点：DOM不是JavaScript脚本，也不是HTML结构，它是W3C开发的一组规范。

（一）、DOM节点（HTML元素）

1.创建新的HTML元素：

例如：HTML代码如下：

<title>添加节点</title>
</head>
<body>
<div id="note">
	<p id="p1">这是一个段落</p>
	<p id="p2">这是另一个段落</p>
</div>
</body>
</html>
<script type="text/javascript" src="Untitled-2.js">
</script>

JavaScript代码如下：

var para=document.createElement("p"); //创建新的元素<p>
var node=document.createTextNode("这是新段落。"); //向 <p> 元素添加文本，您必须首先创建文本节点
para.appendChild(node); 

//向 <p> 元素追加这个文本节点//向一个已有的元素追加这个新元素
var element=document.getElementById("note"); 
element.appendChild(para);

2.删除已有的 HTML 元素

例如：javascript代码如下：

var parent=document.getElementById("note");      //找到id=note的元素
var child=document.getElementById("p1");          //找到id=‘p1‘的元素
parent.removeChild(child);                                 //删除元素

（二）、改变HTML元素

允许 JavaScript 改变 HTML 元素的内容。

1.改变HTML输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是：Thu Jan 23 2014 11:32:37 GMT+0800 (中国标准时间)

<title>测试</title>
</head>
<body>
<script>
document.write(Date());
</script>
</body>

PS:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

2.改变内容：

<title>改变内容</title>
</head>
<body>

<p id="p1">北京欢迎您！</p>
<script>
document.getElementById("p1").innerHTML="广西欢迎您！";
</script>

<p>口号被修改了！</p>

</body>

3.改变HTML属性：

<title>测试</title>
</head>
<body>
<div id="note", style="color:#FF0000">改变颜色</div>
<script> 
document.getElementById("note").setAttribute("style","color:#0F0");
</script>
</body>

（三)、改变CSS样式

DOM允许JavaScript改变HTML元素的样式。

<body>
<p id="P1">北京欢迎你!</p>
<script>
document.getElementById("P1").style.color="blue";
</script>
</body>

(四)、DOM 事件

DOM使JavaScript有能力对HTML事件做出反应。

例如：点击更改文本内容

<title>测试</title>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>

<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

桃园三结义——JavaScript客户端的实现