JS BOM对象

最新推荐文章于 2023-05-03 21:52:09 发布

原创最新推荐文章于 2023-05-03 21:52:09 发布 · 724 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

BOM概念

BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM由一系列相关的对象构成，并且每个对象提供了很多方法和属性。

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初值是Netscape浏览器标准的一部分。

bom对象大致包含五个部分：

Window对象：浏览器窗口对象
Navigator：浏览器对象
Screen：浏览器所处客户端的显示器屏幕对象
History：浏览器当前窗口的访问历史记录对象
Location：浏览器当前窗口的地址栏对象

open对象打开一个新的页面，返回window对象

var newWindow //用来存储新打开的窗口
openNew.onclick=function(){
    newWindow=window.open("https://www.baidu.com")
}

close 关闭打开的窗口

closeNew.onclick=function(){
    newWindow.close()
}

系统的对话框

alert（）
confirm（）点击确认返回True点击取消返回False
prompt（）参数有两个，第一个为提示的内容，第二个为输入框的内容点击确认返回输入的内容点击取消返回null

location的方法

assign.onclick = function() {
            // assign():可以打开新的页面，并且可以返回，可以产生历史纪录的
            location.assign("https://www.baidu.com");
        }
        reload.onclick = function() {
            // reload():实现的是页面刷新
            location.reload()
        }
        replace.onclick = function() {
            // replace():用新文档替换当前的文档，可以实现打开新的页面的功能，但不能返回，故没有产生历史记录
            location.replace("https://www.baidu.com");
        }
        href.onclick = function() {
            location.href("https://www.baidu.com");
        }

history对象

btn.onclick = function() {
            history.back(); //后退到历史纪录的列表的上一个url
        }
        btn2.onclick = function() {
            location.href = "3.html";
        }
        btn3.onclick = function() {
            history.forward(); //前进到历史纪录列表的下一个url
        }
        btn4.onclick = function() {
            history.go(1)
        }

onload：页面加载时触发

window.onload=function(){
            console.log("aa");
        }

onscroll：页面滚动条滚动时触发

window.onscroll=function(){
                console.log("onscroll")
            }

onresize：当窗口大小改变时触发

window.onresize = function() {
            console.log("onresize")
        }

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

var timer;
        username.oninput=function(){
            clearTimeout(time);
            timer=setTimeout(function(){
                console.log("aa")
            },2000)
        }

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

var timer=null;
        uesrname.oninput=function(){
            if(timer){
                return
            }
            timer=setTimeout(function(){
                console.log("aa");
                timer=null;
            },2000)
        }

函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

轮播图案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }
        
        #div1 img {
            width: 600px;
            height: 400px;
        }
        
        #div1 ul {
            width: 400px;
            height: 20px;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
            margin-left: 50px;
        }
        
        #div1 ul li {
            list-style: none;
            width: 20px;
            height: 20px;
            background: rgba(255, 255, 255, .6);
            border-radius: 50%;
        }
        
        .active {
            background: rgba(0, 0, 0, .6) !important;
        }
    </style>
</head>

<body>
    <div id="div1">
        <img src="img/bg1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var index = 1;
        var img = document.querySelector("#div1");

        function test() {
            var arr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", ]
            var img = document.querySelector("#div1 img");
            img.src = "img/" + arr[index];


            var list = document.querySelectorAll("#div1 ul li");
            for (i = 0; i < list.length; i++) {
                list[i].classList.remove("active")
            }
            list[index].classList.add("active")

            index++;
            if (index > 5) {
                index = 0;
            }
        }
        setInterval(test, 1000);
    </script>
</body>

</html>