转自：http://blog.csdn.net/mingxuanyun/article/details/18699667
我们在提到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>