JavaScript BOM 操作

2024-04-26 06:55•javascript•阅读 5134

BOM

含义: Brower Object Model 浏览器对象模型

window.open()

window.close() 关闭网页

confirm('是否关闭网页!') 弹出确认框

location对象

setInterval(function(){
    //页面全局刷新 不建议 使用 可以用它调试
    //更希望的是 局部刷新（ajax技术 与后端交互的核心技术）
    location.reload();
},2000)

<body>
    <!--行间的js中的open() window不能省略 第二个参数的默认值 _blank-->
    <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>

    <button>打开百度</button>
    <button onclick="window.close()">关闭</button>
    <button>关闭</button>

</body>
<script type="text/javascript">

    var oBtn = document.getElementsByTagName('button')[1];
    var closeBtn = document.getElementsByTagName('button')[3];

    oBtn.onclick = function(){
        // open('https://www.baidu.com','_self')

        //打开空白页面
        // open('about:blank',"_self")
    };
    closeBtn.onclick = function(){
        // 弹出对话 选项框 同意为 true 不同意为 false
        if(confirm("是否关闭？")){
            close();
        }
    }

</script>

打开新网址的三种方式

<a href='http://www.luffycity.com/' target = '_self'>路飞</a>

window.location.open('http://www.luffycity.com/','_blank');

window.location.href = 'http://www.luffycity.com/'; //在当前网页打开网址

window.open('about:blank', "_self")  // 打开一个新页面  _self 在本页面 打开 _blank  另一个页面
pathname
search
href

前后端交互的方式

client,offset,scroll系列的内容

client

/*
clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度
clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
clientWidth 内容区域+左右padding   可视宽度 不包含border
clientHeight 内容区域+ 上下padding   可视高度
*/

var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop);
console.log(oBox.clientLeft);
console.log(oBox.clientWidth);
console.log(oBox.clientHeight);

document.documentElement 获取的是html标签

屏幕的可视区域

// 屏幕的可视区域
window.onload = function(){

    // document.documentElement 获取的是html标签
    console.log(document.documentElement.clientWidth);
    console.log(document.documentElement.clientHeight);
    // 窗口大小发生变化时，会调用此方法
    window.onresize = function(){
        console.log(document.documentElement.clientWidth);
        // console.log(document.documentElement.clientHeight);
    }
}

offset

window.onload = function(){
    var box = document.getElementById('box')
    /*
    offsetWidth  占位宽  内容+padding+border
    offsetHeight  占位高
    offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果父相子绝的盒子,子盒子设置绝对定位，那么是以父辈为基准的top值
    offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值
    */
    console.log(box.offsetTop)
    console.log(box.offsetLeft)
    console.log(box.offsetWidth);
    console.log(box.offsetHeight)
}

scroll

window.onload = function () {

    //实施监听滚动事件
    window.onscroll = function () {
        // console.log(1111);
        // 页面卷起的高度
        console.log('上' + document.documentElement.scrollTop);
        console.log('左' + document.documentElement.scrollLeft);
        console.log('宽' + document.documentElement.scrollWidth);  //width+padding+border
        console.log('高' + document.documentElement.scrollHeight);  // 页面总宽度


    };

    var s = document.getElementById('scroll');

    s.onscroll = function () {
        //scrollHeight : 内容的高度+padding  不包含边框
        console.log('上' + s.scrollTop);
        console.log('左' + s.scrollLeft);
        console.log('宽' + s.scrollWidth);
        console.log('高' + s.scrollHeight);
    }
}

滚动页面导航栏 Demo

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .header{
            width: 100%;
            height: 40px;
            background-color: rgba(0,0,0,.5);
        }

        #search{
            width: 100%;
            height: 1000px;
            position: absolute;
            top: 300px;
            left: 500px;

        }
        .fixed{
            width: 100%;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body >
    <div class="header">

    </div>

    <div >
        <form action="">
            <input type="text">
            <input type="submit">
        </form>
    </div>
    <div class="fixed">

    </div>
    <script>
        var searchDiv = document.getElementById('search');
        var fixedDiv = document.getElementsByClassName('fixed')[0];
        var offsettop = searchDiv.offsetTop;
        console.log(offsettop);
        window.onscroll  = function () {
            var scrollTop  = document.documentElement.scrollTop;
            // console.log(document.documentElement.scrollTop);

            if (scrollTop >= offsettop){
                fixedDiv.style.display = 'block';
            }else{
                 fixedDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

上一篇 »JavaScript- BOM, DOM
下一篇 »JavaScript