JavaScript 02 HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

1、查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。例如：

查找 id="intro" 元素： var x=document.getElementById("intro");

通过标签名找到 HTML 元素例如：

本例查找 id="main" 的元素，然后查找 "main" 中的所有元素：

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

2、改变 HTML 输出流 JavaScript 能够创建动态的 HTML 内容：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

改写出日期： document.write(Date());

3、改变 HTML 内容 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

4、改变 HTML 属性 如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new 例如：

valuedocument.getElementById("image").src="landscape.jpg";

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

5、改变 HTML 样式 如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style 例如：

document.getElementById("p2").style.color="blue";

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

6、<h1 onclick="this.innerHTML='谢谢' ">点击这里<h1>

7、HTML 事件属性如需向 HTML 元素分配事件，您可以使用事件属性。

8、使用 HTML DOM 来分配事件 HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

9、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。例如：

10、onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。 例如：

11、<input onchange 事件>

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数

12、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

13、onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

14、创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。例子解释：

这段代码创建新的

元素：var para=document.createElement("p");

如需向元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向元素追加这个文本节点：para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素： var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：element.appendChild(para);

15、删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素

找到 id="div1" 的元素：var parent=document.getElementById("div1");

找到 id="p1" 的元素：var child=document.getElementById("p1");

从父元素中删除子元素：parent.removeChild(child);

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...，JavaScript 允许自定义对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

16、访问对象的属性 属性是与对象相关的值。

访问对象属性的语法是：objectName.propertyName

这个例子使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";var x=message.length; 结果：12

17、访问对象的方法 方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法：objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";var x=message.toUpperCase();

18、创建 JavaScript 对象 通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

---定义并创建对象的实例

---使用函数来定义对象，然后创建新的对象实例

19、创建直接的实例 这个例子创建了对象的一个新实例，并向其添加了四个属性：

person = new Object();

person.firstname="nongbu";

person.age=18;

person.lastname="zhang";

person.egecolor="yellow";

替代语法（使用对象 literals）：

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

20、使用对象构造器 本例使用函数来构造对象：

function person(firstname,lastname,age,eyecolor)

{ this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor; }

一旦您有了对象构造器，就可以创建新的对象实例，就像这样：

var myFather=new person("Bill","Gates",56,"blue");

var myMother=new person("Steve","Jobs",48,"green");

JavaScript 类

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。 JavaScript 基于prototype，而不是基于类的

21、JavaScript for...in 循环 JavaScript for...in 语句循环遍历对象的属性。

for (对象中的变量) { 要执行的代码 }

注释：for...in 循环中的代码块将针对每个属性执行一次。

22、JavaScript 数字 JavaScript 只有一种数字类型。

极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;// 12300000var z=123e-5;// 0.00123

JavaScript 数字可以使用也可以不使用小数点来书写：

var pi=3.14;// 使用小数点 var x=34;//没使用小数点

23、所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。

24、八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。例如：var y=0377; var z=0xFF;

25、数字属性和方法

属性：

MAX VALUE； MIN VALUE； NEGATIVE INFINITIVE； POSITIVE INFINITIVE；

NaN； prototype； constructor；

方法：

toExponential()； toFixed()； toPrecision()； toString()； valueOf()；

26、indexOf() 方法 match（）方法

如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。

如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符

27、如何使用 replace() 方法在字符串中用某些字符替换另一些字符

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

28、如何使用 Date() 方法获得当日的日期：document.write(Date())

getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

var d=new Date();

document.write("从 1970/01/01 至今已过去 " + d.getTime() + " 毫秒");

如何使用 setFullYear() 设置具体的日期。

var d = new Date(); d.setFullYear(1992,10,3); document.write(d);

29、定义日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

var myDate=newDate() 注释：Date 对象自动使用当前的日期和时间作为其初始值。

30、操作日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()； myDate.setFullYear(2008,7,9)

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()； myDate.setDate(myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

31、比较日期

日期对象也可用于比较两个日期。下面的代码将当前日期与 2008 年 8 月 9 日做了比较：

var myDate=new Date();

myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today) { alert("Today is before 9th August 2008"); }

else { alert("Today is after 9th August 2008"); }

JavaScript Array（数组）对象JavaScript Array（数组）对象

数组对象的作用是：使用单独的变量名来存储一系列的值。

32、定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：

var myArray=new Array();

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。

(1)、var mycars=new Array( )；

mycars[0]="Saab"；mycars[1]="Volvo"；mycars[2]="BMW；

也可以使用一个整数自变量来控制数组的容量

var mycars=new Array(3)；

mycars[0]="Saab" ；mycars[1]="Volvo"； mycars[2]="BMW"；

（2）var mycars=new Array("Saab","Volvo","BMW")；

注意：如果你需要在数组内指定数值或者逻辑值，那么变量类型应该是数值变量或者布尔变量，而不是字符变量。

33、访问数组 通过指定数组名以及索引号码，你可以访问某个特定的元素。

document.write(mycars[2]);

修改已有数组中的值 如需修改已有数组中的值，只要向指定下标号添加一个新值即可：

mycars[0]="Opel";

34、如何使用 concat() 方法来合并两个数组

var arr = new Array(3) ; var arr2 = new Array(3)

var arr3 = new Array(); arr3 = arr.concat(arr2);//合并

35、如何使用 join() 方法将数组的所有元素组成一个字符串。

var arr = new Array(3);
arr[0] = "George"; arr[1] = "John"; arr[2] = "Thomas"

var j =join("666"); document.write(j);

输出结果是：George666John666Thomas

36、如何使用 sort() 方法从字面上对数组进行排序。数组可以是数字的，也可以是文字的

arr.sort(); 直接调用，然后直接输出

如果是数字：document.write(arr.sort(sortNumber))

JavaScript Boolean（逻辑）对象

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

Boolean 对象

您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

37、创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象： var myBoolean=new Boolean()

注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

38、JavaScript Math（算数）对象 Math（算数）对象的作用是：执行常见的算数任务。

Math 对象 Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

算数值 JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数、圆周率、2 的平方根、1/2 的平方根、2 的自然对数、10 的自然对数、

以 2 为底的 e 的对数、以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）

Math.E、Math.PI、Math.SQRT2、Math.SQRT1_2、Math.LN2、Math.LN10、Math.LOG2E、Math.LOG10E

39、算数方法 除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

函数（方法）实例：下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入

document.write(Math.round(4.7)) 输出结果是：5

下面的例子使用了 Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数：

document.write(Math.random()) 输出的结果是：0.995552

下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数：3

最大值max(多个参数) document.write(Math.max(5,7) +<br/> "

最小值min（多个参数） document.write(Math.min(5,7) +<br/> "

JavaScript RegExp 对象

什么是 RegExp？ RegExp 是正则表达式的缩写。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置，以及要检索的字符类型，等等

RegExp 对象用于存储检索模式。

通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象，其模式是 "e"： var patt1=new RegExp("e");

当您使用该 RegExp 对象在一个字符串中检索时，将寻找的是字符 "e"。

40、RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。

test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。例如：

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 返回值：true

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。例如：var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

41、compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");