（26）2021-01-08（BOM（window）和Dom）

最新推荐文章于 2022-12-23 21:17:23 发布

weixin_53125613

最新推荐文章于 2022-12-23 21:17:23 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/weixin_53125613/article/details/112360493

版权

BOM（window）和Dom

一、 BOM

1、 BOM介绍

JavaScript 由三大部分组成
ES：语法标准，函数，对象。
BOM：borwser object model 浏览器对象模型操作浏览器部分功能的
DOM：docment object model 文档对象类型，操作网页上的元素。
常见的BOM对象：
1.window 代表整个浏览器窗口，window对象是BOM中的顶级对象。
2.Navigator 表示浏览器的一些信息。
3.Location 表示浏览器当前的地址信息。
4.History 浏览器的历史记录信息。
5.Screen 表示用户的屏幕信息。

2、 window对象

1.是JavaScript中的顶级对象。
2.全局变量，自定义函数都属于window的属性或方法。
3.我们在使用window对象下的属性或方法时，可以省略window.

window对象的常用方法：

（1）弹出系统对话框。

(1) alert()；弹出框
(2) prompt()；弹出输入框
(3) confirm()；弹出确认对话框

<script>
        var flag = confirm("请确认");
        if (flag) {
            alert("您点击了确认");
        } else {
            alert("您点击了取消");
        }
 </script>

在这里插入图片描述

（2）打开新窗口window.open

window.open(“url,target,param”);
window.open(“地址”);—打开新窗口
url :要打开的地址
target:新窗口的位置。 _blank,_self,_parent(父框架下)
param:新窗口的一些设置。
name：新窗口的名字，可以为空
【注意】name需要写在target前面。
返回值：新窗口的句柄。

（3）关闭窗口

window.close(“地址”);—关闭当前窗口
open返回值.close(); 关闭新窗口
例如：
newOpen = window.open(“地址”);
newOpen.close(“地址”);----关闭新窗口
【注意】地址中可以设置：要打开的新网页的网址url，网址名称，宽、高、行、列、是否可以滚动。

    <title>Document</title>
    <script>
        var newOpen = null;

        function func() {
            // url,name,宽、高、位置（left、top）,
            newOpen = window.open("https://www.baidu.com", "baidu", 
            "width=400,height=400,top=200,left=300,scrollbars = yes");
        }

        function closeWindows() {
            //关闭打开的新窗口
            newOpen.close();
            
            //关闭当前窗口
            // window.close();
        }
    </script>
</head>

<body>
    <button onclick="func()">打开新窗口</button>
    <button onclick="closeWindows()">关闭窗口</button>
</body>

在这里插入图片描述

3、代码在线编辑器

    <title>Document</title>
    <script>
        // 法一：会打开一个新的窗口。
        function windowHandle() {
            // window.open()表示打开一个新的窗口
            var opener = window.open();
            // 如果是获取html中的内容，用document.getElementById("code").innerHTML
            // 如果是获取html中需要用户输入的内容，用document.getElementById("code").value
            var code = document.getElementById("code").value;
            //在打开的新页面输出用户输入的内容
            opener.document.write(code);
        }


        // 法二：会在当前页面打开窗口（不用记）
        // function windowHandle() {
        //     var code = document.getElementById("code").value;
        //     document.write(code);
        // }
    </script>
</head>

<body>
    <textarea id="code" cols="30" rows="10"></textarea>
    <button onclick="windowHandle()">运行</button>
</body>

在这里插入图片描述

4、 location

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

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

（1）属性 href
href：地址信息。
跳转页面：location.href = “XXX”;

<script>
       // (1)location.href="地址(网络地址或文件地址)";-----跳转页面
       //2s后跳转到小米页面
        window.onload = function() {
            setInterval(href2, 2000);
        }
        function href2() {
            location.href = "https://www.mi.com/";
        }
 </script>

<script>
         //(2)console.log(location.href);--------在控制台上输出本html文档的本地文件地址。
         console.log(location.href);
 </script>

（2）属性 search

split(分割字符串)
返回值：分割好的字符串组成的数组：苏轼|辛弃疾|李商隐 =》[苏轼,辛弃疾,李商隐]
search：查询字符串一般是用于传输数据，需要进行解析。
解析查询字符
1.""
2.?name=zhangsan&age=18
步骤：
1.需要准备一个函数进行解析，这个函数还需要一个参数。
参数：要解析的字符串
2.开始解析
（2.1）判断如果为空字符串，直接返回空对象。
（2.2）如果不是空字符串，解析字符串，并将结果放入对象中。
（1）截取掉第一个字符。
（2）剩余字符按照&进行分割，得到一个数组。
（3）遍历数组，得到 “属性名=属性值”这样格式的字符串。
（4）对每一个字符串，按照=分割，得到一个属性和属性值组成的数组。
（5）将属性名和属性值赋值给对象 //obj[t[0]]=t[1];
（6）返回对象。
方法：
assign()：改变浏览器地址栏中的地址，并记录到历史中。
【注意】设置location.href 就会调用assign方法。
replace() 替换浏览器地址栏中的地址。
reload() 重新加载 F5
reload(true) 强制加载，不适用缓存。

//运行之后，在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第一步：删除第一个元素?
<script>
 window.onload = function() {
            console.log(location.search);
            var objj = resolverSearch(location.search);
            console.log(objj);

            // ?name=zhangsan&age=18    (字符串)
            function resolverSearch(search) {
                // 生成空的对象。
                var obj = {};
                if (search) {
                //步骤1：删除第一个元素?
                    var obj = search.slice(1);
                }
                return obj;
            }
        }
</script>

运行之后，在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18 ，刷新。
控制台上会输出1、粘贴的字符串。2、删除带第一个元素?之后的字符串。

在这里插入图片描述

//运行之后，在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第二步：剩余的字符串从&隔开
<script>
 window.onload = function() {
            console.log(location.search);
            var objj = resolverSearch(location.search);
            console.log(objj);

            // ?name=zhangsan&age=18    (字符串)
            function resolverSearch(search) {
                // 生成空的对象。
                var obj = {};
                if (search) {
                 //步骤1：删除第一个元素?
                    var obj = search.slice(1);
                   //步骤2：剩余的字符串从&隔开
                    obj = search.slice(1).split("&");
                }
                return obj;
            }
        }
</script>
输出结果：

在这里插入图片描述

//运行之后，在地址栏的网址后面粘贴进字符串 ?name=zhangsan&age=18
//解析字符串第三步：(代码全)  遍历数组中元素、使数组中的元素从=隔开、获取对象obj的元素
<script>
window.onload = function() {
            console.log(location.search);
            var objj = resolverSearch(location.search);
            console.log(objj);
            alert(objj.name);
            alert(objj.age);


            // ?name=zhangsan&age=18    (字符串)
            function resolverSearch(search) {
                // 生成空的对象。
                var obj = {};
                if (search) {
                    //步骤1：删除第一个元素?
                    //步骤2：剩余的字符串从&隔开
                    var temp = search.slice(1).split("&");
                    //步骤3：（1）遍历数组中元素
                    for (var key in temp) {
                        //步骤3：（2）使数组中的元素从=隔开,如["name=zhangsan" ,"age=18"]                       
                        var t = temp[key].split("=");
                        //t=["name","zhangsan"]
                        //t=["age","18"]
                        //步骤3：（2）获取对象obj的元素：对于t=["name","zhangsan"]，
                        //则t[0]=="name",t[1]=="zhangsan"，即"name"="zhangsan"
                        obj[t[0]] = t[1];
                    }
                }
                return obj;
            }
        }
</script>
输出结果：

在这里插入图片描述

5、navigator

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

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

在这里插入图片描述

6、 history

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

1.属性：
length:返回历史记录的条数。
语法：history.length;

2.方法：
（1） back():

         语法：history.back();
         作用:类似浏览器上面的后退键，回退到上一条历史记录中。

（2） forward():

         语法：history.forward();
         作用:类似浏览器上面的前进键，前进到下一条历史记录中。

（3） go(n):

         语法：history.go(n); n表示整数 
         正整数：表示前进
         0：刷新当前页面
         负整数：表示后退
         作用：跳转n条历史记录。

    <title>Document</title>
    <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>

    <title>Document</title>
    <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>

   <title>Document</title>
    <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>
</body>

在这里插入图片描述

7、浏览器卷曲的高宽

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

（1）获取卷去的高度/宽度使用时页面中必须要有DOCTYPE标签。
document.documentElement.scrollTop
document.documentElement.scrollLeft

（2）获取卷去的高度或宽度，使用时，页面中没有DOCTYPE标签。
document.body.scrollTop
document.body.scrollLeft

（3）兼容写法：
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;

   <title>Document</title>
    <style>
        body {
            width: 3000px;
            height: 2000px;
        }
    </style>
    <script>
        window.onload = function() {
            // 方法一
            //  卷去的高度
            console.log(document.documentElement.scrollTop);
            //  卷去的宽度
            console.log(document.documentElement.scrollLeft);


            //方法二
            // 卷去的高度
            // console.log(document.body.scrollTop);
            //  卷去的宽度
            // console.log(document.body.scrollLeft);

            // 方法三  兼容写法
            // 卷去的高度
            // var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

        }
    </script>

    //点F12，滑动横向和纵向滚动条，刷新页面。控制台上会输出卷去的高度和宽度。

8、浏览器滚动

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

第一种方式：
格式：window.scroll(横坐标，纵坐标)；
【注意】不需要书写单位，瞬间定位。

 <script>
 // 方式一
        window.onload = function() {
            btn.onclick = function() {
                window.scroll(200, 600);
            }
        }
</script>

第二种方式：
格式： window.scroll({
left:200,
top:600,
behavior:‘smooth’
});
behavior:可以决定滚动的方式，默认为 auto 瞬间定位，可以设置为smooth 平滑过渡。

 <script>

        // 方式二
        window.onload = function() {
            btn.onclick = function() {
                window.scroll({
                    top: 600,
                    // left:200,
                    behavior: "smooth",
                })
            }
        }
</script>

示例：

    <title>Document</title>
    <style>
        body {
            width: 3000px;
        }
    </style>
    <script>
        // 方式一
        // window.onload = function() {
        //     btn.onclick = function() {
        //         window.scroll(200, 600);
        //     }
        // }

        // 方式二
        window.onload = function() {
            btn.onclick = function() {
                window.scroll({
                    top: 600,
                    // left:200,
                    behavior: "smooth",
                })
            }
        }
    </script>

</head>

<body>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <button id="btn">滚动</button>
</body>

9、自定义滚动的速度

<script>
        var timer = null;
        window.onload = function() {
            btn.onclick = function() {
                // 设置一个定时器，让页面往上滚动
                timer = setInterval(function() {
                    // 每次减少20px；
                    document.documentElement.scrollTop -= 20;
                    if (document.documentElement.scrollTop <= 0) {
                        clearInterval(timer);
                    }
                }, 50);
            }
        }
        // 记录上一次的位置
        var st = 0;
        // 当用户向相反的方向滚动页面，计时器应该停止。
        // 当页面滚动时，执行。
        window.onscroll = function() {
            // 一旦本次滚动时得到的高度比上一次滚动时得到的高度要大时,说明反方向移动,应该停止计时器.
            if (st < document.documentElement.scrollTop) {
                clearInterval(timer);
            }
            st = document.documentElement.scrollTop;
        }
</script>

二、DOM

1、DOM介绍

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

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

    <title>Document</title>
     <script>
         window.onload = function(){
         //获取html文档中的第一个h1标签
            var h1 = document.getElementsByTagName("h1")[0];
            console.log(h1);
            //动态给h1标签添加id
            h1.id="h1";
            //给h1标签添加点击事件
            h1.onclick = function(){
                alert("你点了我一下");
            }
         }
     </script>
</head>
<body>
    <h1>我是一级标题</h1>
    <a href="history/a.html">123</a>
</body>

在这里插入图片描述

2、获取节点的方式

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.querySelectorAll(css选择器)
返回值：
如果找到选择器匹配的元素，则返回全部。
如果没找到，则返回null

nodelist 伪数组常规的数组方法对伪数组是无效的 length 【下标】
【注意】
直接获取节点时，都可以使用。
嵌套获取节点时，不能使用getElementById()、不能使用getElementsByName()，

 <title>Document</title>
    <script>
        window.onload = function() {
            //一、获取最外层div
            //1、通过Id
            // var box2 = document.getElementById("box1");
            //2、通过类名
            // var box2 = document.getElementsByClassName("box2")[0];
            //3、通过标签名
            // var box2 = document.getElementsByTagName("div")[0];
            // console.log(box2);

            //二、直接获取h1  
            // 1、通过Id（唯一）
            // var h1 = document.getElementById("h1");
            //2、通过标签名（下标）
            // var h1 = document.getElementsByTagName("h1")[0];
            //3、通过类名（下标）
            // var h1 = document.getElementsByClassName("title")[0];
            //4、通过选择器（下标）
            // var h1 = document.querySelector(".title");
            //5、通过name属性（下标）
            var h1 = document.getElementsByName("hh")[0];
            console.log(h1);

            //三、嵌套获取h1
            // var box2 = document.getElementById("box1");
            //1、通过标签名嵌套获取
            // var h1 = box2.getElementsByTagName("h1")[0];
            //2、通过类名嵌套获取
            // var h1 = box2.getElementsByClassName("title")[0];
            //3、通过.title选择器嵌套获取
            // var h1 = box2.querySelector(".title");
            // console.log(h1);



            //【注意】不能嵌套Id,不能嵌套name属性获取，错误写法
            // var h1 = box2.getElementById("h1");
            //var h1 = box2.getElementsByName("hh")[0];
        }
    </script>

    <body>
        <div id="box1" class="box2">
            <h1 id="h1" class="title" name="hh">h1标题</h1>
        </div>
    </body>