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" οnclick="goBack()"/>
    <input type="button" value="forward" οnclick="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" οnclick="goBack()"/>
    <input type="button" value="forward" οnclick="forward()"/>
    <input type="button" value="go" οnclick="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对象的属性
属性内容
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" οnclick="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" οnclick="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="刷新" οnclick="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情绪控



©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页