JavaScript DOM 元素操作 window窗口操作

76433橘子
180 阅读5分钟

JavaScript DOM 元素操作 window窗口操作

前端 JavaScript DOM 和 BOM 学习目录

1. 认识DOM 和 BOM

2. DOM 操作节点、DOM 操作元素节点

3. DOM 获取任意元素 、节点类型、节点名称属性

4. DOM attribute property style属性 className属性 classList属性 Data

5. DOM 创建元素 移除元素 克隆元素

6. DOM 元素操作 window窗口操作

7. DOM Event事件

8. DOM 常用API事件总结

9. BOM 操作

10. JSON数据操作

DOM 获取元素大小 位置

注意接下来的知识点的话，和我们的盒子模型的掌握是很重要的，掌握得好，那么理解记忆即可，否则就会十分混乱的

offset —— 偏离量：在编程、测绘、机械等领域，表示物体或数据偏离标准位置或值的程度

client —— 计算机客户端：在计算机科学中，client 可以指与服务器进行通信的软件程序或设备

scroll —— 滚动：scroll作为动词时，可以指屏幕上的文本或图形进行滚动，以便查看屏幕外的部分

额外拓展，知道了这些英文单词的中文意思的话，应该好记忆一点

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        :root {
            --page-use-color: red;
            --page-color: skyblue;
            body {
                padding: 0;
                margin: 0;
            }
            .box {
                width: 100px;
                height: 100px;
                background-color: var(--page-use-color);
                border: 5px solid var(--page-color);
                overflow: auto;
                box-sizing: border-box;
            }
        }
    </style>
</head>
<body>
    <div class="box">
​
    </div>
​
    <script>
        // 实现获取元素
        var boxEl = document.querySelector('.box')
​
        // 实现获取元素的样式
        var boxStyle = getComputedStyle(boxEl)
​
        console.log(boxStyle.width, boxStyle.height)
​
        console.log(boxEl.offsetLeft, boxEl.offsetTop)
​
        console.log(boxEl.offsetWidth, boxEl.offsetHeight)
​
        console.log(boxEl.clientLeft, boxEl.clientTop)
​
        console.log(boxEl.clientWidth, boxEl.clientHeight)
​
        /**
         * clientWidth: 当我们的 box-sizing 的模式是我们的 content-box 的时候，就是 content + padding = width - scroll
         *              当我们的 box-sizing 的模式是我们的 border-box 的时候，就是我们的 width - scroll - border
         * offsetWidth: 当我们的 box-sizing 的模式是我们的 content-box 的时候，就是 width + border
         *              当我们的额 box-sizing 的模式是我们的 border-box 的时候， 就是实现获取是 width
         * clientLeft: 管他是什么显示模式，都是获取的是我们的内容区域距离边缘的大小： border
         * offsetLeft: 就是实现的是获取我们元素 border 距离父盒子的间距
         */
    </script>
</body>
</html>
属性描述具体用法
clientWidth 和 clientHeight当我们的 box-sizing 的设置为默认的 content-box 的时候，就是实现的是获取块级盒子的 content + padding 的大小boxEl.clientWidth, boxEl.clientHeight
offsetWidth 和 offsetHeight当我们的 box-sizing 的设置为默认的 content-box 的时候，就是实现的是获取块级盒子的 width + border 的大小boxEl.offsetWidth, boxEl.offsetHeight
clientTop 和 clientLeft不管我们的块级盒子的显示模式是什么，都是实现获取的是边框的宽度，但是准确来说的话，应该是 content + padding 距离我们的元素的边缘的距离大小boxEl.clientLeft, boxEl.clientTop
offsetLeft 和 offsetTop不管盒子的显示模式是怎样的，都是实现的是获取我们的整个盒子的边缘距离父盒子的距离大小boxEl.offsetLeft, boxEl.offsetTop
scrollHeight 和 scrollTopscrollHeight 是实现的是获取我们的元素具有的滚动区域的大小， scrollTop 就是实现的是获取我们的滚动偏移量的boxEl.scrollHeight, boxEl.scrollTop

应该还是记得的吧，就是我们的 box-sizing 是具有两种属性值的，一种就是 content-box 一种就是我们的 border-box

content-box 是我们的默认值

同时真真的想要了解这个的使用的话，我们尽量回去温故一哈盒子模型哟

DOM window窗口大小以及滚动

方法描述使用
innerWidth 和 innerHeight实现获取的是我们的 windows 窗口的宽度以及高度（含有滚动条）window.innerHeight, window.innerWidth
outerWidth 和 outerHeight获取window 窗口的整个宽度以及高度（包含调试工具以及工具栏）window.outerHeight, window.outerWidth
documentElement.clientHeight 和 document.Element.clientWidth获取的是 html 的宽度以及高度（不包含滚动条）document.querySelector('html').clientHeight, document.body.parentElement.clientWidth
scrollX 和 scrollY就是实现的是获取 window 窗口的滚动，scrollX 就是实现的是获取相对于X轴的偏移量window.scrollX , window.scrollY
scrollBy(x, y) 和 scrollTo(pageX, pageY)scrollBy 就是实现的是我们的将页面实现滚动到相对于的位置， scrollTo 就是实现的是指定滚动到页面中的某个位置window.scrollBy() , window.scrollTo()
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // 实现获取元素
        var boxEl = document.querySelector('.box')
        console.log(document.querySelector('html').clientHeight, document.body.parentElement.clientWidth);
        // 还是可以实现我们的通过 DOM 的导航树来实现获取的
        console.log(window.innerHeight, window.innerWidth);
        console.log(window.outerHeight, window.outerWidth);
    </script>
</body>
</html>
​

后面的时候，我们是可以对这些进行一些监听，来实现给我们的网页添加一些效果出来

就是当我们的网页实现滚动到了特定的位置，页面的样式就实现某种改变，这个时候就可以通过监听这些属性来实现对应的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 开始实现我们的样式的设计 -->
    <style>
        :root {
            --box-color: skyblue;
​
            body {
                padding: 0;
                margin: 0;
​
                .box01 {
                    width: 200px;
                    height: 200px;
                    background-color: var(--box-color);
                }
​
                .btn {
                    position: fixed;
                    opacity: 0;
                    right: 30px;
                    bottom: 30px;
                }
            }
        }
    </style>
</head>
<body>
    <div class="box01"></div>
    <button class="btn">回到顶部</button>
​
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
​
    <script>
        // 开始实现书写我们的 js 部分
        // 首先先实现获取元素
        var btnEl = document.querySelector('.btn');
​
        // 开始对window 添加事件监听
        // 控制一个元素是否显示的方法含有: opacity hidden display 来实现控制
        // 同时可以思考一下这三个有何不同
        window.onscroll = function() {
            var scrollY = window.scrollY
            scrollY > 300 ? btnEl.style.opacity = '1' : btnEl.style.opacity = '0';
        }
​
        // 实现对我们的按钮添加点击事件
        btnEl.onclick = function(){
            window.scrollTo(0,0);
        }
    </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        :root {
            --a-root-color: red;
            --a-hover-color: skyblue;
        }

        body {
            padding: 0;
            margin: 0;

            ul, li, ol {
                list-style: none;
            }

            span {
                text-decoration: none;
                color: var(--a-root-color);
                cursor: pointer;
            }

            span:hover {
                color: var(--a-hover-color);
            }
        }
    </style>
</head>
<body>
    <label for="text">请输入内容</label><input type="text" id="text" value="" placeholder="请输入内容">
    <button class="btn">添加内容</button>

    <ul class="ul">
    </ul>

    <script>
        // 首先先实现获取我们的元素
        var inputEl = document.querySelector('#text');
        var btnEl = document.querySelector('.btn');
        var ulEl = document.querySelector('.ul');
        var index = 1

        inputEl.focus()

        function createUl(LiEl, index) {
            var _ulEL = LiEl.querySelector('ul');
            if (!_ulEL) {
                var _ulEl = document.createElement('ul');
                LiEl.append(_ulEL)
            }
            var contentValue = prompt("请输入内容")
            if (contentValue) {
                createLi(_ulEl,  contentValue, index);
            }
        }

        // 开始实实现抽离一个函数出来实现专门创建我们的元素
        function createLi(containerEl, contentValue, index) {
            var LiEl = document.createElement('li');
            var delSpan = document.createElement('span');
            var addSpan = document.createElement('span');
            // 然后实现插入元素
            delSpan.append("删除评论")
            addSpan.append("评论")
            delSpan.onclick = function () {
                LiEl.remove()
            }
            addSpan.onclick = function () {
                createUl(LiEl, index);
            }
            LiEl.classList.add(`li-${index}`);
            LiEl.append(contentValue, "  ", delSpan, "  ", addSpan);
            ulEl.append(LiEl);
        }

        // 添加事件监听
        btnEl.addEventListener('click', function () {
            var content = inputEl.value;
            if (content === '') {
                alert("没有内容，请输入内容后重试")
                inputEl.focus()
            } else {
                createLi(ulEl, content, index);
                inputEl.value = ""
                inputEl.focus()
                index++
            }
        })
    </script>
</body>
</html>

上面的小案例的话是有一点小的 bug 的，书写的时候忘记了元素的语义化，把通过列表展示评论内容的方式可以改为 div 来实现，主要看 js 的思路，可以优化的地方，欢迎提出问题

avatar
文章
阅读
粉丝