JavaScript之DOM对象和内置对象

1. window 和document 对象

浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是DOM。在DOM 里，页面的元素具有一个逻辑化、层级化的结构，就像一个由父对象和子对象组成的树形结构。这些对象及其相互关系构成了Web 页面及显示页面的浏览器的抽象模型。每个对象都有“属性”列表来描述它，而利用JavaScript可以使用一些方法来操作这些属性。

这个层级树的最顶端是浏览器window对象，它是DOM 树里一切对象的根。window对象具有一些子对象，如图下图所示。图中第一个子对象是document，这也是最经常使用的对象。浏览器加载的任何HTML页面都会创建一个document对象，包含全部HTML内容及其他构成页面显示的资源。利用JavaScript以父子对象的形式就可以访问这些信息。这些对象都具有自己的属性和方法。

2. DOM对象和内置对象

2.1 alert()

alert() 没有返回值，向用户弹出一个对话框。

2.2 confirm()

confirm() 对话框为用户提供了一个选择，可以点击“确定”或者“取消”按钮。点击任意一个按钮都会关闭对话框，让脚本继续执行，但根据哪个按钮被单击，confirm()方法返回不同的值。单击“确定”返回布尔值“真”，单击“取消”返回布尔值“假”。

2.3 prompt()

     prompt() 是打开模态对话框的另一种方式，它允许用户输入信息。使用示例：

var name =prompt(“what is your name?”);

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

var name = prompt(“what is your name?”,”John”);

     当用户输入了信息，然后点击“确定”按钮或者按回车键后，返回值就是用户输入的字符串；如果用户没有在对话框输入信息就点击“确定按钮”或者按回车键，返回值就是prompt()方法设置的第二个可选参数的值（如果有的话）；当用户简单关闭了这个对话框（点击了“取消”或者按了Esc键），返回值就是null。

2.4 根据ID选取元素

     如果想从HTML页面里选择某个特定id的元素，我们只需要把相应的id作为参数来调用document对象的 getElementById()方法，他就会返回特定id的页面元素所对应的DOM对象。例如，

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

     注：innerHTML属性的介绍：innerHTML属性可以读取或者设置特定页面元素内部的HTML内容。假设假设HTML页面包含如下元素：

<div id=”div1”>
     <p> Here is some originaltext. </p>
</div>

如果执行下面的语句

var myDivContents =document.getElementById().innerHTML;

那么myDivContents则包含了如下字符串：Hereis some original text.

2.5 访问浏览器记录

在JavaScript里，浏览器的历史记录是以 window.history对象代表的，它基本上就是访问过的URL列表。这个对象的方法让我们能够使用这个列表，但是不能直接修改这些URL。这个对象只有一个属性，就是他的长度，即history.length。有三个方法，forward()，backward()，go()。

forward()和backward()方法相当于点击浏览器的“前进”和“后退”按钮。

go()方法有一个参数，正数或者负数，可以跳到历史记录列表里的相对位置。如，

history.go(-3);  // 回退3个页面
history.go(2);  // 前进2个页面

这个方法也可以接受字符串作为参数，找到历史记录列表里第一匹配的URL。如，

history.go(“example.com”);  //到达历史记录列表里面第一个包含“example.com”的URL

2.6 location对象

location对象主要是包含当前加载页面的URL信息。

location对象的属性：

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

 利用location对象导航。第一种是直接设置对象的href属性：

location.href= ‘www.baidu.com’;

使用这种方法把用户转移到新页面时，原始页面还保留在浏览器的历史记录里面。第二种是直接用新的URL代替当前页面，即把当前页面从历史记录列表里删除。如：

location.replace(‘www.baidu.com’);

更多内容可以参考  JavaScript手册