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

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

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

一、BOM(浏览器对象模型)

  1. 定义:BOM也叫浏览器对象模型,提供了很多对象,用于访问浏览器的功能。
  2. 目的:通过脚本访问和操作浏览器窗口。
  3. 特点:BOM是JavaScript应用中唯一没有相关标准的部分
  4. 用途:处理浏览器窗口和框架(客户端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>

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