2021-01-08Bom和Dom

一、Bom

一、location地址栏对象

BOM中location对象提供的方法，可以更改当前用户在浏览器中访问的URL，实现新文档的载入、重载以及替换等功能。

1.URL

统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。
URL是由一串字符组成，这些字符可以是字母，数字和特殊符号。
在URL中，包含了网络协议、服务器的主机名、端口号、URI( Uniform Resource Identifier，资源名称字符串）、参数以及锚点，具体示例如下。

http://www.example.com:80/web/index.html?a=3&b=4#res

在上面的URL中，“http”表示传输数据所使用的协议，
"wwww.example.com"表示要请求的服务器主机名。
“80”表示要请求的端口号，
“/web/index.html”表示要请求的资源，
“a=3&b=4”表示用户传递的参数，
“#res”表示页面内部的锚点。
由于80是Web服务器的默认端口号，因此通’常省略“:80”。
例子2：

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（锚点定位）

2.location对象

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

• 属性
  href：地址信息。
  跳转页面：location.href = “XXX”;
  【注意】location.href需要等页面加载完后再调用。

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

解析查询字符

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

location方法：

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

//2秒后跳往新浪页面
 window.onload = function() {
            function href2() {
                location.href = "https://www.sina.com.cn/";
            }
            setInterval(href2, 2000);
        }

//会显示文件地址信息，两种写法都可以
console.log(window.location.href);
console.log(location.href);

//粘贴进地址栏 ?name=zhangsan&age=18
            var objj = resolveSearch(location.search);
            console.log(location.search);// ?name=zhangsan&age=18  
            console.log(objj);// ["name=zhangsan", "age=18"]

            function resolveSearch(search) {
                // 生成空的对象。
                var obj = {}
                if (search) {
                    // 截取掉第一个字符,并&分开
                    var obj = search1.slice(1).split("&");
                }
                return obj;
            }          

二、navigator浏览器对象

navigator：用于获取浏览器的相关数据，如浏览器的名称、版本等。

console.log(navigator.userAgent);//返回由客户端发送服务器的User-Agent头部的值
console.log(navigator.appName);//返回浏览器的名称
console.log(navigator.platform);//返回运行浏览器的操作系统平台

三、history历史对象

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

• 1.属性
  length:返回历史记录的条数。
• 2.方法：
  back():
  语法：history.back();
  作用:类似浏览器上面的后退键，回退到上一条历史记录中。
  forward():
  语法：history.forward();
  作用:类似浏览器上面的前进键，前进到下一条历史记录中。
  go(n):
  语法：history.go(n); n表示整数
  根据参数的不同设置，完成历史记录的任意跳转
  正整数：表示前进
  0：刷新当前页面
  负整数：表示后退
  作用：跳转n条记录记录。

 window.onload = function() {
        btn.onclick = function() {
            alert(history.length);
        }
    }

	<h1>页面a</h1>
    <a href="b.html">跳转到b页面</a>
    <button id="btn">前进</button>
    <button id="hlen">历史记录条数</button>
    <button id="gobtn">go</button>

btn.onclick = function() {
                history.forward();
            }
            hlen.onclick = function() {
                alert(history.length);
            }
            gobtn.onclick = function() {
                history.go(2);
            }

四、浏览器卷去的高度

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

document.documentElement.scrollTop

获取卷去的高度 使用时页面中必须要有DOCTYPE标签。

document.body.scrollTop

获取卷去的高度，使用时，页面中没有DOCTYPE标签。
兼容写法：

var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

console.log(document.documentElement.scrollTop);
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log(scrollTop);
// console.log(document.body.scrollTop);
// console.log(document.body.scrollLeft);

四、浏览器滚动

可以通过js代码来指定浏览器滚动到什么位置上。
第一种方式：
格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。
第二种方式：

 window.scroll({
            left:200,
            top:600,
            behavior:'smooth' 
        });

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

 window.onload = function() {
        btn.onclick = function() {
            // window.scroll(100, 600);
            window.scroll({
                left: 100,
                top: 600,
                behavior: "smooth"
            });
        }
    }

1.自定义滚动速度

var timer = null;
        window.onload = function() {
            btn.onclick = function() {
                // 设置一个定时器，让页面往上滚动
                timer = setInterval(function() {
                    // 每次减少20px；
                    document.documentElement.scrollTop -= 20;
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer);
                    }
                }, 100)
            }
        }

        // 记录上一次的位置
        var st = 0;
        // 当用户向相反的方向滚动页面，计时器应该停止。
        // 当页面滚动时，执行。
        window.onscroll = function() {
            // 一旦本次滚动时得到的高度比上一次滚动时得到的高度要大时,说明反方向移动,应该停止计时器.
            if (st < document.documentElement.scrollTop) {
                clearInterval(timer);
            }
            st = document.documentElement.scrollTop;
        }

二、Dom

dom:docment object model 文档对象模型
DOM 都是由节点组成的。

• 节点可以分为三大类：
  元素节点（标签节点）：html标签
  文本节点：标签中的文字（空格，换行）
  属性节点：标签的属性

• 学习dom，就是学习对节点的操作
  修改：修改DOM节点的内容。
  遍历：遍历DOM节点下的子节点，方便下一步操作。
  添加：在DOM节点下添加一个子节点。
  删除：将该节点从HTML中删除。也相当于删除了它包含的所有内容以及所有子节点。

• DOM可以做什么：
  1.找对象（元素节点）
  2.设置元素节点的属性值
  3.动态删除和创建节点。
  4.事件的响应触发

<h1>我是一级标题</h1>
<a href="history/a.html">123</a>

 window.onload = function() {
            var h1 = document.getElementsByTagName("h1")[0];
            console.log(h1);
            //动态增加id
            h1.id = "h1";
            h1.onclick = function() {
                alert("你点了我一下");
            }
        }           

动态增加id之后：

点击h1之后的效果：

1.获取节点的方式

1.getElementById
格式：node.getElementById(“ID”)
功能：从node节点开始，通过ID查找节点。
2.getElementsByTagName
通过标签名查找节点
格式：node.getElementsByTagName(“标签名”);
3.getElementsByClassName
通过类名去查找节点
格式：node.getElementsByClassName(“类名”);
4.getElementsByName()
通过name属性值去获取节点
最常用在 表单元素中。
--------------------------------------------------
低版本的IE不支持。
4.querySelector()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回第一个元素。
如果没找到，则返回null
5.querySelectorAll()
格式：node.querySelector(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null
nodelist 伪数组 常规的数组方法对伪数组是无效的 length 【下标】

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

var box1 = document.getElementsByTagName("div")[0];
console.log(box1);

var h1 = document.getElementById("h1");
console.log(h1);

var c3 = document.getElementsByClassName("pp")[0];
console.log(c3);

var c3 = document.getElementsByName("ppp")[0];
console.log(c3);

2.伪数组

在JavaScript中，除了5种原始数据类型之外，其他所有的都是对象，包括函数（Function）。

基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)

• obj[2]与arr[2]的区别
  obj[2]输出’a’，是因为对象就是普通的键值对存取数据
  而arr[2]输出’a’ 则不同，数组是通过索引来存取数据，arr[2]之所以输出’a’，是因为数组arr索引2的位置已经存储了数据

• obj.length与arr.length的区别
  obj.length并不具有数组的特性，并且obj没有保存属性length，那么自然就会输出undefined。
  而对于数组来说，length是数组的一个内置属性，数组会根据索引长度来更改length的值。

• 伪数组定义：
  1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
  2、不具有数组所具有的方法
  伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组，