DOM对象和内置对象（中）
前言
在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window，还有它的一个子对象
document。接下来会介绍它们的一些实用的对象和方法，如：
1、alert()、prompt()和confirm()与用户交互。
2、利用getElementById()选择页面元素。
3、使用innerHTML()访问HTML内容。
4、使用浏览器的history对象。
5、通过navigator对象获得浏览器信息。
6、利用Date对象操作日期和时间。
7、利用Math对象简化计算。
.1 访问浏览器历史纪录
在JavaScript里，浏览器的历史纪录是以window.history对象代表的，它基本上就是访问过的URL列表，我们看
以下范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function goBack(){
window.history.back();
}
function forward(){
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="back" onclick="goBack()"/>
<input type="button" value="forward" onclick="forward()"/>
</body>
</html>
以上程序中通过window.history.forward()和window.history.back()实现浏览器的“前进”和“后退”。通过
window.history.forward()前进之前进入百度界面，通过window.history.back()回退到之前的界面。
效果如下：
window.history有个go()方法，它有一个参数是正的或负的整数，可以调到历史纪录列表里的相对位置，如以下范
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function goBack(){
window.history.back();
}
function forward(){
window.history.forward();
}
function go(){
window.history.go(-1);
}
</script>
</head>
<body>
<input type="button" value="back" onclick="goBack()"/>
<input type="button" value="forward" onclick="forward()"/>
<input type="button" value="go" onclick="go()"/>
</body>
</html>
以上程序多加了一个按钮go，点击调用go()方法，在go()方法中使用了window.history.go(-1)方法，说明回退到第一个
按钮，比如上一个页面是hao123主页，当前页面是三个按钮的界面，点击go按钮，传入go()方法-1值，回退到第一个
按钮，同样的如果是正数，如1则表示前进1个页面。
效果如下：
go()方法也可以接受字符串作为参数，作用是找到历史纪录列表里第一个匹配的URL。
.2 使用location对象
location对象包含当前加载页面的URL信息。页面的URL是由多个部分组成的：
[协议]//[主机名]:[端口]/[路径][搜索][hash]
以下是一个URL范例：
http://www.example.com:8080/tools/display.php?section=435#list
location对象的一系列属性包含了URL各个部分的数据，如下表：
| 属性 | 内容 |
| location.href | 'http://www.example.com:8080/tools/display.php?section=435#list' |
| location.protocol | 'http:' |
| location.host | 'www.example.com:8080' |
| location.hostname | 'www.example.com' |
| location.port | '8080' |
| location..pathname | '/tools/display.php' |
| location.search | '?section=435' |
| location.hash | '#list' |
2.1 使用location对象导航
利用location对象有两种方式可以帮助用户导航至新页面。
第一种，如以下范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function setHref() {
location.href='code02.html';
}
</script>
</head>
<body>
<input type="button" value="location" onclick="setHref()"/>
</body>
</html>
以上代码通过location.href转移到新页面，这里跳转到本地的code02.html页面，code02页面只是显示一个按钮，点击
弹出对话框，原始页面还保留在浏览器的历史纪录里，用户可以利用浏览器的“后退”按钮方便地返回到以前的页面。
效果如下：
第二种，如以下范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function setReplace() {
location.replace('code02.html');
}
</script>
</head>
<body>
<input type="button" value="replace" onclick="setReplace()"/>
</body>
</html>
通过location.replace()方法，可以把当前页面从历史纪录列表里删除，也就是无法通过浏览器的“前进”或“后退”，进入
之前的页面。效果如下：
2.2 刷新页面
如果要在浏览器里重新加载当前页面，我们可以使用reload()方法，如以下范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function showReload(){
location.reload(true);
}
</script>
</head>
<body>
<input type="button" value="刷新" onclick="showReload()"/>
</body>
</html>
效果如下：
注意：如果使用没有参数的reload()方法，当浏览器的缓冲里保存了当前页面时，就会加载缓冲的内容。为避免这
种情况的发生，确保从服务器获得页面数据，可以在调用reload()方法时，添加参数true。
.3 浏览器信息：navigator对象
location对象保存了浏览器当前URL的信息，而navigator对象包含了浏览器程序本身的数据。
注意：虽然浏览器的兼容性以及比以前几年好多了，当有时我们还是需要了解用户浏览器的功能，而这时使用
navigator对象几乎就是一个错误的选择，这边只是介绍navigator对象的用法。
范例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
border: 1px solid greenyellow; padding: 3px 5px;}
</style>
</head>
<body>
<script>
document.write("<table>");
document.write("<tr/><td>appName</td><td>"+navigator.appName+"</td></tr>");
document.write("<tr/><td>appCodeName</td><td>"+navigator.appCodeName+"</td></tr>");
document.write("<tr/><td>appVersion</td><td>"+navigator.appVersion+"</td></tr>");
document.write("<tr/><td>language</td><td>"+navigator.language+"</td></tr>");
document.write("<tr/><td>cookieEnabled</td><td>"+navigator.cookieEnabled+"</td></tr>");
document.write("<tr/><td>cpuClass</td><td>"+navigator.cpuClass+"</td></tr>");
document.write("<tr/><td>onLine</td><td>"+navigator.onLine+"</td></tr>");
document.write("<tr/><td>platform</td><td>"+navigator.platform+"</td></tr>");
document.write("<tr/><td>No of Plugins</td><td>"+navigator.plugins.length+"</td></tr>");
document.write("</table>");
</script>
</body>
</html>
效果如下：
-------------------------------------------------------------------------------------------------------------------------------------------------------
转载请注明出处：http://blog.csdn.net/hai_qing_xu_kong/article/details/48214617情绪控