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

我们在提到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对象" οnclick="fw();"/>
<input type ="button" value ="检测window对象是否存在" οnclick="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 οnclick="changetext(this)">请点击该文本</h1>
</body>

桃园三结义——JavaScript客户端的实现相关推荐

桃园三结义c语言程序,黄海波乱世三义桃园三结义首播
<乱世三义>选取了以华夏大地风云变幻的抗战期间为历史背景,以唐子义.谷仁义.索智义结义三兄弟抗日的传奇经历为故事主线,剧情跌宕起伏,人物关系错综复杂,情感纠葛不断.<乱世三义> ...
【三国说】十常侍叛乱桃园三结义
旁白在三国演义中,有个非常出名的典故叫做"桃园三结义",讲述的是刘备.关羽.张飞三人相遇,并结交为兄弟共谋大业的事,这也是三国演义的开端. 大家好,说起三国,许多人先想到的无非就 ...
三国演义之桃园三结义
昨日看了三国演义第一集,桃园三结义,对于刘备此人甚为佩服,如下讲述他与众不同之处. 开篇是国家政权崩坏.时局混乱,董卓掌控帝国上层管理者,指示其走狗爪牙在首都洛阳奸淫掳掠,大肆破坏.朝野内外痛恨董卓者 ...
桃园三结义之HTML、CSS、JavaScript
需要解释一下,这篇文章不是讲核心技术的,我也只是刚刚接触,在这里只是跟大家一起认识一下HTML.CSS.JavaScript 牛腩新闻发布系统都快敲完了,系统中牛老师也对HTML.CSS.JavaSc ...
“网络三结义”--mpls 进阶实验详细配置
实验拓扑: 基础配置: 1. 对每个设备进行ip地址的配置 (这些基础配置就不在这里赘述) 2.在R2 R3 R4 上运行ospf协议 3. 运行 ospf协议之后, R2 R4 运行bgp协议, ...
刘关张三结义（第七次作业）
package pjh1;public class A {public int id;public String name;public int age;public String city;publ ...
八、前端开发-JavaScript 客户端存储
八.前端开发语言体系-JavaScript 客户端存储文章目录八.前端开发语言体系-JavaScript 客户端存储 JavaScript 客户端存储客户端存储简介 Cookie LocalSt ...
mxGraph 用户手册中文 – JavaScript客户端
目录 1 简介 1.1 产品线介绍 1.2 使用哪个版本的mxGraph? 1.2.1 JavaScript 1.3 mxGraph – JavaScript库 1.4 mxGraph可以被用在什么样 ...
mxGraph 用户手册 – JavaScript客户端
1 简介 1.1 产品线介绍 mxGraph是一系列以不同技术开发的工具库,旨在提供显示交互式的图表和图形的应用程序的功能. 请注意,对于图形,我们是指数学图形, 不一定单单指图表 (虽然有些图形是 ...

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

桃园三结义——JavaScript客户端的实现相关推荐

最新文章

热门文章