DOM&BOM基礎(chǔ)第5篇

前言

DOM&BOM基礎(chǔ)是很重要前端知識，在這里我準(zhǔn)備了所有相關(guān)知識的概念描述以及示例Demo，連載7篇，和大家一起溫故而知新，覆蓋每一個知識點(diǎn)，相信在以后的開發(fā)和面試中你總會用到它。

image.png

offset系列屬性

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不帶單位的數(shù)值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以帶有定位的父親為準(zhǔn)  如果么有父親或者父親沒有定位 則以 body 為準(zhǔn)
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 寬度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回帶有定位的父親 否則返回的是body
        console.log(son.offsetParent); // 返回帶有定位的父親 否則返回的是body
        console.log(son.parentNode); // 返回父親 是最近一級的父親 親爸爸 不管父親有沒有定位
    </script>
</body>

offset與style的區(qū)別

<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        // offset與style的區(qū)別
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);
        console.log(box.style.width);
        // box.offsetWidth = '300px';
        box.style.width = '300px';
    </script>
</body>

計(jì)算鼠標(biāo)在盒子內(nèi)的坐標(biāo)

<body>
    <div class="box"></div>
    <script>
        // 我們在盒子內(nèi)點(diǎn)擊， 想要得到鼠標(biāo)距離盒子左右的距離。
        // 首先得到鼠標(biāo)在頁面中的坐標(biāo)（ e.pageX, e.pageY）
        // 其次得到盒子在頁面中的距離(box.offsetLeft, box.offsetTop)
        // 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離， 得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y;
        })
    </script>
</body>

拖動的模態(tài)框

<body>
    <div class="login-header"><a id="link" href="javascript:;">點(diǎn)擊，彈出登錄框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登錄會員
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用戶名：</label>
                <input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登錄密碼：</label>
                <input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div>
    </div>
    <!-- 遮蓋層 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 獲取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 點(diǎn)擊彈出層這個鏈接 link  讓mask 和login 顯示出來
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 開始拖拽
            // (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠標(biāo)移動的時候，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

client系列

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
        var div = document.querySelector('div');
        console.log(div.clientWidth);
    </script>
</body>

</html>

touch觸摸事件

<body>
    <div></div>
    <script>
        // 1. 獲取元素
        // 2. 手指觸摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function() {
            console.log('我摸了你');

        });
        // 3. 手指在DOM元素身上移動事件
        div.addEventListener('touchmove', function() {
            console.log('我繼續(xù)摸');

        });
        // 4. 手指離開DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('輕輕的我走了');

        });
    </script>
</body>

觸摸事件對象touchEvent

<body>
    <div></div>
    <script>
        // 觸摸事件對象
        // 1. 獲取元素
        // 2. 手指觸摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function(e) {
            // console.log(e);
            // touches 正在觸摸屏幕的所有手指的列表 
            // targetTouches 正在觸摸當(dāng)前DOM元素的手指列表
            // 如果偵聽的是一個DOM元素，他們兩個是一樣的
            // changedTouches 手指狀態(tài)發(fā)生了改變的列表 從無到有 或者 從有到無
            // 因?yàn)槲覀円话愣际怯|摸元素 所以最經(jīng)常使用的是 targetTouches
            console.log(e.targetTouches[0]);
            // targetTouches[0] 就可以得到正在觸摸dom元素的第一個手指的相關(guān)信息比如 手指的坐標(biāo)等等


        });
        // 3. 手指在DOM元素身上移動事件
        div.addEventListener('touchmove', function() {


        });
        // 4. 手指離開DOM元素事件
        div.addEventListener('touchend', function(e) {
            // console.log(e);
            // 當(dāng)我們手指離開屏幕的時候，就沒有了 touches 和 targetTouches 列表
            // 但是會有 changedTouches


        });
    </script>
</body>

像素比和pageshow事件

<body>

    <script>
        // console.log(window.devicePixelRatio);
        window.addEventListener('pageshow', function() {
            alert(11);
        })
    </script>
    <a >鏈接</a>
</body>

scroll系列

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容 我是內(nèi)容
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滾動事件當(dāng)我們滾動條發(fā)生變化會觸發(fā)的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);

        })
    </script>
</body>

</html>

仿淘寶固定側(cè)邊欄

<head>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回頂部</span>
    </div>
    <div class="header w">頭部區(qū)域</div>
    <div class="banner w">banner區(qū)域</div>
    <div class="main w">主體部分</div>
    <script>
        //1. 獲取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面
        var bannerTop = banner.offsetTop
            // 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 獲取main 主體元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 頁面滾動事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 頁面被卷去的頭部
            // console.log(window.pageYOffset);
            // 3 .當(dāng)我們頁面被卷去的頭部大于等于了 172 此時 側(cè)邊欄就要改為固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 當(dāng)我們頁面滾動到main盒子，就顯示 goback模塊
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })
    </script>
</body>

</html>

mouseenter和mouseover的區(qū)別

<head>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);

        })
    </script>
</body>

</html>

上一篇：DOM&BOM基礎(chǔ)第4篇 - 簡書 (jianshu.com)
下一篇：DOM&BOM基礎(chǔ)第6篇 - 簡書 (jianshu.com)

點(diǎn)贊加關(guān)注，永遠(yuǎn)不迷路

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容