1、window 对象
1.1. DHTML 概述
1.1.1. DHTML 简介
DHTML 称为动态的 HTML，即操作 HTML 以创造各种动态视觉效果。
DHTML 是一种浏览器端的动态网页技术，常用于动态改变页面元素、与用户进行交互等。
DHTML 对象模型包括浏览器对象模型和DOM 对象模型。其中，浏览器对象模型简称 BOM，包含可以操作的浏览器的对象，比如 screen、navigator 等；而 DOM 对象模型全称为文档对象模型，用于操作页面的内容。
1.1.2. DHTML 对象模型
DHTML 对象模型如图－1所示：
图－1
由图－1可以看出，顶层对象为 window 对象，表示整个浏览器窗口，它包含多个子对象，分别表示不同的功能，比如 history、location 等。
1.1.3. BOM 与 DOM
BOM，即浏览器对象模型 ，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话”。通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。不过，BOM 目前虽然被绝大多数的浏览器支持，但是它并没有相关标准。
DOM，即文档对象模型，用来操作文档。其中定义了访问和操作 HTML 文档的标准方法。应用程序通过对 DOM 树的操作，来实现对 HTML 文档数据的操作。
1.2. window 对象
1.2.1. window 对象
所有浏览器都支持 window 对象，它表示浏览器窗口。所有的 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可 以只写 document，而不必写 window.document。
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
window 对象的常用属性有：
· document：窗口中显示的 HTML 文档对象
· history：浏览过窗口的历史记录对象
· location：窗口文件地址对象
· navigator：有关浏览器的信息
· event：事件对象
· screen：屏幕对象
· name：窗口名称
· opener：打开当前窗口的 window 对象
window 对象的常用方法有：
· alert(),confirm(),prompt()：对话框
· close(),open()：关闭、打开窗口
· focus(),blur()：窗口获得焦点或者失去焦点
· moveBy(),moveTo()移动窗口
· resizeBy(),resizeTo()：调整窗口大小
· scrollBy(),scrollTo()：滚动窗口中网页的内容
1.3. 窗口和对话框
1.3.1. 对话框
1、alert()
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框，语法为：
alert(message)
其中，参数message 是要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）。
2、confirm()
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框，语法为：
confirm(message)
其中，参数 message要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）。如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
3、prompt()
prompt() 方法用于显示可提示用户进行输入的对话框，语法为：
prompt(text,defaultText)
其中，参数 text 可选，为要在对话框中显示的纯文本（而不是 HTML 格式的文本）；参数 defaultText 也是可选的，表示默认的输入文本。
如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
1.3.2. 窗口的打开和关闭
window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口，语法为：
1 window.open(URL,name,features,replace)
各参数的说明如下：
URL：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用 作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
replace：一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
1.4. 定时器
1.4.1. 定时器
通过使用 JavaScript，可以作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为定时事件。定时器多用于网页动态时钟、制作倒计时、跑马灯效果等。有两种定时器：
· 周期性时钟：以一定的间隔执行代码，循环往复；
· 一次性时钟：在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
1.4.2. 周期性定时器
setInterval() 方法用于启动一个周期性定时器。该方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，且不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
启动周期性定时器的语法如下：
2 setInterval(code,millisec[,"lang"])
其中，参数 code 必需，表示要调用的函数或要执行的代码串；参数 millisec 也是必需，表示周期性执行或调用 code 之间的时间间隔，以毫秒计。
该方法返回所启动的定时器对象，可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
1.4.3. 一次性定时器
setTimeout() 方法用于启动一个一次性定时器，该方法在指定的毫秒数后调用函数或计算表达式。语法如下：
3 setTimeout(code,millisec)
其中，参数 code 必需，是要调用的函数后要执行的 JavaScript 代码串；millisec 也是必需的 ，表示在执行代码前需等待的毫秒数。
需要注意的是，setTimeout() 只执行 code 一次。如果需要实现多次调用的效果，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout，只需要传入由 setTimeout() 返回的 ID 值即可。
2. document 对象
2.1. document 对象概述
2.1.1. document 对象概述
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
2.2. DOM 概述
2.2.1. DOM 概述
DOM （Document Object Model），文档对象模型，用于处理文档中的内容。
当网页被加载时，浏览器会创建页面的文档对象模型，HTML 文档中的所有节点组成了一个文档树（或节点树），而document 对象是一棵文档树的根。
通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。也可以对其中的内容进行修改和删除，同时也可以创建新的元素。
2.2.2. DOM 节点树
HTML 文档中的所有节点组成了一个文档树（或节点树），而HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点，如图－2所示：
图－2
其中，整个文档是一个文档节点，每个 HTML 标签是一个元素节点，包含在 HTML 元素中的文本是文本节点，每一个 HTML 属性是一个属性节点，注释属于注释节点。总之，一切皆节点。
树根为 document 对象，可以通过 document 对象，来操作整个节点树。
需要注意的是，一棵节点树中的所有节点彼此都有关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root），每个节点都有父节点、除了根（它没有父节点），一个节点可拥有任意数量的子，同胞是拥有相同父节点的节点。
比如图－2中，<html> 节点是 <head> 和 <body> 节点的父节点；而 <title> 节点是 <head> 节点的子节点； <body> 节点拥有众多的后代节点。
2.2.3. DOM 操作
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。通过 DOM 操作，可以查找节点、读取节点信息、修改节点信息、创建新节点以及删除节点。
2.3. DOM 操作－读取、修改
2.3.1. 节点信息
可通过 JavaScript （以及其他编程语言）对 DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素）；属性是能够获取或设置的值（比如节点的名称或内容）。
1、nodeName 属性
nodeName 属性规定节点的名称，为只读属性。其中：
· 元素节点的 nodeName 与标签名相同
· 属性节点的 nodeName 与属性名相同
· 文本节点的 nodeName 始终是 #text
· 文档节点的 nodeName 始终是 #document
需要注意的是，nodeName 始终包含 HTML 元素的大写字母标签名。比如，<input> 节点的 nodeName 属性返回的字符串为 “INPUT”。
2、nodeType 属性
nodeType 属性返回节点的类型，为只读属性。不同类型的节点的 nodeType 属性的返回值如下所示：
· 元素：1；
· 属性：2；
· 文本：3；
· 注释：8；
· 文档：9。
3、nodeValue 属性
nodeValue 属性用于获取节点的值，其中：
· 元素节点的 nodeValue 是 undefined 或 null
· 文本节点的 nodeValue 是文本本身
· 属性节点的 nodeValue 是属性值
2.3.2. 元素节点的内容
获取元素内容的最简单方法是使用 innerHTML 属性，该属性用于设置或获取位于对象起始和结束标签内的 HTML 文本，适用于任意 HTML 元素，包括 <html> 和 <body>。
innerText 属性用于设置或获取位于对象起始和结束标签内的文本。
首先查看如下HTML代码：
4 <div id="div1">
5 第一行文本
6 <p>段落中的文本</p>
7 </div>
再查看如下 JavaScript 代码：
8 Var div = document.getElementById("div1");
9 Var str = div.innerText;
10 str += "\n";
11 str += div.innerHTML;
12 alert(str);
上述代码弹出的结果如图－3所示：
图－3
由此可见，innerText 只获取标签中的纯文本，而 innerHTML 包含标签中的纯文本以及 HTML 文本标记。
2.3.3. 节点属性
获取元素属性的方式有如下几种：
1、getAttribute()方法
此方法用于根据属性名称获取属性的值，比如：
13 node.getAttribute(“href”);
此代码用于获取 node 节点中 href 属性的值。
2、setAttribute()方法
此方法用于设置某属性的值，比如：
14 node.setAttribute(“href”,“http://tts7.tarena.com.cn”);
此代码将设置 node 节点中 href 属性的值。
3、removeAttribute()方法
此方法用于删除某属性。
4、将 HTML 标记、属性和 CSS 样式都对象化
除了前面的方法，还有一种更简便的方式，就是根据将 HTML 标记、属性和 CSS 样式都对象化的规则来操作属性。
比如，有如下 HTML 代码：
15 <a href="Default.aspx" id="a1">Click Me</a>
16 <img src="ball.jpg" id="img1" />
查看如下 JavaScript 代码：
17 Var a1 = document.getElementById("a1");
18 alert(a1.href);
19 a1.innerHTML = "new text";
20 document.getElementById("img1").src = "clock.jpg";
由上述代码可以看出，对于 <a> 元素节点，可以直接对其调用 href 属性；对于 <img> 元素节点，可以直接对其调用 src 属性。
注意，这种方式并不是标准 DOM 操作的方式，属于 HTML DOM操作，在后续章节中会有详细讲解。
2.3.4. 元素节点的样式
在 DOM 操作中，经常需要修改或者设置元素节点的样式，以实现各种动态效果。设置元素节点的样式有两种方式。
1、style 属性
style 是元素的通用属性，因此，可以通过它来设置元素的属性。只是，style 属性并非单一值，而是多个具体属性的集合，因此，需要使用具体的样式属性来进行样式设置。比如：node.style.color 可以设置节点的字体颜色，node.style.fontSize 可以设置节点的字体大小，node.style.backgroundColor 用于设置节点的背景颜色.样式属性采用驼峰命名法,并省略减号.
查看如下 HTML 代码：
21 <p id="p1">一周畅销榜</p>
再查看如下 JavaScript 代码：
22 varo = document.getElementById("p1");
23 o.style.color = “red”;
24 o.style.fontSize = 20;
上述代码设置段落元素的字体为红色，且字体大小为 20。
2、className 属性
使用 style 属性设置元素的样式，只能一一的进行设置，过于麻烦。如果需要设置复杂的样式，可以先在 CSS 中定义样式类，再使用 className 属性来设置元素使用所定义的样式类，从而很方便的修改样式。
查看如下代码：
25 o.className = “样式类名称”;
上述代码会将节点 o 的样式类设置为所定义好的样式类，从而实现样式定义。
发表评论