location对象、history、浏览器卷去的宽和高、DOM

location对象

一般的一个页面地址信息有：
eg：
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：地址信息。

扫描二维码关注公众号，回复： 12790902 查看本文章

跳转页面：location.href = “XXX”;

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

【注意】location.href需要等页面加载完后再调用。

search：查询字符串一般是用于传输数据，需要进行解析。

split(分割字符串)

返回值：分割好的字符串组成的数组：苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]

解析查询字符
1.""
2.?name=zhangsan&age=18

步骤：

1.需要准备一个函数进行解析，这个函数还需要一个参数。

参数：要解析的字符串

2.开始解析

1.判断如果为空字符串，直接返回空对象。

2.如果不是空字符串，解析字符串，并将结果放入对象中。

（1）截取掉第一个字符。

（2）剩余字符按照&进行分割，得到一个数组。

（3）遍历数组，得到 “属性名=属性值”这样格式的字符串。

（4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。

（5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];

（6）返回对象。

方法：

assign()：改变浏览器地址栏中的地址，并记录到历史中。

【注意】设置location.href 就会调用assign方法。

replace() 替换浏览器地址栏中的地址。

reload() 重新加载 F5

reload(true) 强制加载，不适用缓存。

navigator：

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

history

history:保存当前窗口的历史记录，里面包含了一些操作历史记录的属性和方法
【注意】不是浏览器中的历史记录

1.属性

length:返回历史记录的条数。

 <script>
        window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                // 跳转地址
                location.href = "https://www.baidu.com";
                // 浏览器历史记录，记录打开了多少
                alert(history.length);
            }
        }
    </script>

2.方法：

back():

语法：history.back();

作用:类似浏览器上面的后退键，回退到上一条历史记录中。

forward():

语法：history.forward();

作用:类似浏览器上面的前进键，前进到下一条历史记录中。

go(n):

语法：history.go(n); n表示整数

正整数：表示前进

0：刷新当前页面

负整数：表示后退

作用：跳转n条记录记录。

  <script>
        window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                 // 类似浏览器上面的前进键，前进到下一条历史记录中。
                history.forward();
            }
            btn2.onclick = function() {
    
    
                // 类似浏览器上面的后退键，回退到上一条历史记录中。
                history.back();
            }
            but3.onclick = function() {
    
    
				//浏览器打开历史记录的数
                alert(history.length);
            }
            god.onclick = function() {
    
    
            //直接跳转到历史记录的第几个页面
                history.go(2);
            }
        }
    </script>

浏览器卷去的宽和高

当页面的宽高比较大时，会出现滚动条，一部分内容会随着页面的滚动而被隐藏。

我们管上面隐藏的叫做卷去的高度

左边隐藏的宽，叫做卷去的宽度。
在这里插入图片描述

浏览器滚动

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

第一种方式：

格式：window.scroll(横坐标，纵坐标)；

【注意】不需要书写单位，瞬间定位。

    window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                // 横向移动400，纵向移动600
                window.scroll(400, 600);
            }

        }

第二种方式：
eg：
window.scroll({
left:200,
top:600,
behavior:‘smooth’
});

behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。

  window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                window.scroll({
    
    
                    left: 400,
                    top: 600,
                    // 平滑滚动页面
                    behavior: 'smooth'
                })


            }
        }

自定义滚动速度

这是一个完整的自定义滚动速度案例

 body {
    
    
            width: 3000px;
            height: 2000px;
        }

  <script>
        var timer = null; //先设置滚动距离为空
        window.onload = function() {
    
    
            btn.onclick = function() {
    
     //设置一个点击时间，当点击“btn”这个按钮时，执行下面的代码
                timer = setInterval(function() {
    
     //设定滚动时间的 函数
                    document.documentElement.scrollTop -= 20; //每一次滚动的距离
                    if (document.documentElement.scrollTop <= 0) {
    
     // 如果滚动的距离小于或者等于0的时候，停止滚动
                        clearInterval(timer); //  清除滚动距离
                    }
                }, 50);
            }

        }
        var str = 0; //定义一个本次滚动的距离
        window.onscroll = function() {
    
    
            if (str < document.documentElement.scrollTop) {
    
     //当本次滚动距离小于上一次的滚动距离时，停止滚动
                clearInterval(timer);
            }
            str = document.documentElement.scrollTop; //本次滚动的距离
        }
    </script>

<body>

    <p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
<!-- ........   下面还有很多行代码 -->
    <button id="btn">滚动</button>
</body>

DOM

dom:docment object model 文档对象模型

DOM 都是由节点组成的。

节点可以分为三大类：

1、元素节点 html标签

2、文本节点标签中的文字

3、属性节点标签的属性

学习dom，就是学习对节点的操作

修改：修改DOM节点的内容。

遍历：遍历DOM节点下的子节点，方便下一步操作。

添加：在DOM节点下添加一个子节点。

删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。

DOM可以做什么：

1.找对象（元素节点）

2.设置元素节点的属性值、

3。动态删除和创建节点。

4.事件的响应触发

在这里插入图片描述

获取节点的方式

1.getElementById

格式：node.getElementById(“ID”)

功能：从node节点开始，通过ID查找节点。

2.getElementsByTagName

通过标签名查找节点

格式：node.getElementsByTagName(“标签名”);

3.getElementsByClassName

通过类名去查找节点

格式：node.getElementsByClassName(“类名”);

4.getElementsByName()

通过name属性值去获取节点

最常用在表单元素中。
--------------------------------------------------

低版本的IE不支持。

5.querySelector()

格式：node.querySelector(css选择器)

返回值：

如果找到选择器匹配的元素，则返回第一个元素。

如果没找到，则返回null

6.querySelectorAll()

格式：node.querySelector(css选择器)

返回值：

如果找到选择器匹配的元素，则返回全部。

如果没找到，则返回null

nodelist 伪数组常规的数组方法对伪数组是无效的 length 【下标】

【注意】嵌套获取节点时，不要使用getElementById。

 <script>
        window.onload = function() {
    
    
            // 通过ID获取页面信息
            var hh = document.getElementById("h3")
            // 通过标签获取信息
            var hh = document.getElementsByTagName("p")[0];

            // 通过class类名获取标签信息
            var hh = document.getElementsByClassName("pp")[0];

            // 通过css3的类选择器获取信息，获取的是第一个p标签信息
            var hh = document.querySelector(".ppp");

            // 通过css3的类选择器获取信息，获取的是同一个类名全部p标签信息
            var hh = document.querySelectorAll(".ppp");

            var box = document.getElementsByClassName("p1")[0];
            var p1 = box.getElementById(p1);
            console.log(p1);
        }
    </script>

<body>
    <div id="box">
        <h1 id="h3">我是h1标签 </h1>
        <div>
            <p id="p1">我是p标签</p>
        </div>
        <p class="pp">我是p2标签</p>
        <p class="ppp">我是p3标签</p>
        <p class="ppp">我是p3标签</p>
        <p class="ppp">我是p3标签</p>

    </div>
</body>