javascript基础部分（四）DOM和内置对象

Javascript基础部分（四）DOM对象和内置对象

4.1与用户交互

在window对象的方法中，有一些事专门用于处理输入与输出信息的，从而实现页面与用户的交互。

（1）、alert（）

alert（）向用户弹出一个信息对话框，这种模态的对话框只是显示一些消息和一个“确定”按钮。模态：意味着脚本暂时停止运行，页面与用户的交互也被暂时停止，直到用户关闭对话框为止。alert()方法示例：

alert（“this is my message”）;

lert()没有返回值。

（2）、confirm()

confirm()也弹出一个模态对话框，但为用户提供了一个选择，可以单击“确定”或者“”“取消”按钮。单击确定按钮函数返回值为真，单击取消按钮函数返回值为假。

调用： var answer = confirm(“are you happy to continue?”);

（3）、promt（）

A)、promt()是打开模态对话框的另一种方式，它允许用户输入信息。调用方式：

var answer = promt(“what is your full name？”)；

B)、promt()方法还可以有第二个可选参数，表示默认的输入内容，从而避免用户直接点击“确定”按钮而不输入任何内容。调用方式：

var answer = promt（“what is your full name？”，“john doe”）；

C)、promt()对话框的返回值取决于用户进行了什么操作。

（1）、输入信息，点击“确定”按钮或回车键，返回值就是用户输入的字符串。

（2）、没有在对话框里输入，就点击“确定”按钮或回车键，返回值就是调用promt（）方法设置的第二个可选参数的值。（如果有的话）

（3）如果用户直接关闭了对话框（也就是点击“取消”按钮或按ESC键），返回值就是null;

4.2根据id选择元素

A)、getElementById();

例：<div id = “div1”>

.....DIV元素的内容....

</div>

在javascript代码里，把相应的id作为参数调用getElementById()方法，就可以访问这个<div>元素。

var myDiv = document.getElementById(“div1”);

这样就得到了页面的特定的元素，能够访问它的全部属性和方法。

B)、innerHTML属性

innerHTML属性对于很多DOM对象来说都是一个很好用的属性，可以读取或设置特定页面元素内部的HTML内容。

假设HTML页面包含如下元素：

<div if = “ div1”>

<p>here is some original text.</p>

</div>

(1)利用getElementById()和innerHTML()的组合就可以访问这个<div>元素里的HTML内容

 

var myDivContents = document.getElementById(“div1”).innerHTML   

这样变量myDivContents现在会包含如下字符串：

“<p>here is some original text.</p>”

(2)、还可以利用innerHTML设置选定元素的内容

document.getElementById(“div1”).innerHTML = “<p>here is some new instead!</p>”;

4.3访问浏览器历史记录

Javascript里，浏览器的历史记录是以window.history对象代表的，它基本上就是访问过的URL列表。可通过这个方法使用这个列表，但是不能直接的修改这些URL。

History拥有三个方法和一个属性：属性是length,表示用户访问过的页面的数量。

（1）、forward（)方法和backward()方法相当于点击浏览器的“前进”和“后退”按钮，可以得到历史列表里下一个或前一个页面。
（2）第三个方法是go(),它只有一个参数，是正的或负的整数，可以跳到历史记录列表里的相对位置：

history.go(-3);    //回退三个页面

history.go(2); //前进两个页面。

4.4使用location对象

Location对象包含当前加载页面的URL信息。

（1）、使用location对象导航

利用location对象有两种方式可以帮助用户导航至新页面。

a)、直接设置对象的href属性。

location.href  = ‘www.newpage.com’; //这种方法转移页面后，原始页面还在浏览器记录里面。

B)、用新的URL直接替换当前页面，即把当前页面从历史记录列表里删除，可以使用location对象的replace()方法。

location.replace(‘www.newpage.con’);

(2)、刷新页面

要在浏览器里重新加载当前页面，也就是相当于用户点击“刷新”按钮，我们可以使用reload()方法：

location.reload();

4.5浏览器信息navigator对象

Location对象包含了浏览器当前URL的信息，而navigator对象包含了浏览器程序本身的数据。

4.6日期和时间

Date对象用于处理日期和时间。与前面的对象不同的是，DOM里并没有现成的Date对象，而是要我们自己在需要时创建自己的Date对象。每个Date对象都代表不同的日期和时间。

4.7利用Math对象简化运算

Math对象不需要创建就可以使用，它是已经存在的，直接调用它就可以使用了。

注：关键字with，通过使用with可以减少一些枯燥的键盘输入工作。

例：with（Math）

{

var myrand = random();

var biggest = max(3,4,5);

}

在这个例子里我们只使用方法的名称就调用了Math.random、Math.max()方法，因为调用这些方法的代码块与Math对象实现了关联。