JavaScript 的BOM基本操作（location、history、navigator等）

最新推荐文章于 2022-06-30 23:17:56 发布

sleepwalker_1992

最新推荐文章于 2022-06-30 23:17:56 发布

阅读量549

点赞数 1

分类专栏： JavaScript 文章标签： BOM history location navigator

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80782155

版权

JavaScript 专栏收录该内容

57 篇文章 2 订阅

订阅专栏

1、JavaScript分三个部分：

（1）ECMAScript标准--------基本语法

（2）DOM---------Document Object Model 文档对象模型，操作页面元素的

（3）BOM---------Browser Object Model 浏览器对象模型，操作浏览器的

2、基本介绍：

（1）所有浏览器都支持 window 对象。它表示浏览器窗口。

（2）浏览器中顶级对象：window。页面中顶级对象：document

（3）页面中的所有内容都是属于浏览器的，因此，页面中的所有内容都是window的，window是可以省略的。甚至 HTML DOM 的 document 也是 window 对象的属性之一

（4）所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

（5）全局变量是 window 对象的属性。全局函数是 window 对象的方法。

3、对话框

以下标签开发不用，要用到弹窗、对话框的时候自己写。

警告框：alert(); 一个按钮，确定。测试可以使用。

提示框：prompt(); 提示输入某个值

确认框：confirm(); 两个按钮，一个确定，一个取消。

4、页面加载

页面加载完毕后，再去触发js事件。否则页面还没有加载出来，就触发事件，有的情况下会报错。

页面加载包括：页面中的所有内容，标签，属性，文本，包括外部引入的js文件。

保证页面加载完成后的触发事件，两种方式：

第一种：

window.οnlοad=function(){

// js内容

};

第二种：js文件在body的下部引入。

5、location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hash 属性返回地址栏上#后面的内容

location.host 属性返回主机的域名及端口号

location.hostname 属性返回 web 主机的域名

location.pathname 属性返回当前页面的相对路径，即URL 的路径名

location.port 属性返回 web 主机的端口号（80 或 443）

location.protocol 属性返回所使用的 web 协议（http:// 或 https://）

location.search 属性返回搜索的内容，就是？后面的内容

location.href 属性返回当前页面的 URL。

location.assign() 方法加载新的文档。

 //设置跳转的页面地址
location.href="http://www.jd.com";    //属性，有历史记录，可以返回
location.assign("http://www.jd.com");    //方法，有历史记录，可以返回
location.replace("http://www.jd.com");    //方法，没有历史记录，不能返回
location.reload();    //方法，重新加载，即刷新页面

点击按钮，跳转到新的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
                //设置跳转的页面地址
                location.href="http://www.jd.com";//属性，有历史记录，可以返回
                // location.assign("http://www.jd.com");//方法，有历史记录，可以返回
                // location.replace("http://www.jd.com");//方法，没有历史记录，不能返回
                // location.reload();//重新加载，即刷新页面
            };
        };
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>