js中浏览器网址的相关信息：location；navigator；history。浏览器的滚动。

最新推荐文章于 2023-11-11 18:21:22 发布

三岁九年

最新推荐文章于 2023-11-11 18:21:22 发布

阅读量340

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/xh0112/article/details/112381041

版权

JS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了JavaScript中的location对象，包括href、search等属性及assign、replace、reload方法。接着讲解navigator对象，提供浏览器客户端信息。history对象用于管理窗口历史记录，包括back、forward和go方法。还讨论了浏览器卷去的高宽和滚动操作，以及DOM节点操作的基本概念和常用方法如getElementById、getElementsByTagName等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

location对象

location对象：
里面存储了和网页地址所有内容有关的信息。

https://baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525?fr=aladdin#2_1
http https 传输协议
www.baidu.com 域名
?fr=aladdin 查询字符
#2_1 hash（锚点定位）

location对象属性：
href：地址信息。
跳转页面：location.href = “XXX”;
search：查询字符串一般是用于传输数据，需要进行解析。
split(分割字符串)
返回值：分割好的字符串组成的数组：苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]
解析查询字符
1.“ ”
2.?name=zhangsan&age=18
步骤：

需要准备一个函数进行解析，这个函数还需要一个参数。
参数：要解析的字符串
开始解析
1.判断如果为空字符串，直接返回空对象。
2.如果不是空字符串，解析字符串，并将结果放入对象中。
（1）截取掉第一个字符。
（2）剩余字符按照&进行分割，得到一个数组。
（3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
（4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
（5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
（6）返回对象。

方法：
assign()：改变浏览器地址栏中的地址，并记录到历史中。
【注意】设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。
reload() 重新加载 F5
reload(true) 强制加载，不适用缓存。

（1）地址栏上#及后面的内容
    console.log(window.location.hash);
（2）主机名及端口号
    console.log(window.location.host);
（3）主机名
    console.log(window.location.hostname);
（4）文件的路径---相对路径
    console.log(window.location.pathname);
（5）端口号
    console.log(window.location.port);
（6）协议
    console.log(window.location.protocol);
（7）搜索的内容
    console.log(window.location.search);
 
（8）设置跳转的页面的地址
    location.href="http://www.jd.com";

补充：

Location对象的属性	返回值
location.href	获取或者设置url
location.host	返回主机(域名)
location.port	返回端口号，若无则返回空
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段#后面内容常见于链接锚点

案例说明
一秒后自动进行跳转页面：

    <script>
        // 延时跳转页面
        window.onload = function skip() {
            setTimeout(hear, 1000);
        }

        function hear() {
            location.href = "https://www.baidu.com";
        }
    </script>

split分割好的字符串分成数组

       window.onload = function() {
            var str2 = "苏轼|辛弃疾|李商隐";
            console.log(str2.split("|"));
        }

在这里插入图片描述

navigator

navigator：获取浏览器客户端的一些信息。

    <script>
        console.log(navigator.userAgent);
        console.log(navigator.appName);
        console.log(navigator.platform);
    </script>

在这里插入图片描述

history

history:保存当前窗口的历史记录，里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录
1.属性
length:返回历史记录的条数。
2.方法：

back():
语法：history.back();
作用:类似浏览器上面的后退键，回退到上一条历史记录中。
forward():
语法：history.forward();
作用:类似浏览器上面的前进键，前进到下一条历史记录中。
go(n):
语法：history.go(n); n表示整数
正整数：表示前进
0：刷新当前页面
负整数：表示后退
作用：跳转n条记录记录。

示例：
设置三个网页让他们进行互相跳转。
在这里插入图片描述

a页面中的属性

    <script>
        window.onload= function(){
            // 前进
            btn.onclick = function(){
                history.forward();
            }
            hlen.onclick = function(){
                alert(history.length);
            }
            gobtn.onclick = function(){
                history.go(2);
            }
            
        }
    </script>
</head>
<body>
    <h1>我是a页面</h1>
    <a href="b.html">跳转到b页面</a>
    <button id="btn">前进</button>
    <button id="hlen">历史记录条数</button>
    <button id="gobtn">go</button>
</body>

在这里插入图片描述
b页面的属性：

    <script>
        window.onload= function(){
            // 前进
            btn2.onclick = function(){
                history.forward();
            }
            // 后退
            btn.onclick = function(){
                history.back();
            }
            hlen.onclick = function(){
                alert(history.length);
            }
            gobtn.onclick = function(){
                history.go(-1);
            }
            
        }
    </script>
</head>
<body>
    <h1>我是b页面</h1>
    <a href="c.html">跳转到c页面</a>
    //加了一个后退
    <button id="btn">后退</button>
    <button id="btn2">前进</button>
    <button id="hlen">历史记录条数</button>
    <button id="gobtn">go</button>
</body>

c页面的属性：

    <script>
        window.onload= function(){
            
            // 后退
            btn.onclick = function(){
                history.back();
            }
            hlen.onclick = function(){
                alert(history.length);
            }
            
        }
    </script>
</head>
<body>
    <h1>我是c页面</h1>
    <button id="btn">后退</button>
    <button id="hlen">历史记录条数</button>

在这里插入图片描述

浏览器卷去的高宽

当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。
我们管上面隐藏的叫做卷去的高度
左边隐藏的宽，叫做卷去的宽度。

document.documentElement.scrollTop
获取卷去的高度使用时页面中必须要有DOCTYPE标签。
document.body.scrollTop
获取卷去的高度，使用时，页面中没有DOCTYPE标签。
兼容写法：
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

示例：
先给页面设置个高度。

    <style>
        body{
            width: 3000px;
            height: 2000px;
        }
    </style>
    <script>
         window.onload = function(){
            //  卷去的高度
            // console.log(document.documentElement.scrollTop);
            //兼容写法
            var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
            //  console.log(document.body.scrollTop);
            // //  卷去的宽度
            //  console.log(document.body.scrollLeft);
            
         }
     </script>

在这里插入图片描述

浏览器滚动

可以通过js代码来指定浏览器滚动到什么位置上。

第一种方式：
格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。
第二种方式：
window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。

可以给网页页面添加按钮设置点击事件让其进行移动：

<script>

    window.onload = function(){
        //id是bth的属性设置点击事件
        btn.onclick = function(){
            window.scroll({
                // left:200,
                top:0,
                behavior:'smooth'
            });
        }
    }
</script>

这里设置一下网页内容，达到一定的高度，在底部设置按钮。

在这里插入图片描述

平滑移动到top为0的属性。

这里没有让他设置移动的时间，中间也不会停止这里我们可以自定义设置一下滚动的速度，

自定义滚动速度：

先设置一个按钮id属性
在这里插入图片描述
代码如下：

    <script>
        // 设置空参数用于停止定时器
        var timer = null;
        // 自定义滚动时间速度
        window.onload = function() {
            // 点击事件
            tops.onclick = function() {
                    // 设置定时器
                    timer = setInterval(function() {
                        // 每次减少50px；
                        document.documentElement.scrollTop -= 50;
                        // 停止定时器
                        if (document.documentElement.scrollTop <= 0) {
                            clearInterval(timer);
                        }
                    }, 50);
                }
            //看到当前浏览器卷去的高度 
            console.log(document.documentElement.scrollTop);
        }
        // 记录上一次的位置
        var sk = 0;
        // onscroll当浏览者拖动滚动条的时运行此代码
        window.onscroll = function() {
            if (sk < document.documentElement.scrollTop) {
                // 当浏览者滑动后小于定时器的高度则停止定时器
                clearInterval(timer);
            }
            sk = document.documentElement.scrollTop;
        }
    </script>

一旦本次滚动时得到的高度比上一次滚动时得到的高度要大时,说明反方向移动,应该停止计时器.

DOM

DOM 都是由节点组成的。

节点可以分为三大类：
元素节点 html标签
文本节点标签中的文字（空格，换行）
属性节点标签的属性
学习dom，就是学习对节点的操作
修改：修改DOM节点的内容。
遍历：遍历DOM节点下的子节点，方便下一步操作。
添加：在DOM节点下添加一个子节点。
删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。
DOM可以做什么：
1.找对象（元素节点）
2.设置元素节点的属性值、
3。动态删除和创建节点。
4.事件的响应触发

获取结点的方式

getElementById
格式：node.getElementById(“ID”)
功能：从node节点开始，通过ID查找节点。
getElementsByTagName
通过标签名查找节点
格式：node.getElementsByTagName(“标签名”);
getElementsByClassName
通过类名去查找节点
格式：node.getElementsByClassName(“类名”);
getElementsByName()
通过name属性值去获取节点
最常用在表单元素中。

以下的低版本IE不支持

querySelector()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回第一个元素。
如果没找到，则返回null
querySelectorAll()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null

示例：

    <script>
        window.onload = function() {
            // 通过id获取节点
            var h1 = document.getElementById("doc");
            // 通过标签下标获取节点
            var pp = document.getElementsByTagName('div')[0];
            // 通过类的下标获取节点
            var dd = document.getElementsByClassName('dd')[0];
            // 获取css选择器的所有元素
            var doc = document.querySelectorAll('.doc');
            console.log(doc);

        }
    </script>

</head>

<body>
    <div id="box">
        <h1 id="doc">h1标签</h1>
        <div class="dd">div小标签</div>
        <p class="doc">p标签</p>
        <span class="doc">span标签</span>
    </div>
</body>

// 获取css选择器的所有元素
            var doc = document.querySelectorAll('.doc');
            console.log(doc);

在这里插入图片描述