JavaScript基础(34)_BOM介绍、BOM对象

news2024/9/22 13:44:33

BOM

浏览器对象模型，BOM可以使我们通过JS来操作浏览器。在BOM中为我们提供了一组对象，用来完成对浏览器的操作。

BOM对象

Window：代表整个浏览器的窗口，同时window也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以来识别不同的浏览器。
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面。
History：代表浏览器的历史纪录，可以通过该对象来操作浏览器的历史纪录。由于隐私原因，该对象不能获取到具体的历史纪录，只能操作浏览器向前或向后翻页，而且该操作只是在当次访问时有效。
Screen：代表用户的屏幕信息，通过该对象可以获取到用户的显示器相关信息。

注意：以上BOM对象在浏览器中都是作为window对象的属性保存的，可以作为window对象的属性直接调用。它们也是“全局对象”，也可以直接使用。

Navigator对象
代表当前浏览器的信息，通过该对象可以来识别不同的浏览器。
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。一般我们只会使用userAgent来判断浏览器的信息。
alert(navigator.appName);
alert(navigator.userAgent);

History对象
可以用来操作浏览器向前或向后翻页。
属性：
length:可以获取到访问的链接数量。
forward()：可以跳转下一个页面，作用和浏览器的前进按钮一样。
back()：可以用来回退到上一个页面，作用和浏览器的回退按钮一样。
go()：可以用来跳转到指定的页面。它需要一个整数作为参数：
1：向前跳转一个页面。
2：向前跳转二个页面，以此类推。
-1：向后跳转一个页面。
-2：向后跳转二个页面，以此类推。

Location对象
该对象中封装了浏览器的地址栏的信息。

如果直接打印location，则可以获取到地址栏的信息(当前页面的完整路径)

alert(location);

如果直接将Location属性修改为一个完整的路径，或相对路径，则我们的页面会自动跳转到该路径，并且会生成相应的历史记录。

location = "https://www.baidu.com/";

Location对象的方法：

assign():用来跳转到其他的页面，作用和直接修改location一样。

location.assign("https://www.baidu.com/");

reload():用于重新加载当前页面，作用和刷新按钮一样。如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面。

location.reload(true);

replace():可以使用一个新的页面替换当前页面，调用完毕也会跳转页面。不会生成历史纪录，不能使用回退按钮回退。

location.replace("https://www.baidu.com/");

案例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>BOM对象之跳转页面</title>
    <script>
        window.onload = function(){
            var forward = document.getElementById("forward");
            forward.onclick = function(){
                history.forward();
            }
            var go = document.getElementById("go");
            go.onclick = function(){
                history.go(1);
            }
        }
    </script>
</head>
<body>
    <a href="./键盘事件.html">点击进入键盘事件页面</a>
<br>
<br>
    <button id="forward">下一页</button>
    <button id="go">转到下一页</button> 
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script>
        window.onload = function(){
            var input = document.getElementsByTagName("input");
            document.onkeydown = function(event){
                event = event || window.event;
                // 不许输入数字
                if(event.keyCode >= 48 && event.keyCode <= 57){
                    return false;
                }
            }
            var back = document.getElementById("back");
            back.onclick = function(){
                history.back();
            }
        }
    </script>
</head>
<body>
    <input type="text">
    <button id="back">上一页</button>
</body>
</html>