JavaScript-程序员参考-四-

JavaScript 程序员参考（四）

原文：JavaScript Programmer's Reference

协议：CC BY-NC-SA 4.0

六、JavaScript 控制语句参考

介绍

正如我们在第二章中讨论的，JavaScript 拥有你所期望的类似 C 语言的常见控制语句:

• do循环
• for 和for/in循环
• while 循环往复
• if-else条件句
• switch条件句

此外，JavaScript 提供了管理循环迭代的方法，完全打破循环，甚至限制循环的范围。

在这一章中，我们将按照字母顺序提供所有 JavaScript 控制语句的可靠参考。有关这些声明的详细讨论，请参见第二章。

打破

break语句终止当前循环或当前label或switch语句。该语句带一个可选的label，它对应于要中断的循环的label。

语法

break label;

例子

// Set up a loop that would ordinarily alert 0 through 10, but instead breaks at 2.
var i = 0;
while (i <= 10) {
    alert(i);
    if (i === 2) {
        break;
    } else {
        i++
    }
}

继续

continue语句停止循环的当前迭代，并继续下一次迭代。该语句使用一个可选的label来中断循环的label。

continue语句只能在for循环、for/in循环、while、和do/while循环中使用。如果在一个for循环中使用，循环将跳回它的增量表达式，执行它，然后检查是否应该继续。

如果在for/in循环中使用，循环将进行到下一场，并从那里继续循环。

如果在while或do/while循环中使用，循环将立即重新测试条件，并根据结果决定是否继续。

注明智地使用continue。很容易编写使用难以阅读和维护的continue的代码。事实上，看到风格指南明确指出应该完全避免continue并不罕见。

语法

continue label

例子

var i;
for (i = 0; i < 11; i++) {
    if (i < 4) continue;
    alert(i);
    if (i < 7) continue;
    alert(10 * i);
}

在这个例子中，我们创建了一个从 0 到 10 迭代变量i的循环(关于for循环的细节稍后提供)。如果i < 4，我们什么都不做。一旦i为 5 或更高，我们就开始提醒它的值。而一旦i > 6，我们就开始戒备10 * i。因此，该脚本将依次发出警报，4、5、6、7、70、8、80、9、90、10 和 100。

这是一个有点做作的例子，但是它确实说明了continue的一个常用模式:分层测试。在这种情况下，我们对循环迭代器的值进行分层简单检查，但是分层测试可以是对任何会随着特定循环的进展而改变的东西进行的任何测试。

当然，这个例子可以重写，这样它就根本不用continue了:

var i;
for (i = 0; i < 11; i++) {
    if (i > 3) {
        alert(i);
    }
    if (i > 6) {
        alert(10 * i);
    }
}

任何一种方式都是有效的。

do/while

do/while循环创建一个循环，并在结束时进行条件测试。因为条件是在每个循环结束时计算的，所以循环至少会执行一次。

语法

do {
    // things
} while (conditional);

例子

// A way to alert only odd numbers
var i = 1;
do {
    alerti);
    i = i + 2;
} while (i <= 10);

赞成和赞成/反对

在 JavaScript 中，for循环可以设置为for或for/in循环。

为

在一个基本的for循环中，for语句有三个参数:

• 一个initializer，在循环第一次开始时运行一次。
• 一个conditional，每次循环执行时都会对其进行测试。如果评估为true，则执行循环；如果是false，循环终止，控制转到for循环后的下一条语句。
• 一个expression，在每个循环结束时执行。

初始化器中声明的任何变量都与for语句具有相同的作用域。

语法

for (initializer, conditional, expression) {
    // do things
}

例子

// Another way to alert odd numbers
for (var i = 1; i <= 10; i = i +2) {
    alert(i);
}

赞成/反对

一个for/in循环遍历一个对象，提供对每个属性的访问。for语句有两个参数，property和object。这提供了一种方便的方法来枚举对象，正如在第二章中所讨论的。

语法

for (property in object) {
    // Do things
}

例子

// All-purpose enumeration loop
var testObject = {
    property1 : "this is a test object.",
    property2 : 1,
    arrIntegers : [1, 2, 3, 4],
    boolIsTrue : true
}

var strAlert = "";
for (var thing in testObject) {
    strAlert += thing + ": " + testObject[thing] + "\n";
}
alert(strAlert);

此示例将在一个警报中枚举我们的testObject的所有属性:

如果

if语句为 JavaScript 提供了标准的逻辑流控制。一个if语句评估它的参数，如果该参数为真，该语句将执行条件代码。

一个if语句后面可以跟一个else语句，如果参数的值为false，这个语句就会执行。一个else语句可以类似地跟随着一个if语句，允许条件链。

语法

if (condition) {
    // conditional code, executed if condition is true
}

if (condition) {
    // conditional code to be executed if condition is true
} else {
    // conditional code to be executed if condition is false
}

if (condition1) {
    // conditional code to be executed if condition1 is true
} else if (condition2) {
    // conditional code to be executed if condition2 is true
} else {
    // conditional code to be executed if both condition1 and condition2 are false.
}

例子

// Play with random numbers
var myNumber = Math.floor((Math.random() * 100) + 1); // Generate a random number from 1 to 100
if (myNumber <= 10) {
    alert("number is less than 10");
} else if (myNumber <=50) {
    alert("number is less than 50");
} else {
    alert("Number is frighteningly large.");
}

标签

label语句将一个标识符与一个特定的语句相关联，该语句可以使用break或continue来引用。

标签在 JavaScript 中被认为是不好的做法，因为它们使代码难以阅读。通常，您可以使用命名函数来代替标签。

语法

label:
    statement

例子

outerloop:
for (var i =0; i < 5; i++) {
    innerloop:
    for (var j = 0; j < 5; j++) {
        if ((i == 2) && (j == 2)) {
            continue outerloop; // skip when both indices are 2
        } else {
            alert(i  + ", " + j);
        }
    }
}

返回

return 语句用于指定函数的返回值。该值可以是任何有效的 JavaScript 数据类型:字符串、布尔值、数组、函数、日期、正则表达式等。

语法

return value;

例子

// Trivial function to test whether a value is less than ten or simply too large to understand.
function testValue(intValue) {
    if (intValue < = 10) {
        return "value is less than ten";
    } else {
        return "value is terrifyingly large.";
    }
}
var niceNumber = 5,
    scaryNumber = 20909239;

alert(testValue(niceNumber));  // will alert "value is less than ten"
alert(testValue(scaryNumber)); // will alert "value is terrifyingly large"

开关/外壳

基于给定表达式的多个值，语句提供了一种提供不同条件的便捷方式。

一个switch语句计算一个表达式，然后搜索与结果相关联的case。如果找到一个case，则执行相关的条件代码。

此外，每个条件代码块可以在末尾包含一个可选的break语句。如果存在，switch语句将立即结束；如果没有，switch语句将继续搜索匹配的case语句。

语法

switch (expression) {
    case value1:
        conditional1
        break;
    case value2:
        conditional2
        break;
    case value3:
        conditional3
        break;
    default
        default conditional
}

例子

switch(booze) {
    case "tequila":
        alert("Margarita time!");
        break;
    case "vodka":
        alert("Mr. Bond, is that you?");
        break;
    case "scotch":
        alert("Aye.");
        break;
    default:l
        alert("But why is the rum gone?");
}

在这个例子中，我们打开了一直流行的booze变量；根据它的值，我们将得到一个适当的警报。

这是一个开启文学子类别的全功能示例:

var leftBehind = "religious";
var dogstar = "apocalyptic";
var kinglear = "shakespeare";

function defineSubGenre(strType) {
    var strResult = "";
    switch (strType) {
        case "religious":
            strResult += "religious ";
        case "apolcalyptic":
            strResult += "apocalyptic ";
        case "science fiction":
            strResult += "science ";
        default:
            strResult += "fiction";
    }
    return strResult;
}

alert(defineSubGenre(leftBehind)); // will alert "religious apocalyptic science fiction"
alert(defineSubGenre(dogstar));    // will alert "apocalyptic science fiction"
alert(defineSubGenre(kinglear));   // will alert "fiction"

在这个例子中，我们演示了没有break语句的switch语句的使用。这适用于越来越普遍的包含彼此的情况:小说包含科幻小说的子类；科幻小说包含启示录小说这一子类；启示录科幻小说包含宗教启示录科幻小说这一子类。

switch语句构建一个return字符串，函数返回该字符串。我们尝试了三本不同的书:一本是“宗教”(提醒“宗教启示录科幻小说”)，一本是“启示录”(提醒“启示录科幻小说”)，还有一本是“莎士比亚”(只提醒“小说”)。

正在…

while语句创建一个循环，每当指定的表达式计算结果为true时，该循环将继续执行。表达式在循环的每次迭代之前进行计算。(与do. . .while循环相比，条件测试在最后。)

语法

while (expression) {
    // code to execute each time
}

例子

// alert the integers 1 through 10
var i = 0;
while (i < 11) {
    alert(i);
    i++;
}

同

with 语句修改给定代码块的作用域链。回想一下，如果您访问一个变量，JavaScript 会检查它是否是在直接作用域内定义的。如果找不到变量，JavaScript 会检查包含变量的范围，依此类推，直到全局范围。with语句将指定的对象添加到作用域链的头部，确保在给定代码块中发生的所有作用域查找中都能搜索到该对象。

尽管最初是为了方便起见才包含在语言中的，但with语句被认为是不好的做法，因为它会使代码难以阅读和维护，事实上在 ECMAScript 5 严格模式中是被禁止的。如果您打算使用with语句，请记住在指定代码块中发生的每个范围查找都将首先检查指定的对象，因此您应该尝试限制以下内容:

• 将托管代码块中的查找范围扩大到指定的对象
• 对象的复杂性

限制这两者将有助于提高代码的效率。

语法

with (object) {
    // statements with scope limited to object
}

例子

alert(Math.PI); // will alert the value of PI.
// Limit the scope to just Math
with(Math) {
    alert(PI);  // will alert the value of PI.
    alert(cos(PI));
}

摘要

在这一章中，我们已经讨论了 JavaScript 的控制语句，它用于指导程序的逻辑流程:

• JavaScript 的控制语句类似于其他类 C 语言中的控制语句。
• JavaScript 有两个条件流控制语句:if语句和switch语句。
• JavaScript 有四种不同的循环方法:do. . .while、for、for-in和while。
• 您可以用break和continue语句修改循环执行。
• with语句修改了作用域链，但被认为是不好的做法。
• JavaScript 有label语句的概念，但是它们也被认为是不好的实践。

在下一章，我们将提供 JavaScript 操作符的参考，包括赋值操作符、算术操作符和比较操作符。

七、JavaScript 运算符参考

在 JavaScript 中，运算符对表达式执行运算。运算符所运算的表达式被称为操作数。JavaScript 支持一元运算符(处理一个表达式的运算符，如 increment 运算符)、二元运算符(需要两个表达式的运算符，如大多数数学运算符)和一个三元运算符(需要三个表达式)。

JavaScript 中的运算符可以分为七大类:

• 赋值:给变量赋值
• 比较:比较数值
• 算术:执行基本算术——加、减、取模等。
• 按位:根据二进制表示修改操作数
• 逻辑:逻辑结构，如 AND 和 OR
• String :修改字符串(此类别只包含一个运算符)
• 杂项:不属于其他类别的剩余运营商的总括组

在本参考资料中，我们将依次介绍这些类别。

赋值运算符

JavaScript 赋值运算符用于根据右操作数的值给左操作数赋值，最简单的例子是基本赋值运算符=:

x = 1;
strLocation = "California";
boolSuccess = false;

JavaScript 还有其他几个赋值操作符，它们是其他操作的简写。这些简写操作符，在表 7-1 中列出，提供了一种编写更简洁代码的方法。

表 7-1。速记数学运算符

速记操作员	等效表达式
operand1 += operand2	operand1 = operand1 + operand2
operand1 -= operand2	operand1 = operand1 - operand2
operand1 *= operand2	operand1 = operand1 * operand2
operand1 /= operand2	operand1 = operand1 / operand2

例题

var num1 = 5,
num2 = 9;
num1 += num2; // num1 is now 13
num1 -= num2; // num1 (which was 13) is now 5 again
num1 *= num2; // num1 is now 45
num1 /= num2; // num1 is now 5 again

注意，如果两个操作数中有一个是字符串，那么速记操作符+=将执行字符串连接，而不是算术加法。如果另一个操作数不是字符串，它将首先被转换为字符串。有关详细信息，请参阅本章后面的“字符串运算符”。

JavaScript 还支持几种简写的二元运算符，在表 7-2 中列出。二元运算符通过修改组成它们的位来对它们的操作数进行运算。有关二元运算符的完整讨论，请参阅本章后面的“按位运算符”一节。

表 7-2。速记按位运算符

速记操作员	等效表达式
operand1 %= operand2	operand1 = operand1 % operand2
operand1 ^= operand2	operand1 = operand1 ^ operand2
operand1 <<= operand2	operand1 = operand1 << operand2
operand1 >>= operand2	operand1 = operand1 >> operand2
operand1 >>> operand2	operand1 = operand1 >>> operand2
operand1 &#124;= operand2	operand1 = operand1 &#124; operand2

例子

var num1 = 100,
    num2 = 50;
num1 %= num2; // num1 is now 0

比较运算符

比较运算符用于比较两个操作数。因为 JavaScript 是弱类型的，所以它有两种不同的比较:严格的和强制的。

在严格比较中，操作符比较操作数的值和它们的类型。如果两者都不匹配，比较返回false。例如，严格比较true === "true"的结果是false，因为true是一个布尔值，它与"true"是不同的类型，后者是一个字符串。

在强制比较中，操作符在比较它们的值之前将操作数转换为相同的类型。这种转换过程，被称为铸造或强制，遵循 ECMA-262 标准中定义的非常具体的算法，所以结果是完全可以预测的——只要你熟悉这些算法。如果你不是，结果可能是违反直觉的。例如:

if ("true") {
    alert("true" == true);  // will alert false
    alert("true" == false); // will alert false
}

这个例子将触发两个警报，它们将是false,即使它们周围的if语句必须计算为true,警报才会发生。

为了避免混淆，在编写 JavaScript 时尽可能使用严格的比较被认为是一种好的做法，当没有强制转换发生时，或者当强制转换发生但将产生已知的理想结果时，使用强制比较。例如，根据定义，对象上的toString()方法只返回一个字符串，因此，如果您正在与一个字符串文字进行比较，则没有必要进行严格的比较，因为转换永远不会发生:

// toString only ever returns a string, so no need for strict comparison with a string literal
if (myObject.toString() == "string literal") {
    // (do stuff)
}
// The variable testVar might change types, so a strict comparison is a good idea
if (myObject.toString() === testVar) {
    // (do stuff)
}

关于 JavaScript 使用的强制算法的细节，参见第一章。

严格比较

使用严格比较运算符时，JavaScript 会比较操作数的值和类型。两个严格比较运算符是严格相等运算符(===)，如果两个操作数的值和类型相等，则返回true，以及严格不等式运算符(!==)，如果两个操作数的类型或值不同，则返回true。

语法

operand1 === operand2
operand1 !== operand2

例题

var boolOperand1 = true,
    boolOperand2 = false,
    intOperand1 = 1,
    intOperand2 = 2,
    strOperand1 = "1",
    strOperand2 = "2";

alert(boolOperand1 === boolOperand2); // will alert false
alert(boolOperand1 !== boolOperand2); // will alert true
alert(intOperand1 !== intOperand2);   // will alert true
alert(intOperand1 === strOperand1);   // will alert false
alert(strOperand1 === strOperand2);   // will alert false

强制比较

当进行强制比较 s 时，JavaScript 首先将操作数转换为相同的数据类型，然后再比较它们的值(更多信息请参见表 7-3 )。关于 JavaScript 如何执行类型强制的细节，参见第一章。

表 7-3。强制比较运算符

操作	句法	返回
Equality	operand1 == operand2	true如果操作数的值相同。如果两个操作数都是对象，并且这两个对象引用内存中的同一个对象，那么这个操作符返回true。
不平等	operand1 != operand2	true如果操作数的值不相同。如果两个操作数都是对象，那么如果它们引用内存中不同的对象，这个操作符将返回true。
大于	operand1 > operand2	true如果operand1大于operand2。
不到	operand1 < operand2	true如果operand1小于operand2。
大于或等于	operand1 >= operand2	true如果operand1大于等于operand2。
小于或等于	operand1 <= operand2	true如果operand1小于或等于operand2。

例题

var strOperand1 = "1",
    intOperand1 = 1,
    boolOperand1 = true;
alert(strOperand1 == intOperand1);  // will alert true
alert(intOperand1 == boolOperand1); // will alert true
alert(strOperand1 == boolOperand1); // will alert true

算术运算符

JavaScript 有一组基本的算术运算符，在表 7-4 中列出，它们对操作数执行指定的算术运算。

表 7-4。算术运算符

操作	句法	返回
添加	operand1 + operand2	operand1和operand2之和。
减法	operand1 - operand2	operand1和operand2的区别。
增加	operand1 * operand2	运算 1 和运算 2 的乘积。
分开	operand1 / operand2	操作数 1 除以操作数 2 的商。
系数	operand1 % operand2	；返回operand1模operand2。
Increment by 1	operand1++(或++operand)	operand1++返回递增前operand1的值，而++operand1返回递增后operand1的值。
Decrement by 1	operand1--(或--operand)	operand1--返回operand1递减前的值，--operand1返回operand1递减后的值。
Negative value	- operand1	operand1的负值。operand1保持不变。
Positive value	+ operand1	operand1的正值。operand1保持不变。

请注意，JavaScript 中的所有算术运算符都将尝试对非数字操作数执行类型强制，这可能会产生非直观的结果。参见第一章了解更多关于 JavaScript 类型强制规则的信息。

例题

var intOperand1 = 1,
    intOperand2 = 2,
    boolOperand1 = true;
alert(intOperand1 + intOperand2);  // will alert 3
alert(intOperand1 + boolOperand1); // will alert 2
var testResult = intOperand1++;
alert(testResult);                 // will alert 1
alert(intOperand1);                // will alert 2
testResult = ++intOperand2;
alert(testResult);                 // will alert 3
alert(intOperand2);                // will alert 3

按位运算符

JavaScript 的按位操作符接受整数操作数，并基于它们的 32 位表示对它们执行操作。非整数操作数首先被强制(见第一章)。尽管按位运算符是在一个位级别上执行的，但它们返回的是整数。

关于二进制数的一点知识

JavaScript 的按位运算符，见表 7-5 ，都将其操作数转换为有符号的 32 位整数。一般来说，32 位整数的最高有效位可以在左边，从左到右递减；也可以在右边，从右到左递减。前者被称为大端记数法，后者被称为小端记数法。这些术语的起源是乔纳森·斯威夫特的小说格列佛游记，讲述了小人国(其居民在小端敲碎半熟鸡蛋)和布莱费斯克(其居民在大端敲碎半熟鸡蛋)这两个敌对王国之间持续紧张的故事。

表 7-5。按位运算符

操作	句法	细节
按位 AND	operand1 & operand2	比较两个操作数中的每个位位置，并返回通过在两个操作数都为 1 的每个位位置放置 1 而形成的新数字。
按位或	operand1 | operand2	比较两个操作数中的每个位位置，并返回一个新数，该新数是通过在任一操作数为 1 的每个位位置放置 1 而形成的。
按位异或	operand1 ^ operand2	比较两个操作数中的每个位位置，并返回一个新数字，该数字是通过在每个操作数(但不是两个操作数)都为 1 的位置放置 1 而形成的。
按位非	∼ operand1	返回通过反转operand1的位形成的新数字。
按位左移	operand1 << operand2	返回一个新数字，它是通过将operand1’s位向左移动operand2指定的位数而形成的，在右边补零。
按位符号传播右移	operand1 >> operand2	返回通过将operand1’的位向右移动operand2指定的位数而形成的新数字。移出的位会被丢弃而不是换行(从而保留符号位)。
按位零填充右移位	operand1 >>> operand2	返回通过将operand1的位向右移动operand2指定的位数而形成的新数字。被移出的位被丢弃。零从左边开始填充。

JavaScript 的 32 位整数是大端的，所以最大的位总是在左边，而二进制补码，意味着负数是它们的正值的逐位反转，加 1。

作为一个实际的例子，让我们将数字 5 转换成一个 JavaScript 二进制数。在二进制中，5 表示为 101。在大端格式中，最高有效位在左边。101 只有 3 位；要使它成为 32 位数字，我们必须用零填充它:

00000000000000000000000000000101

这是数字 5 的 32 位大端表示法。JavaScript 先将操作数转换成这种格式，然后再对它们执行任何位运算。

逐位运算在 JavaScript 中相当少见。一些有用的例子，见第四章。

逻辑运算符

JavaScript 有一组逻辑运算符，列在表 7-6 中，用于实现布尔逻辑。通常，这些语句与流控制语句结合使用。

表 7-6。逻辑运算符

操作	句法	返回
Logical AND	operand1 && operand2	true如果两个操作数都为真。
Logical OR	operand1 || operand2	true如果任一操作数为真。
Logical NOT	!operand1	如果操作数为真，则返回true。

例题

if (expression1 && expression2) {
    // Do something if both expression1 and expression2 are true
}
var boolFalse = !true;
alert(boolFalse); // will alert false
if (expression1 && !expression2) {
    // Do something if expression1 is true and expression2 is false
}

字符串运算符

JavaScript 有一个字符串操作符:连接操作符+。该运算符返回连接在一起的两个操作数。如果其中一个操作数不是字符串，它将被该运算符转换为字符串。

例子

var strString1 = "Hello",
    strString2 = "World";
alert(strString1 + " " + strString2); // will alert Hello World

杂项运算符

既然我们已经介绍了操作符的主要类别，我们还剩下一些不太合适但仍然很重要的操作符。这些操作符包括 JavaScript 中唯一的三元操作符——条件操作符，以及一些用于检查数据类型和操作对象及其属性的有用操作符。

条件运算符

条件运算符是 JavaScript 唯一的三元运算符。它提供了if / then / else语句的简写。

一些 JavaScript 风格指南建议避免条件操作符，支持显式的if / then / else语句，以使代码更具可读性。

语法

conditional ? trueOperand : falseOperand // If conditional is true, evaluate trueOperand, otherwise evaluate falseOperand

例子

(3 > 4) ? alert("Three is greater than four") : alert("Three is not greater than four"); // will alert Three is not greater than four.

逗号运算符

JavaScript 逗号运算符 ( ,)接受两个操作数。它计算两个操作数，并返回第二个操作数的值。逗号操作符最常见的两种用法是在一个var语句中定义多个变量，以及在for循环中提供多个参数。

语法

operand1, operand2

例题

// Initialize an array of integers
var myArray = [];
for (var i = 0, j = 100; i <= 100; i++, j--) {
    myArray[i] = j;
}

// Multiple variable declarations with one var statement.
var myVar = "one",
    numericVar = 1,
    booleanVar = true;

删除操作员

delete 运算符将对象属性作为操作数，并将其从父对象中删除。如果无法删除该属性，则返回false，否则返回true。

语法

delete myObject.myProperty;
delete myObject[myProperty];
delete myArray[index];

例题

var myObject = {
    "prop1" : 1,
    "prop2" : "two",
    "prop3" : true
};
alert(delete myObject.prop1);    // will alert true
alert(myObject.prop1);           // will alert undefined
alert(delete myObject["prop2"]); // will alert true
alert(myObject.prop2);           // will alert undefined

请注意，您不能删除像Math这样的预定义对象的属性(因此delete Math.PI将返回false，而不会删除属性)。

如果删除对象上被覆盖的属性，将恢复对象原型的原始属性。此外，虽然可以直接从原型中删除属性，但是不能从对象中删除从对象原型继承的属性。(关于对象及其原型的详细讨论，请参见第一章。)

如果按索引从数组中删除元素，数组的长度不会受到影响。被删除的属性将只是未定义:

var myArray = [0, 1, 2];
alert(delete myArray[1]); // will alert true
alert(myArray[1]);        // will alert undefined
alert(myArray.length);    // will alert 3

函数运算符

JavaScript function 运算符用于声明一个新的函数表达式。(关于函数、函数表达式和函数语句的深入讨论，参见第一章。)

语法

function identifier(param1, param2, ..., paramN) {
    // body
}

例子

var newFunctionExpression = function() {
    alert('This is my new function expression.');
}
newFunctionExpression(); // Will alert "This is my new function expression."

获取运算符

JavaScript get操作符 提供了访问对象内数据的接口。您可以使用它在对象上定义一个 getter 方法，该方法可以返回值或执行另一个方法。

语法

// Object literal notation
var myObject = {
    prop1: value,
    get prop1: function() {
        return this.prop1;
    }
}
// object notation
function myObject() {
    // Constructor.
}
myObject.prototype = {
    prop1: value,
    get prop1 : function() {
        return this.prop1;
    }
}

例子

var myObject = {
    "privateValue" : 10,
    "units" : "degrees",
    get angle () {
        return this.privateValue + " " + this.units;
    }
}
alert(myObject.angle); // will alert "10 degrees"

in 运算符

in操作符 接受两个操作数:一个目标对象和一个目标属性。如果目标属性在目标对象中，它返回true，否则返回false。

语法

targetProperty in targetObject;

例题

var myObject = {
    "prop1" :1,
    "prop2" : "two"
}
alert("prop1" in myObject); // will alert true
alert("two" in myObject);   // will alert false; there is no property named "two"

运算符的实例

instanceof操作符接受两个操作数:一个对象和一个构造函数。如果对象的原型链中有构造函数，则返回true，如果没有，则返回false。

语法

targetObject instanceof targetConstructor;

例子

// Everything in JavaScript is an Object--or maybe not.
var myArray = new Array();
var myBool = true;
alert(myArray instanceof Object);  // will alert true
alert(myBool instanceof Object);   // will alert false--primitives are not objects.
myBool = new Boolean(true);
alert(myBool instanceof Object);   // will alert true, because we constructed a new boolean object, not just a primitive.

在这个例子中，我们演示了原始值不是 JavaScript 中的对象，而数组和布尔对象是。

新操作员

new操作符将一个对象构造函数作为操作数。然后它创建一个新的空对象，其原型继承自操作数，将构造函数的上下文设置为空对象(因此在函数中关键字this将引用空对象)，然后调用函数。如果构造函数没有显式返回结果对象，那么new关键字会为你做，允许你根据需要创建和分配新的对象。这个语法类似于其他语言中实例化类的语法，但是不要忘记:JavaScript 没有类，而是有一个原型继承模型。关于 JavaScript 继承模型的细节，请参见第一章。

语法

var myNewObject = new objectConstructor;

例子

var myNewArray = new Array(); // Creates a new array object.
function myConstructor() {
    this.message = "hello world"
}
var myObject = new myConstructor();
alert(myObject.message);      // will alert "hello world"

集合运算符

set操作符 提供了一个改变对象中值的接口。将它与本章前面描述的get操作符进行比较。

语法

// Object literal notation
var myObject = {
    prop1: value,
    get prop1: function() {
        return this.prop1;
    },
    set prop1: function(newVal) {
        this.prop1 = newVal;
    }
}
// object notation
function myObject() {
    // Constructor.
}
myObject.prototype = {
    prop1: value,
    get prop1 : function() {
        return this.prop1;
    },
    set prop1 : function(newVal) {
        this.prop1 = newVal;
    }
}

例子

var myAngle = {
    "privateValue" : 10,
    "privateUnits" : "degrees",
    get angle() {
        return this.privateValue + " " + this.units;
    },
    set units(newVal) {
         // Allow the user to set the units to either degrees or radians
        if ((newVal !== "degrees") && (newVal !== "radians")) {
            alert("Allowed units are degrees and radians.");
        }
        if (newVal !== this.privateUnits) {
            this.privateUnits = newVal;
            if (newVal === "radians") {
                // Need to convert our value from degrees to radians
                this.privateValue = (this.privateValue * 0.01745);
            } else {
                // need to convert our value from radians to degrees
                this.privateValue = (this.privateValue * 57.3);
            }
        }
    }
}
alert(myAngle.angle); // will alert "10 degrees"
myAngle.units = "radians";
alert(myAngle.angle); // will alert "0.1745 radians"

在这个例子中，我们正在构建一个对象，当角度的单位改变时，它会自动转换角度的单位。这是一个很好的例子，说明在对象中使用 setter 不仅仅是设置内部值。您可以在这里做任何事情，包括触发自定义事件，甚至修改其他对象的属性。关于使用 getters 和 setters 进行高级操作的一个很好的例子，参见第四章。

运算符的类型

typeof 运算符返回操作数的数据类型。一个常见的误解是typeof操作符必须作为函数使用，并且它的操作数必须放在括号内。没这个必要。typeof运算符返回其操作数的数据类型。JavaScript 开发新手通常会将typeof误认为是一个函数，并将操作数用括号括起来。然而，括号只是用来将表达式组合成一条语句，因此对于单个操作数来说是不必要的。

语法

typeof operand;

例题

var myObject = new Object();
var myBoolean = true;
alert(typeof myObject);  // will alert Object
alert(typeof myBoolean); // will alert Boolean

无效运算符

void 运算符计算其操作数，然后返回undefined。

语法

void operand;

例子

alert(void 0);            // will alert "undefined"
alert(void(alert("hi"))); // Will alert "hi" first, then will alert "undefined"

摘要

在本章中，我们已经详细介绍了 JavaScript 的各种操作符:

• JavaScript 的大部分操作符都是一元或者二元的；唯一的例外是比较运算符，它是一个三元运算符。
• JavaScript 运算符包括按位运算符、赋值运算符、数学运算符、字符串运算符、比较运算符和逻辑运算符。
• 您可以使用get和set操作符来修改对象的属性。

在下一章中，我们将提供 DOM 的参考，包括window和document对象。

八、DOM 参考

如第三章所述，DOM 不是 JavaScript，也不是 ECMA-262 标准的一部分。相反，DOM 是由 W3C 跨多个规范指定的。然而，您将使用 JavaScript 做的许多事情都将涉及 DOM，因此了解它是很重要的。

我们已经在第三章中介绍了 DOM 的重要方面，包括:

• DOM 的历史和组成它的不同规范
• 访问 DOM 中的元素
• 创建、删除和修改 DOM 中的元素
• DOM 事件:处理程序、自定义事件等。

这一章提供了第三章第一节所涉及的主题的参考，以及我们在第三章第三节没有涉及到的 DOM 的其他一些共同特性。因为 DOM 规范相当大，所以本章不会详尽无遗。相反，我们将关注最常用的特性。我们还将讨论那些提供非常有用的功能但可能不常用的特性，或者是因为它们是新的，或者是因为它们不经常在参考资料中涉及。

浏览器支持

正如在第三章中提到的，DOM 在不同的浏览器和不同版本的浏览器之间有不同的支持。本参考假定了所谓的“现代”浏览器:Internet Explorer 9 和更高版本，以及最新版本的自动更新浏览器，如 Safari、Firefox 和 Chrome。如果某个特性在这些目标浏览器中有支持问题，我们会提到它。如果您的项目需要面向较旧的浏览器，您应该确保您想要使用的功能在您的目标浏览器中受支持。确保这一点的一个很好的参考是 QuirksMode.org 网站上的兼容性表:DOM 特性包含在www.quirksmode.org/dom/w3c_core.html中，DOM 事件包含在www.quirksmode.org/dom/events中。

DOM 对象

使用 DOM 最常见的工作是访问和操作文档及其元素。在本参考中，我们将重点关注与这些任务最相关的 DOM 对象:

• window:window对象模拟浏览器窗口本身，在那里加载文档。它包括属性和方法来处理滚动窗口、定位浏览器等。
• document:对象document对文档进行建模。它具有访问和修改文档内容的属性和方法。
• element:element对象是一个抽象对象(意味着它不是你可以直接访问的东西，像window或document，而是作为一个模板，其他对象从它那里继承而来)，它定义了文档中包含的元素所公开的属性和方法。当您使用 DOM 元素时，element的所有属性和方法都将在它们上面可用。

我们将按照前面的顺序(而不是按照字母顺序，就像我们在《??》第五章的参考资料中对主要 JavaScript 对象所做的那样)来介绍这些对象，因为它代表了容器的进展:window对象包含document对象，document对象包含element对象。

窗口对象引用

window对象是 DOM 树的顶端，代表加载到浏览器中的文档。通常情况下，浏览器中一次只能加载一个文档，但是通过使用 iframes 可以加载多个文档。由于每个文档都需要自己的window对象，默认情况下window对象是一个类似数组的对象:主对象代表主文档，索引条目代表 iframes 中加载的子文档，而length属性代表子文档的数量。因此，如果只有主文档而没有子文档，window.length属性将为 0。每个 iframe 都有自己的window对象，如果一个给定的 iframe 中有子文档，那么它也会有索引元素，子文档的数量也在它的length属性中表示。

子文档可以通过它们的索引来访问；它们的顺序与在文档中出现的顺序相同。通过window.parent属性，子文档中的脚本可以访问其父文档。因此，加载到浏览器中的文档中的任何脚本都可以访问加载到浏览器中的任何其他文档。出于安全原因，这种访问受到单一来源策略的限制。

注意单一来源策略是浏览器中的一项安全功能，旨在防止恶意脚本访问它们不应该访问的内容。该策略基本上是说，从特定站点提供的脚本只能访问从同一站点提供的文档。更具体地说，这两个文档必须使用相同的协议(HTTP 或 HTTPS)和端口(如果指定了的话)从相同的主机提供。如果其中任何一个不同，则不允许文档之间的访问。

window对象也作为 JavaScript 的全局上下文。因此，每个文档都有自己的全局上下文。因为window对象是全局上下文，所以不需要在它的任何属性或方法前面加上window。标识符。例如，要访问location属性，您可以简单地使用location而不是window.location。然而，有些属性和方法是通过window访问的。为了清楚起见的标识符。(有关在全局范围内创建和管理自己的属性和方法的详细信息，请参见第二章。)在本节中，我们将明确使用window。参考文献。

性能

除了作为 JavaScript 的全局上下文之外，window对象还有自己的属性，可以通过脚本访问。这些属性代表了浏览器窗口和其中加载的文档的各个方面:文档的 URL、窗口的几何形状等。

窗口.文档

window.document属性是对已经载入浏览器窗口的 HTML 文档的引用。(请参阅本章后面的“文档对象引用”一节。)对象document是传统上不使用window引用的属性之一。标识符。

句法

document.propertyName;
document.method();

窗口.框架

window.frames属性只是对window对象本身的引用，并提供了一种显式访问加载到主文档中的不同子文档(如果有的话)的方法。该属性是 HTML 早期版本的延续，早期版本支持使用框架集在单个窗口中加载多个文档，现在不再支持该功能。注意，因为window.frames只是引用window、window === window.frames和window[3] === window.frames[3]，如果子文档存在的话。

句法

window.frames[intIndex];

窗口.历史

window.history属性是对History对象的引用，该对象由浏览器公开以提供对会话历史的访问。它基本上是一个已经访问过的页面的模型，以及一些操作它们的有用方法。

性能

History对象有一个属性length。

长度

length属性指的是历史的长度——已经载入窗口的页数。加载了单个文档的新窗口(或标签)的window.history.length为 1。

句法

var myLength = window.history.length;

方法

History对象有三种方法来浏览浏览器历史。

后退( )

back()方法在浏览器历史中向后移动一个条目。如果您已经在历史记录的开头，调用此方法没有任何作用。调用此方法相当于单击浏览器的后退按钮。

句法

window.history.back();

向前( )

forward()方法在浏览器历史中向前移动一个条目。如果你已经在浏览器历史的末尾，这个方法什么也不做。调用此方法相当于单击浏览器的前进按钮。

句法

window.history.forward();

去( )

go()方法按照指定的条目数遍历浏览器历史。正数在历史中向前移动(相当于单击浏览器的前进按钮)，负数向后移动(相当于单击浏览器的后退按钮)。

句法

window.history.go(intDelta);

例子

var myHist = window.history; // Get a reference to the history object--saves a bit of typing.
myHist.back();    // goes back 1 entry in the history.
myHist.go(-3);    // goes back 3 more entries in history.
myHist.forward(); // goes forward 1 entry in history.
myHist.go(3);     // returns to the most recent page.

窗口.innerHeight

window.innerHeight属性包含浏览器的实际渲染视口的高度，以像素为单位。该值包括水平滚动条(如果有)。(对比window.outerHeight和window.innerWidth。)此属性是只读的；如果你想改变窗口的高度，使用window.resizeBy()和window.resizeTo()方法。

句法

var currentHeight = window.innerHeight;

例子

<!DOCTYPE html>
<html>
        <head>
        <title>JavaScript Programmer's Reference</title>
        <style>
#centerme {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ccc;
}
        </style>
    </head>
    <body>
        <div id="centerme"></div>
        <script>
var centerMe = document.getElementById("centerme");
// Center vertically
var newPos = (window.innerHeight - 100) / 2;
centerMe.style.top = newPos + "px";
        </script>
    </body>
</html>

本示例创建一个宽 100 像素、高 100 像素的灰色框，并将其垂直居中显示在屏幕上。

窗口.内宽

window.innerWidth属性包含浏览器的实际渲染视口的宽度，以像素为单位。该值将包括垂直滚动条(如果存在)。(对比window.outerWidth和window.innerHeight。)此属性是只读的；如果你想改变窗口的宽度，使用window.resizeBy()和window.resizeTo()方法。

句法

var currentWidth = window.innerWidth;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
        <style>
#centerme {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ccc;
}
        </style>
    </head>
    <body>
        <div id="centerme"></div>
        <script>
var centerMe = document.getElementById("centerme");
// Center horizontally
var newPos = (window.innerWidth - 100) / 2;
centerMe.style.left = newPos + "px";
        </script>
    </body>
</html>

本示例创建一个宽 100 像素、高 100 像素的灰色框，并将其水平居中显示在屏幕上。

窗口.长度

属性返回通过 iframes 加载的子文档的数量。如果没有子文档，该属性将为 0。

句法

var numberOfSubdocuments = window.length;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <iframe name="frame1"></iframe>
        <iframe name="frame2"></iframe>
        <iframe name="frame3"></iframe>
        <script>
alert(window.length); // will alert 3
        </script>
    </body>
</html>

在这个例子中，我们创建了三个 iframes，将window.length设置为 3。

窗口.位置

属性提供了一个代表被加载文档的 URL 的对象。一个Location对象具有以下属性::

• hash:URL 中跟在#后面的部分，如果有的话。包括了#。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其hash为"#anchor"。
• host:URL 的主机部分，包括端口号(如果指定)。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其host为“www.example.com:8080”。
• hostname:不含端口号的 URL 的主机部分。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其hostname为“www.example.com”。
• href:完整的网址。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其href为“http://www.example.com:8080/subdirectory/index.html?prop=value#anchor”。
• origin:协议，主机，端口。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其origin为“http://www.example.com:8080”。
• pathname:相对于主机的路径。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其pathname就是"/subdirectory/index.html"。
• port:URL 的端口，如果指定的话。如果没有指定端口，这个属性就是""。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，这个port就是"8080"。
• protocol:使用的传输协议。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，其protocol就是"http:"。
• search:URL 中第一个?后面的部分，如果有的话。包括问号。例如，对于网址http://www.example.com:8080/subdirectory/index.html?prop=value#anchor，这个search就是"?prop=value"。

一个Location对象有以下方法:

• assign(targetURL):将targetURL加载到浏览器中。
• reload(boolIgnoreCache):重新加载当前网址。如果boolIgnoreCache为真，浏览器从服务器重新加载文档；否则，如果合适，它可以从其缓存中重新加载文档。
• replace(targetURL):从浏览器历史中删除当前文档的条目，并替换为targetURL。也将targetURL载入浏览器。有关处理浏览器历史的更多信息，请参见上文的window.history。
• toString():以简单字符串的形式返回完整的 URL。

句法

var currentLocation = window.location;

个别属性:

var currHash = currentLocation.hash;
var currHost = currentLocation.host;
var currHostname = currentLocation.hostname;
etc.

个别方法:

currentLocation.reload(true);                    // Reloads the current document, bypassing the cache.
currentLocation.assign("http://www.google.com"); // Loads the Google front page.
etc.

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
var currentLocation = window.location;
alert(currentLocation.toString()); // Will alert the URL of this page.
        </script>
    </body>
</html>

本示例在文档加载后立即提示文档的 URL。

窗口.本地存储

属性为现代浏览器中的本地存储特性(也称为“DOM 存储”)提供了一个接口。作为 HTML5 的一部分，本地存储特性提供了一种替代 cookies 的方法，以键/值对的形式在浏览器中存储任意数据。(关于 cookies 的详细信息，请参见document.cookie。)本地存储跨浏览器会话持续存在，这意味着用户可以关闭他们的 web 浏览器，甚至重启他们的计算机，并且数据将持续存在。访问受到同源策略的限制，就像 cookies 一样；来自一个来源的脚本将不能访问由来自另一个来源的脚本存储的数据。

localStorage接口提供了三种访问本地存储器的方法:

• localStorage.getItem(key):返回之前用key存储的值。如果没有存储这样的值，这个方法返回null。
• localStorage.removeItem(key):从本地存储中删除key指定的键/值对。
• localStorage.setItem(key, value):将数据值保存在key下，以备日后检索。
• localStorage.clear():清除本地存储中的所有键/值对。

注意本地存储只能存储字符串；它不能存储数组或对象之类的东西。但是，您可以首先使用JSON.stringify()将这些项转换成 JSON 字符串，然后将结果字符串存储在本地存储中。当您稍后检索该字符串时，您可以使用JSON.parse()来重组该项。关于JSON.stringify()和JSON.parse()的详细信息，请参见第五章。

还要注意，即使您在应用中使用本地存储，也不能保证您的数据以后会在那里。大多数现代浏览器实现某种形式的“私人浏览”，其中每个会话开始时没有数据，在会话结束时，包括本地存储在内的所有数据都被擦除。用户也可以手动清除他们的本地存储。因此，如果您计划在应用中使用本地存储，那么您应该在编码时考虑到这一点。

句法

var storedValue = localStorage.getItem(key);
localStorage.removeItem(key);
localStorage.setItem(key, valueToStore);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script>
// Check to see if we've visited this page before.
var myValue = localStorage.getItem("test");
if (myValue == null) {
    alert('This is your first time here!');
    localStorage.setItem("test", "true");
} else {
    alert('You have been here before!');
}
        </script>
    </body>
</html>

在这个例子中，我们检查一个特定的键是否被用来在本地存储中存储一个值。如果没有值，我们假设用户还没有访问过网站，并使用那个键存储一个值。如果存储了值，我们假设用户已经访问了该站点。按如下方式测试此示例:

1. 正常加载。它会提醒“这是你第一次来这里！”
2. 单击重新加载按钮。它会提醒“你以前来过这里！”
3. 如果您的浏览器支持选项卡式浏览，请打开一个新的选项卡并再次加载该示例。它会提醒“你以前来过这里！”
4. 关闭并重启浏览器。重新加载这个例子，它会提示“你以前来过这里！”

如果您的浏览器支持，请在隐私浏览模式下再次执行这些测试。每次关闭浏览器并重新打开时，您应该会看到该值已被删除。

有关使用本地存储的示例，请参见第四章。

开窗器

如果这个窗口是由使用window.open()方法的脚本打开的，window.opener属性将包含一个对包含该脚本的窗口的引用。如果这个窗口是由用户手动打开的(例如，通过启动浏览器，或者打开一个新的标签)，那么这个属性将是null。

句法

var myOpener = window.opener;

窗口.外部高度

window.outerHeight属性包含浏览器的总高度，包括所有 chrome、工具栏等。，以像素为单位。(对比window.outerWidth和window.innerHeight。)该值是只读的；如果你想改变浏览器的尺寸，使用window.resizeBy()和window.resizeTo()方法。

句法

var totalHeight = window.outerHeight;

窗口.外宽度

window.outerWidth属性包含浏览器的总宽度，包括所有 chrome、工具栏等。，以像素为单位。(对比window.outerHeight和window.innerWidth。)该值是只读的；如果你想改变浏览器的尺寸，使用window.resizeBy()和window.resizeTo()方法。

句法

var totalWidth = window.outerWidth;

window.pageXOffset

window.pageXOffset属性包含文档水平滚动的像素数的值。(对比window.pageYOffset。)该值是只读的；如果你想滚动文档，使用window.scroll()、window.scrollBy()、window.scrollByLines()、window.scrollByPages()和window.scrollTo()方法。

注意window.pageXOffset和window.scrollX属性引用同一个值。pageXOffset属性早于scrollX，但是大多数浏览器都实现了这两个属性……除了 Internet Explorer。在版本 9 之前，Internet Explorer 不提供任何属性，而是提供了document.body.scrollLeft属性。

句法

var horizScroll = window.pageXOffset;

window.pageYOffset

window.pageYOffset属性包含文档垂直滚动的像素数的值。(对比window.pageXOffset。)该值是只读的；如果你想滚动文档，使用window.scroll()、window.scrollBy()、window.scrollByLines()、window.scrollByPages()和window.scrollTo()方法。

注意window.pageYOffset和window.scrollY属性引用同一个值。pageYOffset属性早于scrollY，但是大多数浏览器都实现了这两个属性……除了 Internet Explorer。在版本 9 之前，Internet Explorer 不提供任何属性，而是提供了document.body.scrollTop属性。

句法

var vertScroll = window.pageYOffset;

windows . parent

如果这个窗口是一个 iframe，window.parent属性将包含一个对包含它的窗口的引用。否则就是null。

句法

var myParent = window.parent;

window.scrollX

window.scrollX属性包含文档水平滚动的像素数的值。(对比window.scrollY和window.pageXOffset。)该值是只读的；如果你想滚动文档，使用window.scroll()、window.scrollBy()、window.scrollByLines()、window.scrollByPages()和window.scrollTo()方法。

注意window.pageXOffset和window.scrollX属性引用同一个值。pageXOffset属性早于scrollX，但是大多数浏览器都实现了这两个属性……除了 Internet Explorer。在版本 9 之前，Internet Explorer 不提供任何属性，而是提供了document.body.scrollLeft属性。

句法

var horizScroll = window.scrollX;

window.scrollY

window.scrollY属性包含文档垂直滚动的像素数的值。(对比window.scrollX。)该值是只读的；如果你想滚动文档，使用window.scroll()、window.scrollBy()、window.scrollByLines()、window.scrollByPages()和window.scrollTo()方法。

注意window.pageYOffset和window.scrollY属性引用同一个值。pageYOffset属性早于scrollY，但是大多数浏览器都实现了这两个属性……除了 Internet Explorer。在版本 9 之前，Internet Explorer 不提供任何属性，而是提供了document.body.scrollTop属性。

句法

var vertScroll  = window.scrollY;

window.sessionStorage 存储

会话存储功能类似于本地存储功能，只是使用会话存储存储的数据会在会话结束时丢失。像本地存储一样，对会话存储数据的访问受单一来源策略的限制，并且像本地存储一样，会话存储只能存储字符串。参见本章前面的window.localStorage，了解更多细节和示例。

句法

var storedValue = sessionStorage.getItem(key);
sessionStorage.removeItem(key);
sessionStorage.setItem(key, valueToStore);
sessionStorage.clear();

window.top

在嵌套 iframe 的情况下，window.top属性提供了对最顶层窗口的引用，该窗口是所有 iframe 的父窗口。在最上面的窗口中，或者在没有子文档的窗口中，这将是对window对象本身的引用。

句法

var myTopWindow = window.top;

方法

window对象有几个重要的方法，可以用来设置定时器，与用户通信，滚动文档，甚至移动浏览器窗口。

window.addEventListener()

window.addEventListener()方法允许您向window对象本身添加事件监听器。否则，该方法的行为与element.addEventListener()相同。有关详细信息和示例，请参见该条目。

句法

window.addEventListener(strEventType, eventHandler, boolCapture);

window.alert()

方法打开一个包含指定文本的警告弹出对话框。注意，这是一种经常在没有window.标识符的情况下被访问的方法。

句法

alert(strMessage);

例子

alert("We've been using alerts throughout the book.");

window.clearTimeout()

window.clearTimeout()方法将一个定时器 ID 作为参数，并清除该 ID 指定的超时:也就是说，它在不执行其功能的情况下将其移除。ID 是用window.setTimeout()方法或window.setInterval()方法创建定时器时返回的值。(详见window.setTimeout()和window.setInterval()方法条目。)

句法

window.clearTimeout(timeoutID);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
// Set a timeout that will result in an alert after a 5 second delay
var myID = setTimeout(function() {
    alert('Five seconds has passed!');
}, 5000);

// Clear the timeout so it will never execute.
clearTimeout(myID);
        </script>
    </body>
</html>

本示例设置了一个计时器，该计时器会在 5 秒钟的延迟后发出警报，然后清除计时器，使警报永远不会发生。为了验证，注释掉clearTimeout()调用并重新运行脚本。延迟之后，警报就会发生。

window.close()

方法关闭窗口。只能关闭用window.open()方法打开的窗口。

句法

var windowRef = window.open(strURL);
windowRef.close();

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <p id="opener">Click here to open a search window.</p>
        <p id="closer">Click here to close the search window.</p>
        <script>
var opener = document.getElementById("opener"),
    closer = document.getElementById("closer"),
    windowRef = false;

opener.addEventListener("click", function() {
    // If the search window isn't open, we should open it.
    // If the search window is open, we should let the user know.
    if (windowRef === false) {
        windowRef = window.open("http://www.google.com");
    } else {
        alert("The search window is already open.");
    }
});

closer.addEventListener("click", function() {
    // If the search window is open, we should close it.
    // If the search window isn't open, we should let the user know.
    if (windowRef !== false) {
        windowRef.close();
        windowRef = false;
    } else {
        alert("The search window isn't open.")
    }
})
        </script>
    </body>
</html>

在这个例子中，我们首先获得对这两段的引用。对于 opener 引用，我们添加了一个 click 事件处理程序，如果一个搜索窗口尚未打开，它将打开该窗口，并将对该窗口的引用存储在一个变量中。如果已经打开了一个，我们会提醒用户。对于更接近的引用，我们添加了一个 click 事件处理程序，如果搜索窗口打开，它将关闭搜索窗口，并将引用变量设置回false。如果搜索窗口没有打开，我们会提醒用户。

window.confirm()

window.confirm()方法打开一个确认弹出对话框，其中包含作为参数指定的文本。确认弹出对话框有一个“确定”按钮和一个“取消”按钮；当用户点击确定时，该方法返回true，当用户点击取消时，该方法返回false。

句法

var returnVal = confirm(message);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <p id="opener">Click here to open a search window.</p>
        <p id="closer">Click here to close the search window.</p>
        <script>
var opener = document.getElementById("opener"),
    closer = document.getElementById("closer"),
    windowRef = false;

opener.addEventListener("click", function() {
    // If the search window isn't open, we should open it.
    // If the search window is open, we should let the user know.
    if (windowRef === false) {
        windowRef = window.open("http://www.google.com");
    } else {
        var returnVal = confirm("The search window is already open. Would you like to close it?");
        if (returnVal === true) {
            windowRef.close();
            windowRef = false;
        }
    }
}, false);

closer.addEventListener("click", function() {
    // If the search window is open, we should close it.
    // If the search window isn't open, we should let the user know.
    if (windowRef !== false) {
        windowRef.close();
        windowRef = false;
    } else {
        var returnVal = confirm("The search window isn't open. Would you like to open it?");
        if (returnVal === true) {
            windowRef = window.open("http://www.google.com");
        }
    }
}, false);
        </script>
    </body>
</html>

这个例子扩展了我们之前的例子:在错误条件下，我们不使用警告来与用户交流，而是使用一个confirm对话框来询问用户他们想做什么。

window . get computer style()

当提供了元素引用(必需的)和可选的伪元素时，window.getComputedStyle()方法返回实际用于显示元素的样式。返回值是一个只读的Style对象，其格式与元素的style属性相同:元素上设置的每个 CSS 属性在对象中都有一个对应的属性。

句法

var appliedStyles = window.getComputedStyle(targetElement, pseudo);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
        <style>
.styledElement {
    background-color: #ccccff;
    border: 1px solid #000000;
    color: #0000FF;
}
#testElement {
    border-width: 50px;
    color: #00FF00;
}
p#testElement {
    border-width: 5px;
}
        </style>
    </head>
    <body>
        <p id="testElement" class="styledElement" style="border=color: #FF0000;">This is a test paragraph.</p>
        <script>
var myTarget = document.getElementById("testElement"),
    appliedStyles = window.getComputedStyle(myTarget);

alert(appliedStyles.backgroundColor); // Will alert something like "rgb(204, 204, 255)"
alert(appliedStyles.borderWidth);     // Will alert 5
alert(appliedStyles.color);           // Will alert something like "rgb(0, 255, 0)"
alert(appliedStyles.margin);          // Will alert something like "16px 0px"
alert(appliedStyles.padding);         // Will alert something like "0px"
        </script>
    </body>
</html>

在这个例子中，我们使用样式表和内联样式中的规则来应用一些样式。注意，我们可以检查我们在元素上设置的样式和默认样式:我们没有在元素上设置边距或填充，但是它们存在于appliedStyles对象中。(具体应用什么样的边距和填充因浏览器而异，因为每个浏览器都有自己的默认样式表；在 Chrome 中，边距为 16px 0px，填充为 0px。)

请注意，不同的浏览器实际警告的内容可能有所不同。例如，在一些浏览器中，颜色被警告为 RGB 值；在其他情况下，它们以十六进制值发出警报。值是正确的，只是格式不同。此外，一些浏览器试图尽可能提供简写值。当尝试比较样式值时，这可能会有问题—如果您期望颜色的 RGB 值字符串，但却获得了十六进制字符串，那么这可能会导致比较失败。

window.open()

window.open()方法打开一个带有指定参数的窗口。在实现选项卡式浏览的浏览器中，没有设置功能的新窗口将作为新选项卡打开。设置功能字符串通常会强制浏览器将窗口作为独立窗口打开，而不是作为新选项卡打开，尽管用户也可以覆盖这种行为，并指定所有新窗口都作为选项卡打开。

window.open()方法的有效参数如下:

• url:要在新窗口中显示的所需文档的 URL。
• strName:窗口的名称(可选)。这并不指定窗口的标题——它是由加载到新窗口中的文档的<title>标签指定的。这个名字可以作为使用target属性的链接和表单的目标。
• strFeatures:以feature=value对的形式的所需窗口特性的逗号分隔列表。可用功能及其实现因浏览器而异，但最常见的如下:
• left:新窗口在用户工作区的左侧位置，相对于显示器的左边缘。有效值是整数；许多浏览器只允许正整数。
• top:新窗口在用户工作区的顶部位置，相对于监视器的上边缘。有效值是整数；许多浏览器只允许正整数。
• height:内容窗口的期望高度，以像素为单位；相当于window.innerHeight。有效值是整数；最小值是 100。
• width:内容窗口的期望宽度，以像素为单位；相当于window.innerWidth。有效值是整数；最小值是 100。
• menubar:当设置为yes时，使新窗口呈现其菜单栏(菜单栏包含文件、编辑、查看等)。浏览器的菜单)。如果您使用一个特性参数并且没有设置该属性，它将被设置为no，并且菜单栏将不显示。有效值为yes或no。
• toolbar:当设置为yes时，使新窗口呈现其工具栏(工具栏包含后退、前进、重新加载、停止等)。按钮)。如果您使用一个特征参数并且没有设置该属性，它将被设置为no，并且工具栏将不显示。有效值为yes或no。
• location:当设置为yes时，使新窗口呈现其地址栏(地址栏包含 URL 输入字段)。如果您使用一个特性参数并且没有设置该属性，它将被设置为no，并且地址栏不会显示。有效值为yes或no。
• status:当设置为yes时，使新窗口呈现其状态栏(浏览器窗口底部的栏)。如果您使用一个特征参数并且没有设置该属性，它将被设置为no，并且状态栏将不会显示。有效值为yes或no。
• resizable:如果设置为yes，将允许用户调整新窗口的大小。如果您使用 features 参数并且没有指定 resizable 属性，它将被设置为no，并且窗口将不可调整大小。为了良好的可用性，您应该始终将该值指定为yes。有效值为yes或no。
• scrollbars:如果设置为yes，当内容对于指定区域来说太大时，允许新窗口显示水平和垂直滚动条。如果你使用一个特性参数并且没有指定scrollbars属性，它将被设置为no，滚动条将不会被添加到窗口中，用户无法滚动内容。为了良好的可用性，您应该始终将该值指定为yes。有效值为yes或no。

方法返回一个被打开的窗口的引用。

在 DOM 中的所有方法中，window.open()可能是被恶意的垃圾邮件制造者和粗心的程序员滥用最多的方法之一。因此，许多浏览器现在允许用户覆盖指定的设置，甚至通过使用弹出窗口阻止参数和插件来完全禁止其使用。如果浏览器的内部阻塞参数阻止了弹出窗口，那么该方法将返回null而不是窗口引用。如果弹出窗口被插件阻止，通常你将无法辨别(这就是为什么许多依赖弹出窗口的应用建议用户禁用弹出窗口阻止程序)。

由于这些限制，如果您想在应用中使用弹出窗口，您应该仔细测试，以确保使用弹出窗口拦截器的用户不会被拒绝访问应用的重要区域。

句法

var strFeatures = "left=0,right=0,scrollbars=true,resizable=true";
var windowRef = window.open(URL, strName, strFeatures);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <p id="opener">Click here to open a search window.</p>
        <p id="closer">Click here to close the search window.</p>
        <script>
var opener = document.getElementById("opener"),
    closer = document.getElementById("closer"),
    windowRef = false;

opener.addEventListener("click", function() {
    // If the search window isn't open, we should open it.
    // If the search window is open, we should let the user know.
    if (windowRef === false) {
        windowRef = window.open("http://www.google.com", "searchwindow", "left=0,top=0,resizable=true,scrollbars=true");
    } else {
        var returnVal = confirm("The search window is already open. Would you like to close it?");
        if (returnVal === true) {
            windowRef.close();
            windowRef = false;
        }
    }
}, false);

closer.addEventListener("click", function() {
    // If the search window is open, we should close it.
    // If the search window isn't open, we should let the user know.
    if (windowRef !== false) {
        windowRef.close();
        windowRef = false;
    } else {
        var returnVal = confirm("The search window isn't open. Would you like to open it?");
        if (returnVal === true) {
            windowRef = window.open("http://www.google.com");
        }
    }
}, false);
        </script>
    </body>
</html>

这个例子通过为新窗口指定一个窗口名和一些特性来扩展我们前面的例子。如果您的浏览器实现了选项卡式浏览，那么上一版本的示例可能会以选项卡的形式打开新窗口。在此版本的示例中，设置这些功能应该会导致您的浏览器将搜索窗口作为独立窗口打开。我们指定的特性应该使窗口在屏幕的左上角打开，并且可以调整大小和有滚动条。由于我们没有指定menubar、toolbar、location或status特性，这些特性应该默认为no而不显示，但浏览器是否会接受这一点取决于您使用的浏览器以及该浏览器的设置。(在我们的 Chrome 版本中，新窗口作为独立窗口打开，但指定的位置不被认可，而是显示地址栏；在我们的 Firefox 版本中，窗口在期望的位置打开，地址栏和状态栏都显示出来。)尝试在不同的浏览器中用不同的设置打开这个例子，看看它的行为是如何变化的。

window.postMessage()

Post Message 特性是 HTML5 的新增特性，它提供了一种安全的方式将字符串从一个帧发送到另一个帧，即使单个源策略禁止在相关帧之间直接访问。当您调用postMessage()方法时，它将在目标窗口中调度一个message事件，将您指定的字符串作为结果Event对象的data属性。接收 iframe 需要加载一个文档来实现message事件的事件监听器，然后它可以接收Event对象并读取消息。

当您调用postMessage()方法时，您不仅要指定想要发送的字符串，还要指定作为 URL 加载到 iframe 中的文档的来源。如果加载到 iframe 中的文档来自不同的来源，则不会调度该事件。这种安全特性使您能够确保只有来自您想要的源的文档才能接收您的消息。您可以选择将消息发送到所有域(就像我们在下一个例子中使用星号"*"所做的那样)，但是这样做会在您的应用中留下一个安全漏洞，恶意站点可以通过侦听message事件来利用这个漏洞。

在接收窗口中，事件处理程序接收一个Event对象，该对象具有包含消息的data属性。它还有一个source属性，包含发送消息的文档的来源。您应该经常检查source以确保您收到的消息来自预期的来源。如果来源不匹配，您可以丢弃该消息。这样可以防止恶意站点将潜在的有害数据注入您的站点。

根据 DOM 标准，消息可以是任何内容，一些浏览器的最新版本将允许发送对象。大多数浏览器只支持发送字符串。即便如此，您可以首先用JSON.stringify()方法序列化对象和数组以及其他东西，然后在接收端用JSON.parse()重新组合它们。

Post Message 特性是 HTML5 的新特性，但在现代浏览器中享有广泛的支持。然而，在 Internet Explorer 中，Post Message 只能在 iframes 之间工作，而不能在用window.open()方法打开的窗口中工作。

句法

在发送窗口中:

windowRef.postMessage(strMessage, targetOrigin);

在接收窗口中:

function handleMessage(event) {
    // Check event.source to make sure it comes from the desired origin
    // The message is in event.data
}
window.addEventListener("message", handleMessage, false);

为了创建一个例子，我们需要两个页面，我们称之为主页面和目标页面。主页将包含一个加载目标页面的 iframe。

主页

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <iframe src="target-page.html" id="targetFrame"></iframe>
        <p id="clickme">Click to send a message to the iframe.</p>
        <script>
var strMessage = "Hello, main window here, are you receiving?",
    clickme = document.getElementById("clickme"),
    targetFrame = document.getElementById("targetFrame");

clickme.addEventListener("click", function() {
    targetFrame.contentWindow.postMessage(strMessage, "*");
})

function handleMessage(event) {
    var strAlert = "Main Window:\n";
    strAlert += event.data;
    alert(strAlert);
}
window.addEventListener("message", handleMessage, false);
        </script>
    </body>
</html>

目标页面

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Target iframe</h1>
        <script>
function handleMessage(event) {
    var strAlert = "Target iframe:\n";
    strAlert += event.data;
    alert(strAlert);
    window.top.postMessage("Hello, target iframe here, I received your message.", "*");
}
window.addEventListener("message", handleMessage, false);
        </script>
    </body>
</html>

要运行这个示例，用任何名称保存主页面，然后用名称target-page.html将目标页面保存在同一个目录中。当您将第一页加载到浏览器中时，它将加载 iframe 中的第二页。

两个文档都将message事件处理程序绑定到它们的window对象，并且都通过警告消息来处理消息。

当你点击文本向 iframe 发送消息时，脚本将使用postMessage()发送消息“你好，这里是主窗口，你收到了吗？”iframe 将接收消息，并使用它的handleMessage()事件处理程序处理它，这将提醒我们刚刚发送的消息。然后，目标页面将通过window.top引用向主页面发回一条消息(详见上文window.top)。主页面将处理产生的message事件并给出警告消息。

注意，在这个例子中，我们没有在对postMessage()的调用中指定目标源，也没有在事件处理程序中检查源源。我们这样做是因为这是一个测试案例，我们不知道您将如何运行这些示例。您应该始终指定目标来源，并检查将发布到野外的任何脚本中的来源来源—这对于安全性非常重要。事实上，我们鼓励您修改这些脚本，以便它们指定目标源，并根据您的特定环境检查源源。此外，尝试将它们设置为不同的值，亲自验证这些示例的行为是否符合预期。

window.print()

window.print()方法打开浏览器的打印对话框，就像用户从菜单中选择了文件打印一样。出于安全原因，您不能从 JavaScript 访问打印对话框的任何功能，包括关闭打开的打印对话框。

句法

window.print();

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
            <script>
window.print();
            </script>
    </body>
</html>

当您加载这个示例时，它将打开浏览器的打印对话框，让您有机会打印页面。

window.prompt()

window.prompt()方法打开一个提示对话框，它将显示一个指定的字符串，并为用户提供一个文本输入字段。提示对话框有两个按钮，确定和取消。单击 OK 将关闭对话框，并使该方法返回用户在文本输入字段中输入的任何内容。单击 Cancel 将关闭对话框，并使该方法返回null。

句法

var strReturnValue = prompt(strMessage);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1></h1>
        <script>
var header = document.querySelector("h1"),
    userName = prompt("Hey there, what's your name?");

if ((userName !== null) && (userName !== "")) {
    header.innerText = "Pleased to meet you, " + userName + "!";
} else {
    header.innerText = "I wish I knew your name. :(";
}
        </script>
    </body>
</html>

在这个例子中，我们提示用户输入他们的名字。如果他们点击“取消”,或者他们什么也没输入，然后点击“确定”,我们会告诉他们这让我们多么难过。否则，我们告诉他们我们很高兴见到他们。

window.removeEventListener()

方法删除了一个之前在窗口中注册的事件监听器。否则它的行为与element.removeEventListener()完全一样。详情和例子见element.removeEventListener()。

句法

window.removeEventListener(strEventType, eventHandler, boolCapture);

window.resizeBy（ ）

方法通过指定的像素数来改变窗口的宽度和高度。正数表示尺寸增大，负数表示尺寸减小。(对比window.resizeTo()。)

大多数浏览器只允许你调整使用window.open()方法打开的独立窗口的大小(不是标签，如果浏览器实现了标签浏览)。一些浏览器还为用户提供了明确禁用该功能的选项。

句法

window.resizeBy(changeInWidth, changeInHeight);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script>
var myWindow = window.open("http://www.google.com", "searchWindow", "top=10,left=10,width=500,height=500");
myWindow.resizeBy(-100, -100); // Shrinks the window's width and height by 100 px each.
        </script>
    </body>
</html>

在这个例子中，我们打开一个 500 像素宽和 500 像素高的搜索窗口。然后，我们通过将宽度和高度都减少 100 像素来调整它的大小。当浏览器首先以 500x500 大小打开，然后缩小到 400x400 大小时，您可能会看到短暂的闪烁。参见window.open()了解该方法的详细信息，包括浏览器的依赖性和局限性。

window.resizeTo（ ）

方法将窗口调整到指定的尺寸(以像素为单位)。(对比window.resizeBy()。)大多数浏览器只允许你调整使用window.open()方法打开的独立窗口的大小(不是标签，如果浏览器实现了标签浏览)。一些浏览器还为用户提供了明确禁用该功能的选项。

句法

window.resizeTo(intWidth, intHeight);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script>
var myWindow = window.open("http://www.google.com", "searchWindow", "top=10,left=10,width=500,height=500");
myWindow.resizeTo(200, 200); // Resize the window to 200 pixels by 200 pixels.
        </script>
    </body>
</html>

在这个例子中，我们打开一个 500 像素宽和 500 像素高的搜索窗口。然后我们把它的大小调整为 200 乘 200 像素。当浏览器首先以 500x500 大小打开，然后缩小到 200x200 大小时，您可能会看到短暂的闪烁。参见window.open()了解该方法的详细信息，包括浏览器的依赖性和局限性。

window.scroll()

window.scroll()方法将窗口中的文档滚动到指定的 x 和 y 坐标，以像素为单位，原点(0，0)位于文档的左上角。这两个参数都是必需的。

句法

windowRef.scroll(intX, intY);

window.scrollBy()

方法将窗口滚动指定的偏移量，以像素为单位。正数向下(或向右)滚动窗口，负数向上(或向左)滚动窗口。

句法

windowRef.scrollBy(intX, intY);

window.scrollByLines()

方法将窗口垂直滚动指定的文本行数。正数向下滚动，负数向上滚动。

句法

windowRef.scrollByLines(intLines);

window . scrollbypages()

方法将窗口垂直滚动指定的文本页数。正数向下滚动，负数向上滚动。

句法

windowRef.scrollByPages(intPages);

window.scrollTo()

window.scrollTo()方法的功能与window.scroll()相同。

句法

windowRef.scrollTo(intX, intY);

window.setInterval()

window.setInterval()方法允许您设置一个计时器，该计时器将每隔指定的毫秒数调用一次指定的函数。该方法返回计时器的 ID，当作为参数提供给window.clearTimeout()方法时，将取消计时器。如果没有取消，计时器将继续运行，每隔一段时间调用指定的函数，直到窗口关闭(通过关闭选项卡或浏览器本身)或新文档加载到窗口中。

请注意，计时器将每隔指定的毫秒数运行其函数，而不管函数执行需要多长时间。如果函数的执行时间超过了间隔时间，您可能会以函数同时执行而告终。例如，如果函数运行需要 700 毫秒，而您计划它每 500 毫秒运行一次，那么您将会同时执行函数。

句法

var timerID  = setInterval(functionToExecute, intMilliseconds);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>JavaScript Clock</h1>
        <h2>hh : mm : ss</h2>
        <p><button>Start</button></p>
        <script>
var clockID = null,
    buttonRef = document.querySelector("button");

// Create a function that can be called every second to update the clock.
function updateClock() {
    var ptrClock = document.querySelector("h2"),
        myTime = new Date(),
        strTime;

    // Build a string with the current time
    strTime = myTime.getHours() + " : ";
    strTime += myTime.getMinutes() + " : ";
    strTime += myTime.getSeconds();

    // Update the clock
    ptrClock.innerText = strTime;
}

// Handle clicks on the button to either start or stop the clock.
function handleButtonClick() {
    // If the clockID is null, then we need to start the clock.
    // Otherwise, we need to stop the clock.
    if (clockID == null) {
        updateClock();                            // Set the clock to the correct time
        clockID = setInterval(updateClock, 1000); // start the timer
    } else {
        clearTimeout(clockID);                    // Stop the timer
        // Clear the ID so that the next time we click on the
        // button we'll know there is no timer running
        clockID = null;
    }
}

// Bind the event handler to the button.
buttonRef.addEventListener("click", handleButtonClick, false);
        </script>
    </body>
</html>

在本例中，我们创建了一个简单的时钟，您可以通过单击按钮来启动和停止它。首先，我们创建一个可以被计时器每秒调用的函数，名为updateClock()。该函数使用Date对象获取当前时间，并使用Date方法构建一个表示时间的字符串(关于Date对象及其方法的详细信息，参见第五章)。然后，它更新时钟的文本。

当用户点击按钮时，我们希望在时钟停止的情况下启动时钟，或者在时钟启动的情况下停止时钟，因此我们创建一个事件处理程序来检查是否设置了clockID。如果时钟没有停止，事件处理程序会更新时钟，然后启动计时器。如果时钟停止，事件处理器将停止计时器并清除clockID。

window.setTimeout（ ）

window.setTimeout()方法的工作方式类似于setInterval()方法，因为它允许您指定一个函数在指定的毫秒数后运行。然而，与setInterval()不同的是，setTimeout()只执行一次该功能。像setInterval()一样，setTimeout()返回一个代表新计时器的 ID，可以使用clearInterval()方法将其清零。

句法

var timerID  = setTimeout(functionRef, intMilliseconds);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
                <script>
// This will alert "Hello World" after 5 seconds.
var timerID  = setTimeout(function() {
    alert('Hello World!');
}, 5000);
        </script>
    </body>
</html>

在这个例子中，我们创建了一个简单的超时，在页面加载五秒钟后提醒“Hello World”。

window . sizetocontent()

方法根据窗口的内容调整窗口的大小。这对于将弹出窗口调整到适合其内容所需的大小非常有用。请注意，在调用该方法之前，必须加载并准备好 DOM。如果在 DOM 加载之前调用它，它可能会将窗口调整到不正确的大小。

句法

windowRef.sizeToContent();

document对象引用

document对象代表已经加载到窗口中的文档。document对象是window对象的一个属性，所以你可以用window.document来访问它。由于window对象也作为 JavaScript 的全局上下文，您可以省略指定window.标识符，而直接使用document(这是一个非常常见的约定)。

性能

对象document上的属性提供了关于document本身的信息，比如 URL 和 cookies。

document.activeElement

document.activeElement属性提供了对文档中当前具有键盘焦点的元素的只读引用。如果没有焦点，该属性返回对body元素的引用。

句法

var myElementReference = document.activeElement;

文档.正文

document.body属性提供了对文档的body元素的引用。

句法

var bodyRef = document.body;

例子

var myDiv = document.createElement("div"); // Creates a new element.
document.body.appendChild(myDiv); //Appends the new DIV to the document at the end.

document.compatMode

属性返回用于呈现文档的兼容模式。浏览器可以根据不同的兼容性级别来呈现文档，通过document.compatMode属性，您可以判断哪个是用来呈现当前文档的。这些值是:

• CSS1Compat:浏览器以严格模式呈现文档，这意味着它根据相关标准呈现文档的标记，以产生可预测的结果。
• BackCompat:该文档是使用 quirks 模式呈现的。Quirks 模式是一种呈现模式，旨在保持与旧的非标准标记的向后兼容性。因为怪癖模式偏离了标准，所以结果可能是不可预测的。

请注意，所有现代浏览器(甚至大多数旧浏览器)都以严格模式自动呈现 HTML5 文档。

句法

var strCompat = document.compatMode;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
var strCompat = document.compatMode;
alert(strCompat); // will alert "CSS1Compat" because this is an HTML 5 document.
        </script>
    </body>
</html>

本示例提示文档的呈现模式。因为这是一个 HTML5 文档(由第一行的doctype标记指定)，所以浏览器以符合标准的模式呈现。

document.cookie

document.cookie属性提供对与该文档相关联的 cookies 的访问。Cookies 提供了一种在用户系统上存储少量信息的方式，以便以后检索。这些信息可以在浏览器会话中持续存在，使您能够在用户关闭浏览器或重新启动计算机后检索存储的数据。对 cookie 的访问受到单一来源策略的限制，因此来自一个来源的脚本不能访问由来自另一个来源的脚本设置的 cookie。但是，来自一个来源的脚本可能会设置一个不同来源的 cookie，从而产生一个不同来源的 cookie(原始脚本无法读取，但来自指定来源的脚本可以访问)。此类 cookie 被称为第三方 cookie。第三方 cookie 通常用于跨网站跟踪用户:每个域使用一个脚本为第三个域编写一个 cookie，并为该域加载一个可以读取该 cookie 的脚本。这样，当用户从一个域移动到另一个域时，第三个域可以监视用户及其活动。第三方 cookies 会带来一些严重的隐私问题，并可能被恶意脚本用作安全漏洞。

存储的 cookie 是一个由单个键/值对组成的字符串，后跟以下可选属性:

• domain:可以读取结果 cookie 的文档的域。您可以指定一个确切的域(如"www.apress.com"，这将允许仅从www.apress.com域提供的脚本中读取 cookie)或子域(如.apress.com，这将允许从apress.com : www.apress.com、my.apress.com、examples.my.apress.com等的任何子域中读取 cookie。).
• expires:GMT 格式的日期，指定数据过期的时间。如果您使用Date对象管理应用中的日期，那么Date.toUTCString方法将产生一个正确格式的字符串。如果既没有设置expires值也没有设置max-age值，cookie 将在会话结束时过期。
• max-age:cookie 的最长期限，以秒为单位。如果既没有设置expires值也没有设置max-age值，cookie 将在会话结束时过期。
• path:指定可以读取生成的 cookie 的文档的路径。如果未设置，则默认为当前文档的路径。
• secure:如果包含了这个密钥(它不需要值，只需要包含在字符串中)，那么只能通过安全(HTTPS)连接读取 cookie。

Cookies 只能包含文本，不能包含对象，并且不能包含分号、逗号或空格。您可以为给定的域设置多个 cookie。

句法

var myCookie = document.cookie; // reads the cookie string that has been set
document.cookie = myCookie;     // sets the cookie string for the document

例如，考虑 cookies 的一个常见用例:存储用户偏好。在假设的站点上，用户可以通过指定主题和语言来定制他们的用户界面。您可以将这些信息存储为 cookies，这样当用户返回您的站点时，他们的设置将会保留。您还希望指定 cookies 应该持续 5 天(或 432000 秒)，并且可以在任何子域上读取。

例子

// Set the cookies
document.cookie = "username=uberuser;max-age=432000;domain=.yourdomain.com"; // Sets a cookie for username.
document.cookie = "theme=greenapple;max-age=432000;domain=.yourdomain.com"; // Sets a cookie for theme.

读取 cookie 稍微复杂一点，因为所有 cookie 都以分号分隔的字符串形式一次发送回来。所以对于前面的例子，访问document.cookie将返回字符串username=uberuser; theme=greenapple。要处理多个 cookies，您需要一种方法来搜索给定键/值对的字符串。解决方案是字符串的格式遵循一个非常特定的模式:给定一个特定的键，您需要搜索与之相关联的值，这意味着您需要查找第一次出现的字符串"key="和下一个分号之间的文本。有许多方法可以做到这一点，但最简洁的方法是使用正则表达式。正则表达式可以搜索由开始和结束分隔符分隔的子字符串:(？:^|;)\s？key=(。*?)(?:;|$)这个正则表达式指定从字符串的开头开始，我们将搜索子串"key="，一旦找到，就返回该子串和下一个分号之间的子串。下面是一个使用该正则表达式的函数:

// Returns the value associated with strKey within the document's cookie, or null if not found.
function readCookie(strKey) {
    var myCookie = document.cookie,
        cookieReg = new RegExp('(?:^|;)\\s?' + strKey + '=(.*?)(?:;|$)'),
        myVal = myCookie.match(cookieReg);
    if(myVal == null) {
        return myVal;
    } else {
        return myVal[1];
    }
}

这里有一个例子，把所有的东西放在一起:

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
        <script>
// Returns the value associated with strKey within the document's cookie, or null if not found.
function readCookie(strKey) {
    var myCookie = document.cookie,
        cookieReg = new RegExp('(?:^|;)\\s?' + strKey + '=(.*?)(?:;|$)'),
        myVal = myCookie.match(cookieReg);
    if(myVal == null) {
        return myVal;
    } else {
        return myVal[1];
    }
}

var myCookie = document.cookie;
if (readCookie("username") != null) {
    // We have been here before!  Use the readCookie function to get our preferences
    var myUsername = readCookie("username"),
        myTheme = readCookie("theme");
    alert("Hello " + myUsername + ", your theme is " + myTheme);
} else {
    // We have not been here before.  Set new cookies.
    document.cookie = "username=uberuser"; // Sets a cookie for username.
    document.cookie = "theme=greenapple";  // Sets a cookie for theme.
    alert('Cookie set.  Reload the browser to see the results.')
}
        </script>
    </head>
    <body>
        <h1>Testing Cookies</h1>
    </body>
</html>

在这个例子中，我们为username和theme设置了 cookies。不过，我们没有在它们上面设置max-age或expires值，所以它们是会话 cookies，一旦你关闭浏览器就会被删除。尝试在一个几分钟的 cookie 上设置一个max-age,以验证该 cookie 是否如预期的那样持续存在，然后在过期后不可用。(大多数浏览器不会访问从文件系统加载的页面的 cookies，所以如果您希望运行这个示例，您可能需要使用个人 web 服务器来提供服务。)

Cookie 字符串的总大小限制为 4kb，因此您可以存储的数据量也是有限的。此外，许多浏览器为用户提供了对 cookies 的精细控制，包括覆盖它们的过期或内容，甚至完全禁止它们。

关于 cookies 的现代替代方案，请参见本章前面对window.sessionStorage和window.localStorage的讨论。

文档.标题

属性返回一个对文档的元素的引用。该属性可用作访问 head 中元素的快捷方式，如脚本、样式表等。

句法

var myHead = document.head;

例子

var docTitle = document.head.title;

文档.位置

document.location属性的行为与window.location相同，返回一个Location对象。详见window.location。

文档.推荐人

在用户通过点击另一个页面上的链接来访问当前页面的情况下，document.referrer属性返回引用页面的 URL。否则，它返回一个空字符串("")。

句法

var myReferrer = document.referrer;

文档.标题

document.title 属性返回一个包含文档的title标签内容的字符串。

句法

var myTitle = document.title;

文件。统一资源定位器

属性返回一个包含文档 URL 的字符串。

句法

var myUrl = document.URL;

方法

document对象有几个方法可用于操作文档内容、访问元素和管理事件。

document.addEventListener()

document.addEventListener()方法向文档添加一个事件监听器。否则它的行为和element.addEventListener()完全一样；有关详细信息和示例，请参见该条目。

句法

document.addEventListener(strEventType, eventHandler, boolCapture);

document.createComment

方法用指定的文本创建一个新的注释元素。然后可以使用任何 DOM 操作方法将这个元素插入到 DOM 中。

句法

var myCommentEl = document.createComment("This is my comment.");

例子

var myCommentEl = document.createComment("END OF DOCUMENT");
document.body.appendChild(myCommentEl); // appends the new comment to the end of the document.

document . create document fragment()

document.createDocumentFragment()方法创建一个新的文档片段。文档片段是通用的容器，可以作为您正在创建的新元素的临时区域。根据您的喜好配置文档片段后，您可以将它附加到主文档的所需位置。

句法

var myFrag = document.createDocumentFragment();

例子

var myFrag = document.createDocumentFragment(),
    myPar = document.createElement("p"),
    myText = document.createTextNode("Hello world!");
myPar.appendChild(myText);         // append the text to the paragraph.
myFrag.appendChild(myPar);         // Append the paragraph to the document fragment.
document.body.appendChild(myFrag); // Append the total fragment to the end of the document body.

document.createElement()

方法创建一个指定类型的新 DOM 元素。类型是用引号括起来的字符串，如果您提供了无效的类型，该方法将引发错误。

句法

var myEl = document.createElement(tagName);

document.createEvent()

document.createEvent()方法创建指定类型的 DOM Event对象，然后可以使用target.dispatchEvent()在目标上配置和调度该对象。详情和示例见第三章。

句法

var myEvent = document.createEvent(eventType);

document.createTextNode()

方法用想要的文本创建一个文本节点。然后，可以将该节点附加到另一个节点。

句法

var myTextNode = document.createTextNode(strText);

例子

var myParagraph = document.createElement("p"),
    myTextNode = document.createTextNode("This is a dynamically added paragraph.");

myParagraph.appendChild(myTextNode);
document.body.appendChild(myParagraph); // Appends the paragraph to the very end of the document.

document.getElementById()

document.getElementById()方法返回对具有指定 ID 的元素的引用。id 被认为在文档中是唯一的；如果文档中有重复的 ID，该方法返回对它遇到的具有指定 ID 的第一个元素的引用。

句法

var targetEl = document.getElementById(strID);

document . getelementsbyclassname()文件

document.getElementsByClassName()方法在文档中搜索具有指定类的所有元素，并返回一个类似数组的对象，包含它们的引用。每个匹配都将作为对象中的索引元素出现，length属性将表示元素的总数。如果没有匹配的元素，这个方法返回一个类似数组的对象，没有成员，并且length属性设置为 0。

句法

var myTags = document.getElementsByClassName(strClass);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ul>
            <li>This should stay visible.</li>
            <li class="hideme">This should be hidden.</li>
            <li>This should stay visible.</li>
            <li>This should stay visible.</li>
            <li class="hideme">This should be hidden.</li>
            <li>This should stay visible.</li>
            <li class="hideme">This should be hidden.</li>
            <li class="hideme">This should be hidden.</li>
            <li>This should stay visible.</li>
        </ul>
        <p>This should stay visible.</p>
        <p class="hideme">This should be hidden.</p>
        <div class="hideme">
            <p>This div and everything within it should be hidden.</p>
        </div>
        <div>
            <p>This div and everything within it should be visible.</p>
        </div>
        <script>
var myEls = document.getElementsByClassName("hideme"),
    i;
for (i = 0; i < myEls.length; i++) {
    myEls[i].style.display = "none";
}
        </script>
    </body>
</html>

在这个例子中，我们获取了一个对所有具有类"hideme"的条目的引用，然后我们遍历集合，并将每个条目的display属性设置为隐藏。

document . getelementsbytagname()

document.getElementsByTagName()方法返回一个类似数组的对象，该对象包含对指定标记名的所有元素的引用。每个匹配都将作为对象中的索引元素出现，length属性将表示元素的总数。如果没有匹配的元素，这个方法返回一个类似数组的对象，没有成员，并且length属性设置为 0。

句法

var myEls = document.getElementsByTagName(strTagName);

document.querySelector()

方法返回第一个匹配指定 CSS 选择器的元素的引用。如果不匹配，该方法返回null。(对比document.querySelectorAll()。)有关querySelector()的详细信息，请参见第三章的“访问 DOM 中的元素”一节

句法

var myEl = document.querySelector(strSelector);

document.querySelectorAll()

方法返回一个类似数组的对象，其成员是匹配指定 CSS 选择器的元素。每个匹配都将作为对象中的索引元素出现，length属性将表示元素的总数。如果没有匹配的元素，这个方法返回一个类似数组的对象，没有成员，并且length属性设置为 0。(对比document.querySelector()。)有关querySelectorAll()的详细信息，请参见第三章部分“访问 DOM 中的元素”

句法

var myEls = document.querySelectorAll(strSelector);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <table>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </table>
        <script>
var myEls = document.querySelectorAll("tr:nth-child(odd)"),
    i;
for (i = 0; i < myEls.length; i++) {
    myEls[i].style.backgroundColor = "#ccc";
}
        </script>
    </body>
</html>

在这个例子中，我们使用querySelectorAll()来访问表中所有奇数行，然后给它们不同的背景颜色。

element对象引用

与window和document对象不同，element对象是一个抽象对象:你不能直接访问它。相反，它充当其他对象可以继承的模板对象。DOM 中的任何 HTML 元素都继承自element对象，因此 DOM 中的任何元素都将拥有element的所有属性和方法。

性能

HTML 元素的许多属性(class、ID、href、target等)。)被公开为与其相关联的 DOM element对象的属性。此外，DOM element对象具有提供对元素的子元素、兄弟元素和父元素以及元素在页面中的位置的访问的属性。

element.childNodes

属性提供了一个类似数组的对象，其成员是元素的直接子节点。这包括子元素以及其他子元素，比如注释、cdata 节，甚至表示 HTML 标记中空白的文本节点。每个节点将作为对象中的一个索引元素出现，length属性将表示子节点的总数。如果元素没有子节点，该属性返回一个类似数组的对象，没有成员，并且length属性设置为 0。(对比element.children。)

句法

var targetElement = document.getElementById("myId");
var myChildNodes = targetElement.childNodes;

元素.子元素

属性提供了一个类似数组的对象，其成员是目标元素的直接子元素。每个元素都将作为索引元素出现在对象中，length属性将表示子元素的总数。如果元素没有子节点，该属性返回一个类似数组的对象，没有成员，并且length属性设置为 0。(对比element.childNodes。)

句法

var myChildren = targetElement.children;

element.classList

属性为应用于对象的 CSS 类提供了一个接口。当单独访问时，此属性提供一个类似数组的集合，其成员是元素上的各个类。每个类都将作为一个索引元素出现在对象中，length属性将表示类的总数。如果元素没有类，这个属性提供一个类似数组的对象，没有成员，并且length属性设置为 0。

此外，classList接口有几个有用的方法:

• add(className):将指定的类添加到元素中。
• remove(className):从元素中删除指定的类。
• toggle(className):如果存在，从元素中删除类；如果不存在，则添加该类。
• contains(className):如果指定的类在元素上，则返回true；如果没有返回false。

element.classList功能相对较新。Internet Explorer 9 及更低版本不支持，Safari 5.0 及更低版本也不支持。在旧的浏览器中，可以通过className属性访问元素的类。

句法

var myClasses = targetElement.classList;
targetElement.classList.add(strClass);
targetElement.classList.remove(strClass);
targetElement.classList.toggle(strClass);
var boolHasClass = targetElement.classList.contains(strClass);

element.className

element.className属性提供了对已经应用于元素的类的访问。访问时，它提供一个字符串，该字符串是所有类的空格分隔列表，如果没有，则为空字符串。当在赋值中使用时，它将元素上的类更改为以空格分隔的类的指定列表。

句法

var myClasses = targetElement.className;
targetElement.className = myClasses;

例子

var targetElement = document.getElementById("myId");
targetElement.className = "class1 class2"); // Add 2 classes to the element

element.contentEditable

属性设置元素的属性。将该值设置为true启用编辑，而将其设置为false禁用编辑。将值设置为inherit会导致元素继承其父元素的contentEditable值。要确定元素是否可编辑，请使用element.isContentEditable属性。

根据 HTML5 规范，几乎任何元素都是可编辑的。(实际上，这是一个老特性，但在 HTML5 之前它不是标准的一部分。)你只需要在元素上设置contentEditable属性，用户就可以修改它包含的文本内容了。

句法

targetElement.contentEditable = true;
targetElement.contentEditable = false;
targetElement.contentEditable = "inherit";

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
var headline = document.querySelector("h1");
headline.contentEditable = true;
        </script>
    </body>
</html>

在本例中，标题是可编辑的。用户可以单击它，然后更改其内容。

element.id

element.id属性提供了对应用于元素的 ID 的访问。更改此属性会更改元素的 ID。

句法

var elID = targetElement.id;
targetElement.id = differentID;

element.innerHTML

属性提供了对包含在目标元素中的 HTML 的访问。当用作访问器时，它返回一个字符串，该字符串包含元素中的序列化 HTML。在赋值中使用时，它接受提供的 HTML 字符串，删除元素的后代，反序列化提供的 HTML，并将结果元素作为目标元素的后代插入 DOM。

将该属性设置为null或空字符串将删除目标元素的所有子元素。在较旧的浏览器中，这可能导致内存泄漏；详见第三章的章节“删除元素”。

注意，任何有效的 HTML 都可以通过这种方式插入到元素中，包括脚本。当处理用户提供的内容或您不确定是否安全的内容时，您应该小心地在插入 HTML 之前对其进行净化，以避免危及应用的安全性。

句法

var strHtml = targetElement.innerHTML;
targetElement.innerHTML = strDifferentHtml;

例子

document.body.innerHTML = ""; // completely erase a document
var strHtml = '<h1>Hello World</h1><p>This is dynamically created.</p>';
document.body.innerHTML = strHtml; // Add our content.

element.isContentEditable

element.isContentEditable属性是一个只读属性，如果元素的contentEditable属性被设置为true，或者如果它被设置为inherit，并且元素的父元素的contentEditable被设置为true，则该属性被设置为true。

句法

var boolEditable = targetElement.isContentEditable;

element.lastChild

属性提供了一个只读指针，指向目标元素的最后一个子节点。如果元素没有子节点，则设置为null。节点包括元素、标签、cdata 节，甚至是表示标记中空白的文本节点。(比较element.lastElementChild。)

句法

var childNode = targetElement.lastChild;

元素。lastelementchild

属性提供了一个只读指针，指向目标元素的最后一个 HTML 元素子元素。如果元素没有子元素，则设置为null。(比较element.lastChild。)

句法

var childNode = targetElement.lastElementChild;

element.name

element.name属性提供了对元素的name属性的访问。

句法

var myName = targetElement.name;
targetElement.name = myName;

element.nextSibling

属性提供了一个只读指针，指向目标元素的下一个同级节点。如果元素没有兄弟元素，则设置为null。节点包括元素、标签、cdata 节，甚至是表示标记中空白的文本节点。(比较element.nextElementSibling。)

句法

var mySeebl = targetElement.nextSibling;

element.nextElementSibling

属性提供了一个指向 HTML 元素的只读指针，该 HTML 元素是目标元素的下一个兄弟元素。如果该元素没有兄弟元素，则设置为null。(比较element.nextSibling。)

句法

var mySeebl = targetElement.nextElementSibling;

元素偏移高度

element.offsetHeight属性提供对目标元素高度的只读访问，该高度是通过将内容的高度加上顶部和底部填充加上顶部和底部边框宽度计算出来的。它不包括上边距或下边距。

句法

var elHeight = targetElement.offsetHeight;

element.offsetLeft

element.offsetLeft属性提供对目标元素的左上边框从其偏移父元素的左上边框偏移的像素数的只读访问。元素的 offset parent 是第一个 CSS position 属性设置为relative或absolute的父元素。

句法

var elLeft = targetElement.offsetLeft;

element.offsetParent

element.offsetParent属性提供了一个指向目标元素的偏移父元素的只读指针，该父元素是第一个将其 CSS 位置属性设置为relative或absolute的父元素。

句法

var ptrOffsetParent = targetElement.offsetParent;

element.offsetTop

element.offsetTop属性提供对目标元素的左上边框从其偏移父元素的左上边框偏移的像素数的只读访问。元素的 offset parent 是第一个 CSS position 属性设置为relative或absolute的父元素。

句法

var elTop = targetElementoffsetTop;

element.offsetWidth

element.offsetWidth属性提供对目标元素的偏移宽度的只读访问，该宽度通过将元素的内容宽度加上左右填充加上左右边框宽度来计算。它不包括左边距或右边距。

句法

var elWidth = targetElement.offsetWidth;

element.outerHTML

属性提供了对目标元素及其所有派生元素的 HTML 的访问。当用作访问器时，它返回包含元素及其后代的序列化 HTML 的字符串。当在赋值中使用时，它接受提供的 HTML 字符串，删除元素及其后代，反序列化提供的 HTML，并将结果元素插入 DOM。

将该属性设置为null或空字符串将删除目标元素及其所有后代。在较旧的浏览器中，这可能导致内存泄漏；详见第三章的章节“删除元素”。

注意，任何有效的 HTML 都可以通过这种方式插入到元素中，包括脚本。当处理用户提供的内容或您不确定是否安全的内容时，您应该小心地在插入 HTML 之前对其进行净化，以避免危及应用的安全性。

句法

var strHtml = targetElement.outerHTML;
targetElement.outerHTML = strHtml;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ul>
            <li>Apples</li>
            <li>Oranges</li>
            <li>Bananas</li>
        </ul>
        <script>
var myList = document.querySelector("ul"),
    strToDo = '<ol><li>Laundry</li><li>Grocery Store</li><li>Dry cleaning</li></ol>';

myList.outerHTML = strToDo;  // Replace the list and all of its children with our to-do list.
        </script>
    </body>
</html>

在这个例子中，我们想用待办事项列表替换水果列表。我们首先获取一个对列表的引用，然后创建一个包含要插入到文档中的 HTML 的字符串。然后我们使用outerHTML用新的标记替换目标元素。

element.parentNode

属性提供了一个指向元素父节点的只读指针。如果元素在 DOM 片段中或者没有被添加到 DOM 中，它将被设置为null。

句法

var myParent = targetElement.parentNode;

元素. previousSibling

属性提供了一个只读指针，指向目标元素的上一个兄弟节点。如果没有前一个兄弟姐妹，这将是null。节点可以是元素，也可以是 cdata 节、注释，甚至是表示标记中空白的文本节点。(比较element.previousElementSibling。)

句法

var mySeebl = targetElement.previousSibling;

element.previousElementSibling

属性提供了一个只读指针，指向目标元素的上一个兄弟元素。如果没有前一个兄弟姐妹，这将是null。(比较element.previousSibling。)

句法

var mySeebl = targetNode.previousElementSibling;

项.滚动高

element.scrollHeight属性提供对元素高度和上下边距的只读访问。这相当于包含元素在不滚动的情况下显示所有元素内容的最小高度。

句法

var myHeight = targetElement.scrollHeight;

element.scrollLeft

属性提供了对目标元素的左滚动偏移量的访问。当用作访问器时，它返回目标元素的内容水平滚动的像素数。当赋值时，它会导致目标元素的内容滚动到指定位置。

句法

var scrollPos = targetElement.scrollLeft;
targetElement.scrollLeft = scrollPos;

元素.滚动顶部

属性提供了对目标元素的垂直滚动偏移量的访问。当用作访问器时，它返回目标元素的内容垂直滚动的像素数。当赋值时，它会导致目标元素的内容滚动到指定位置。

句法

var scrollPos = targetElement.scrollTop;
targetElement.scrollTop = scrollPos;

元素. scrollWidth

element.scrollWidth属性提供对元素内容宽度加上左右填充的只读访问。它不包括左边距或右边距。这相当于包含元素在没有水平滚动的情况下显示所有元素内容的最小宽度。

句法

var myWidth = targetElement.scrollWidth;

元素.样式

element.style属性通过一个Style对象提供对元素的style属性的访问。Style对象具有代表元素的style属性中设置的所有 CSS 属性的属性。可以根据需要添加新的。这些属性可用于读取当前值或将它们设置为新值。

句法

var myValue = targetElement.style.desiredCssAttribute;
targetElement.style.desiredCssAttribute = myValue;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 style="border: 1px solid red;color: #00F;background-color: #ccc">Hello World</h1>
        <script>
var headline = document.querySelector("h1");

alert(headline.style.backgroundColor); // will alert something like "rgb(204, 204, 204)"
headline.style.fontStyle = "italic";   // will make the text within the headline italic.
        </script>
    </body>
</html>

在这个例子中，我们在 headline 元素上设置了一些内联样式，然后使用元素的style属性来检查背景颜色和斜体文本。

element.tabIndex

element.tabIndex属性提供对元素的tabindex属性的访问。浏览器维护文档中表单元素的默认跳转顺序—默认情况下，这是它们在 HTML 中的标记顺序。您可以使用这个属性来覆写这个顺序。此外，通过设置此属性，可以强制浏览器在跳转顺序中包含非窗体元素。该值是一个从 0 开始的整数。将该值设置为 1 意味着不能使用 Tab 键访问该元素。

句法

var myTabIndex = targetElement.tabIndex;
targetElement.tabIndex = newTabIndex;

element.tagName

element.tagName属性是一个只读属性，它返回一个字符串，该字符串是元素的标签。

句法

var strTag = targetElement.tagName;

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
var headline = document.querySelector("h1");

alert(headline.tagName); // will alert "H1"
        </script>
    </body>
</html>

元素.标题

element.title属性提供了对元素的title属性的访问。这是当用户将鼠标放在元素上时出现在工具提示中的文本。

句法

var myTitle = targetElement.title;
targetElement.title = myTitle;

方法

对象的方法为管理元素和元素上发生的事件提供了有用的功能。

元素. addEventListener()

element.addEventListener()方法为目标元素上的指定事件类型注册一个事件处理程序。每当指定类型的事件被调度到元素时(无论是由浏览器还是由脚本手动调度)，事件处理程序都会执行。该方法采用以下参数:

• strEventType:您正在注册处理程序的事件类型。
• eventHandler:将接收事件通知的对象。该对象可以是一个函数(在事件发生时执行)，也可以是实现事件侦听器接口的对象(有关事件侦听器接口的详细信息，请参见下面的事件处理程序对象)。事件处理程序可以是命名函数或匿名内联函数表达式。
• useCapture:一个布尔值，如果设置为true，表示事件处理程序应该在捕获阶段执行。如果设置为false(或者省略)，事件处理程序将在冒泡阶段执行。这个参数在标准中被标记为可选的，但是直到最近许多浏览器还需要它，所以指定它是一个好主意。

事件处理程序对象

通常情况下，您会将函数视为事件处理程序，但是 DOM 标准规定处理程序也可以是对象，只要该对象实现了 DOM 标准所称的侦听器接口。监听器接口是一个名为handleEvent()的方法，它接收一个Event对象作为参数。当调用该方法来处理事件时，执行上下文(由this关键字引用)被设置为侦听器接口的父对象。

有关 DOM 事件的详细信息，请参见第三章。

句法

targetElement.addEventListener(strEventType, eventHandler, useCapture);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p id="functionHandler">Click me to test an event handler function!</p>
        <p id="objectHandler">Click me to test using an object that implements a listener interface!</p>
        <script>
var functionHandler = document.getElementById("functionHandler"),
    objectHandler = document.getElementById("objectHandler"),
    objHandleClick;

// Implement the listener interface on objHandleClick
objHandleClick = {
    handleEvent: function(event) {
        alert('This is the event listener interface!');
        alert(this == objHandleClick);  // Will alert true
    }
}

// Create an event handler function
function fctHandleClick(event) {
    alert('This is the function event handler!');
    alert(this == functionHandler);     // Will alert true
}

functionHandler.addEventListener("click", fctHandleClick, false);
objectHandler.addEventListener("click", objHandleClick, false);
        </script>
    </body>
</html>

在这个例子中，我们创建了两个不同的事件处理程序:一个是函数，另一个是实现侦听器接口的对象。我们将每个处理程序绑定到它自己的目标。

另一个使用对象处理事件的例子见element.dispatchEvent()下的例子。

element.appendChild（）

element.appendChild()方法将指定的 DOM 片段或元素作为目标元素的最后一个子元素追加。

句法

targetElement.appendChild(fragment);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <div id="myTarget">
            <p>This paragraph was already here.</p>
        </div>
        <script>
var myTarget = document.getElementById("myTarget"),
    textNode = document.createTextNode("This one is new."),
    myPar = document.createElement("p");

myPar.appendChild(textNode); // Append the text node to the paragraph
myTarget.appendChild(myPar); // Append the paragraph to the div as the last child
        </script>
    </body>

在这个例子中，我们创建了一个新的文本节点和一个新的段落，然后我们将文本节点追加到段落中。然后，我们将该段落作为目标<div>的最后一个子元素添加到 DOM 中，使其出现在原始段落之后。

element.blur()

方法从元素中移除键盘焦点。(对比element.focus()。)

句法

targetElement.blur();

element.click()

element.click()方法模拟元素上的点击事件。这是一种方便的触发点击事件的简写方法，不需要使用手动调度事件的标准方式。

句法

targetElement.click();

element.cloneNode()

element.cloneNode()方法返回目标元素的克隆。如果可选参数设置为true，则执行“深度”克隆，并且所有目标元素的后代节点也被克隆。结果是一个 DOM 片段，如果需要的话，可以对其进行进一步的操作，或者将其附加到文档中。

该方法不克隆已经在目标元素或其子元素上注册的任何事件处理程序，但是它克隆属性，包括 id(所以注意不要在文档中引入重复的 id)。

句法

var newClone = targetElement.cloneNode(boolDeep);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <div id="myTarget">
            <p>This paragraph was already here.</p>
        </div>
        <script>
var myTarget = document.getElementById("myTarget"),
    myClone = myTarget.cloneNode(true);

myClone.id="myNewTarget"; // update the ID so it is not a duplicate
myClone.querySelector("p").innerText = "This is a new clone." // Update the text in the paragraph.
document.body.appendChild(myClone); // Appends the clone to the document as the last child.
        </script>
    </body>
</html>

在这个例子中，我们执行目标 div 的深度克隆。然后，我们更改克隆的 ID(以防止在文档中引入重复的 ID)并更改段落中的文本。然后我们将克隆体作为最后一个子体添加到文档中。

element.dispatchEvent()

element.dispatchEvent()方法手动将指定的事件分派给目标元素。它可以用来模拟用户交互或调度自定义事件。有关手动调度事件的详细信息，请参见第三章。

句法

targetElement.dispatchEvent(eventObject);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p id="targetMouseup">On mouseup here there will be an alert.</p>
        <p id="targetClick">Clicking here will manually dispatch a mouseup event to the paragraph above.</p>
        <script>
var targetMouseup = document.getElementById("targetMouseup"),
    targetClick = document.getElementById("targetClick"),
    eventObject;

// Implement an event listener interface on our object
eventObject = {
    handleEvent : function(event) {
        // Route the event to the correct handler
        if (event.type === "click") {
            this.handleClick(event);
        } else if (event.type === "mouseup") {
            this.handleMouseup(event);
        }
    },
    handleClick: function(event) {
        var myCustomEvent = document.createEvent("Event"); // use the generic event module
        myCustomEvent.initEvent("mouseup", true, true);    // Initialize the event as a mouseup event
        targetMouseup.dispatchEvent(myCustomEvent);        // Dispatch the event.
    },
    handleMouseup: function(event) {
        alert('A mouseup event was dispatched to this element!');
    }
}

targetMouseup.addEventListener("mouseup", eventObject, false);
targetClick.addEventListener("click", eventObject, false);

        </script>
    </body>
</html>

在这个例子中，我们使用一个eventObject来处理我们所有的事件处理需求。事件监听器接口(handleEvent()方法)检测事件的类型，并将事件路由到正确的方法。然后我们实现处理click和mouseup事件的方法。

在click事件处理程序中，我们使用通用事件模块手动创建一个Event对象。(我们可以使用MouseEvent模块，但是通用事件更简单。)然后我们将新的Event对象初始化为一个mouseup事件，然后将该事件分派给目标元素。

element.focus( )

element.focus()方法将键盘焦点发送到目标元素。(对比element.blur()。)

句法

targetElement.focus();

element.getAttribute()

element.getAttribute()方法返回指定属性的值。如果元素上不存在该属性，它将返回null。(比较element.setAttribute()。)

注意，在大多数浏览器中，通过元素的命名属性(如果有的话)访问属性比使用getAttribute()方法要快。

句法

var myAttrValue = targetElement.getAttribute(strAttributeName);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 id="headline" class="myclass" name="greeting">Hello World</h1>
        <script>
var headline = document.getElementById("headline");
alert(headline.getAttribute("id"));    // Will alert "headline"
alert(headline.getAttribute("name"));  // will alert "greeting"
alert(headline.getAttribute("class")); // will alert "myclass"
alert(headline.getAttribute("href"));  // will alert null
        </script>
    </body>
</html>

在这个例子中，我们使用getAttribute来查询元素的 ID、类和名称。我们还用getAttribute查询了元素上的href属性，却发现是null(未设置)。

element.getElementsByClassName（ ）

element.getElementsByClassName()方法的行为与document.getElementsByClassName()相同，但是搜索仅限于目标元素的后代。参见document.getElementsByClassName()中的例子。

句法

var myEls = targetElement.getElementsByClassName(strClass);

元素. get 元素切换 Name

element.getElementsByTagName()方法的行为与document.getElementsByTagName()相同，但是搜索仅限于目标元素的后代。参见document.getElementsByTagName()中的例子。

句法

var myEls = targetElement.getElementsByTagName(strTagName);

element.hasAttribute()

如果目标元素具有指定的属性，则element.hasAttribute()方法返回true,否则返回false。

句法

var boolHasAttribute = targetElement.hasAttribute(strAttribute);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 id="headline" class="myclass" name="greeting">Hello World</h1>
        <script>
var headline = document.getElementById("headline");
alert(headline.hasAttribute("id"));   // Will alert true
alert(headline.hasAttribute("href")); // will alert false
        </script>
    </body>
</html>

在这个例子中，我们查询目标元素，看它是否有 ID(如果有，那么hasAttribute("id")返回true)或 href(如果没有，那么hasAttribute("href")返回false)。

element.hasAttributes()

如果目标元素有任何属性，element.hasAttributes()方法返回true,如果没有，返回false。

句法

var boolHasAttributes = targetElement.hasAttributes();

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 id="headline" class="myclass" name="greeting">Hello World</h1>
        <h2>JavaScript is awesome</h2>
        <script>
var headline = document.getElementById("headline"),
    subHead = document.querySelector("h2");
alert(headline.hasAttributes()); // Will alert true
alert(subHead.hasAttributes());  // will alert false
        </script>
    </body>
</html>

在这个例子中，我们检查标题是否有属性(如果有，那么hasAttributes()返回true)以及副标题是否有属性(如果没有，那么hasAttributes()返回false)。

element . haschildnodes()元素

如果目标元素有任何子节点，则element.hasChildNodes()方法返回true，如果没有，则返回false。子节点可以是 HTML 元素，也可以是注释、cdata 节，甚至是表示标记中空白的文本节点。

句法

var boolHasChildNodes = targetElement.hasChildNodes();

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 id="headline" class="myclass" name="greeting">Hello World</h1>
        <div id="div1">

        </div>
        <div id="div2">
            <p>JavaScript is awesome.</p>
        </div>
        <div id="div3"></div>
        <script>
var headline = document.getElementById("headline"),
    div1 = document.querySelector("#div1"),
    div2 = document.querySelector("#div2"),
    div3 = document.querySelector("#div3");
alert(headline.hasChildNodes()); // Will alert true; the headline has a text node as a child
alert(div1.hasChildNodes());     // will alert true; div1 has a text node representing empty space                                  in the markup
alert(div2.hasChildNodes());     // will alert true; div2 has a paragraph as a child node
alert(div3.hasChildNodes());     // will alert false.
        </script>
    </body>
</html>

在这个例子中，我们有几个不同的元素，我们检查它们是否有子节点。H1标签有一个文本节点作为子节点；div1有一个文本节点，将标记中的空白区域表示为子节点；div2有一个段落作为子节点；而div3没有子节点。

element.insertBefore（）

element.insertBefore()方法在引用元素之前插入一个新元素作为目标元素的子元素。如果没有提供引用元素，新元素将被追加到目标元素的子元素的末尾。

句法

targetElement.insertBefore(newElement, referenceElement);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>
var targetList = document.querySelector("ul"),
    referenceElement = document.querySelectorAll("li")[2],
    myTextNode = document.createTextNode("3"),
    myLi = document.createElement("li");

myLi.appendChild(myTextNode);
targetList.insertBefore(myLi, referenceElement);
        </script>
    </body>
</html>

在本例中，我们有一个缺少数字 3 的连续数字列表，因此我们需要为数字 3 创建一个新的列表项，并将其作为无序列表的子列表插入到列表项 4 之前。

首先我们得到一个对无序列表的引用，然后通过查询所有列表项并使用索引 3 处的列表项，我们得到一个对列表项 4 的引用。然后我们创建一个文本节点和一个新的列表项，将下一个节点追加到列表项，然后使用insertBefore()将列表项作为无序列表的子项插入到我们选择的引用项之前。

element.querySelector()

除了搜索局限于目标元素的后代节点之外，element.querySelector()方法的行为与document.querySelector()相同。详情和例子见document.querySelector()。

句法

var myEl = targetElement.querySelector(strSelector);

element.querySelectorAll（ ）

除了搜索局限于目标元素的后代节点之外，element.querySelectorAll()方法的行为与document.querySelectorAll()相同。详情和例子见document.querySelectorAll()。

句法

var myEls = targetElement.querySelectorAll(strSelector);

element.removeAttribute( )

方法从目标元素中删除指定的属性。

句法

targetElement.removeAttribute(strAttribute);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1 name="headline">Hello World</h1>
        <script>
var targetEl = document.querySelector("h1");
alert(targetEl.hasAttributes());  // will alert true
targetEl.removeAttribute("name"); // removes the name.  Now the H1 should have no attributes.
alert(targetEl.hasAttributes());  // Will alert false
        </script>
    </body>
</html>

在这个例子中，我们从标题中删除了name属性。hasAttributes()方法第一次返回true,因为name属性存在，第二次返回false,因为name属性已被移除。

element.removeChild()

方法从目标元素中移除指定的子元素。如果指定元素不是目标元素的子元素，此方法将引发异常。

句法

targetElement.removeChild(childElement);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>
var targetList = document.querySelector("ul"),
    targetElement = document.querySelectorAll("li")[2];

targetList.removeChild(targetElement);
        </script>
    </body>
</html>

在这个例子中，我们使用removeChild()从列表中删除第三个项目。首先我们得到一个对列表的引用，以及对我们想要移除的元素的引用，然后我们使用removeChild()来移除该元素。

元素. removeEventListener()

element.removeEventListener()方法“撤销”了element.addEventListener()方法。因此，它采用相同的参数，并将移除使用这些参数添加的事件处理程序。如果没有事件处理程序与提供的参数匹配，则该方法不执行任何操作。

句法

targetElement.removeEventListener(strEventType, eventHandler, useCapture);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>Click me!</p>
        <script>
var myPar = document.querySelector("p"),
    myEventObject;

// Implement a listener interface on myEventObject
myEventObject = {
    handleEvent : function(event) {
        alert('You clicked on the paragraph!');
        event.target.removeEventListener("click", this, false); // Unregister the event handler
    }
}

myPar.addEventListener("click", myEventObject, false);
        </script>
    </body>
</html>

在本例中，我们创建了一个只执行一次的事件处理程序，因为它在执行时会删除自己。我们首先创建一个实现 DOM 监听器接口的对象(详见element.addEventListener())。在 listener 接口中，我们有一个警报来指示处理程序被触发，然后我们从目标元素中移除事件处理程序。注意，在侦听器接口中，this的值被设置为包含该接口的对象；这就是为什么在removeEventListener()调用中我们将事件处理程序称为this，而在addEventListener()调用中我们将事件处理程序称为myEventObject——它们指的是同一个东西。

element.replaceChild()

element.replaceChild()方法用指定的新元素替换目标元素的指定子元素。

句法

targetElement.replaceChild(newElement, oldElement);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>
var targetList = document.querySelector("ul"),
    targetElement = document.querySelectorAll("li")[2],
    newTextNode = document.createTextNode("three"),
    newLi = document.createElement("li");

newLi.appendChild(newTextNode);

targetList.replaceChild(newLi, targetElement);
        </script>
    </body>
</html>

在这个例子中，我们用生成的列表项替换第三个列表项。首先我们得到一个对无序列表(父元素)的引用，然后是一个对我们想要替换的元素的引用。然后我们构建新的列表项，并使用replaceChild()替换目标元素。

element.scrollIntoView()

如果滚动的结果是目标元素在视口之外，那么element.scrollIntoView()方法会使元素滚动到视图中，并与可视区域的顶部对齐。如果提供了可选的布尔参数，true使元素滚动到可视区域的顶部(默认行为)，而false使元素与可视区域的底部对齐。

句法

targetElement.scrollIntoView(boolAlignWithTop);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
        <style>
.container {
    width: 300px;
    height: 500px;
    overflow: auto;
    border: 1px solid #000;
}
        </style>
    </head>
    <body>
        <div class="container">

        </div>
        <script>
// Create many elements to induce scroll.
var myDocFrag = document.createDocumentFragment();
for (var i = 0 ; i < 200; i++) {
    var newParagraph = document.createElement("p"),
        newTextNode = document.createTextNode("This is paragraph #" + i);
    newParagraph.id = "id" + i;
    newParagraph.appendChild(newTextNode);
    myDocFrag.appendChild(newParagraph);
}

// Get a reference to our container and append the fragment.
var targetDiv = document.querySelector(".container");
targetDiv.appendChild(myDocFrag);

// Get a reference to the element we want to scroll into view.
var targetParagraph = document.getElementById("id150");
targetParagraph.scrollIntoView();
        </script>
    </body>
</html>

在这个例子中，我们首先有一个具有单个 div 的文档，我们将它的样式设置为特定的宽度和高度。然后我们创建许多段落，并将它们作为子元素添加到 div 中。然后我们获取对其中一个段落的引用，并使用它的scrollIntoView()方法将其滚动到视图中。

element.setAttribute()

方法将指定的属性设置为指定的值。如果目标元素上不存在该属性，则将添加该属性。注意，通过元素的命名属性来改变属性比使用setAttribute()来设置它们的值要快。

句法

targetElement.setAttribute(strAttribute, strValue);

例子

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Programmer's Reference</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <script>
var headline = document.querySelector("h1");

alert(headline.hasAttribute("name"));      // Will alert false, the headline has no name attribute.
headline.setAttribute("name", "headline"); // Sets the name.
alert(headline.hasAttribute("name"));      // Will alert true
        </script>
    </body>
</html>

在本例中，我们将name属性添加到标题中。起初，标题没有name属性，所以hasAttribute("name")返回false。然后我们设置属性并再次检查，hasAttribute("name")返回true。

摘要

在这一章中，我们提供了 DOM 指定的三个最常用对象的基本参考:

• window，它模拟加载和显示文档的窗口，还包括对其他窗口的引用。它也是 JavaScript 的全局作用域。
• document，模拟已载入窗口的文档。document对象具有访问文档中的元素并修改它们的属性和方法。

element，为元素提供抽象模板。DOM 元素具有访问和修改元素内容以及管理事件的属性和方法。关于这里涉及的许多主题的详细讨论，以及更多的例子，请参见第四章。

本书的参考资料部分到此结束。我们希望你会发现参考部分和讨论部分(由第一章到第四章组成)对你的 JavaScript 编程有所帮助。祝你好运！