JavaScript积累——DOM操作

最新推荐文章于 2021-10-18 20:05:46 发布

alun550

最新推荐文章于 2021-10-18 20:05:46 发布

阅读量105

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/alun550/article/details/104067776

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM操作

三个按钮的点击变色功能及对应信息框显示
查看键盘点击事件的编号
实现键盘方向键控制div的移动
实现某标签内部子标签由现在顺序改变为逆序排列
实现 parentNode.insertAfter(a, b)，在b之后插入a
实现页面自动滚动

三个按钮的点击变色功能及对应信息框显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrap div{
        display : none;
        width: 200px;
        height: 200px;
        border: solid red 2px;
    }  
    </style>
    
</head>
<body>
	<div class="wrap">
        <button class="active">No.1</button>
        <button class="active">No.2</button>
        <button class="active">No.3</button>
        <div class="words">文本1</div>
        <div class="words">文本2</div>
        <div class="words">文本3</div>
    </div>
    
    <script>
    // 获取按钮和文字框的类数组对象
    var btn = document.getElementsByTagName('button');
    var div = document.getElementsByClassName('words');
    // 循环定义所有的按钮的“点击监听事件”
    for(var i = 0; i < btn.length; i++){
        // 通过立即执行函数来将循环的i转化为固定的值传入div[j]中，
        // 以保持按钮与信息框的对应。再利用闭包原理将监听事件保存下来
        (function (j) {
            btn[j].onclick = function (){
            // 此处的功能为，被点击的按钮底色变黄，其他按钮颜色清除
            for(var n = 0; n < btn.length; n++){
                // 1、先清除掉所有的按钮的底色
                btn[n].style.backgroundColor = '';
                div[n].style.display = 'none';
            }
            // 2、在此处添加被点击的按钮的底色
            this.style.backgroundColor = 'yellow';
            // 添加信息框的显示功能
            div[j].style.display = 'block';
            }
        }(i))
    }
    </script>

</body>
</html>

查看键盘点击事件的编号

// 查看打印出来的e中的which 即可知道，点击此按键时的事件编号
document.onkeydown = function(e){
                console.log(e);
        }

如（chrome）：方向键：左、上、右、下—— 37、38、39、40

实现键盘方向键控制div的移动

<script>
        var div = document.createElement('div'); // 创建一个document的div对象
        document.body.appendChild(div); // 向document.body中插入一个div
        div.style.width = '100px'; // 设置div的宽高
        div.style.height = '100px';
        div.style.backgroundColor = 'red'; // 设置div的填充颜色
        div.style.position = 'absolute'; // 设置div的浮动，以实现其自由移动
        div.style.left = '0'; // 设置div的初始位置
        div.style.top = '0';
        // 设置网页的键盘点击监控事件
        document.onkeydown = function(e){
            // 当4个方向的每次点击步进相同的时候，设置一个变量来统一修改
            var moveStep = 10;
            // 当点击键盘左时，方块向左移动moveStep个单位
            if(e.which == 37){
                div.style.left = parseInt(div.style.left) - moveStep + 'px';
            }else if(e.which == 38){
                div.style.top = parseInt(div.style.top) - moveStep + 'px';
            }else if(e.which == 39){
                div.style.left = parseInt(div.style.left) + moveStep +'px';
            }else if(e.which == 40){
                div.style.top = parseInt(div.style.top) + moveStep + 'px';
            }            
        }
    </script>

此处将if else if 改为switch更加方便以后添加东西

<script>
        var div = document.createElement('div'); // 创建一个document的div对象
        document.body.appendChild(div); // 向document.body中插入一个div
        div.style.width = '100px'; // 设置div的宽高
        div.style.height = '100px';
        div.style.backgroundColor = 'red'; // 设置div的填充颜色
        div.style.position = 'absolute'; // 设置div的浮动，以实现其自由移动
        div.style.left = '0'; // 设置div的初始位置
        div.style.top = '0';
        // 设置网页的键盘点击监控事件
        document.onkeydown = function(e){
            // 当4个方向的每次点击步进相同的时候，设置一个变量来统一修改
            var moveStep = 10;
            // 当点击键盘左时，方块向左移动moveStep个单位
            switch(e.which){
                case 37:
                    div.style.left = parseInt(div.style.left) - moveStep + 'px';
                    break;
                case 38:
                    div.style.top = parseInt(div.style.top) - moveStep + 'px';
                    break;
                case 39:
                    div.style.left = parseInt(div.style.left) + moveStep +'px';
                    break;
                case 40:
                    div.style.top = parseInt(div.style.top) + moveStep + 'px';
                    break;                
            }              
        }
    </script>

实现某标签内部子标签由现在顺序改变为逆序排列

<body>
    <div>
        <a>this is a
            <ul>
                <li 1=""></li>
                <li 2=""></li>
                <li 3=""></li>
                <li 4=""></li>
                <li 5=""></li>
            </ul>
        </a>
        <em>this is em</em>
        <b>this is b</b>
        <strong>this is strong</strong>
        <address>this is address</address>
    </div>

    <script>
    // 将上面的div逆序
    function tagReverse(tag) {
        var childNodes = tag.children;
        var n = tag.children.length;
        while(n){
            // 倒序选出每一个元素子节点，再将其用parentNode.appendChild()方法插入到父节点的末尾处
            tag.appendChild(childNodes[n-1])
            n -= 1;
        }
        return tag;
    }

    var div = document.getElementsByTagName('div')[0];
    var res = tagReverse(div);
    console.log(res);

    </script>
    
</body>

实现 parentNode.insertAfter(a, b)，在b之后插入a

// 实现 parentNode.insertBefore(a,b) 的类似函数 .inserAfter(a,b)
    Element.prototype.inserAfter = function (a,b) {
        var beforeNode = afterNode.nextElementSibling;
        if(beforeNode == null){
            this.appendChild(a);
        }else{
            this.insertBefore(targetNode, beforeNode);
        }        
    }

实现页面自动滚动

<div style="width: 100px;
            height:100px;
            background-color: orange;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
            position: fixed;
            bottom: 200px;
            right: 50px;
            border-radius: 50%;
            opacity: 0.5;">start</div>
<div style="width: 100px;
		    height:100px;
		    background-color: green;
		    color: #fff;
		    font-size: 40px;
		    font-weight: bold;
		    text-align: center;
		    line-height: 100px;
		    position: fixed;
		    bottom: 50px;
		    right: 50px;
		    border-radius: 50%;
		    opacity: 0.5;">stop</div>

    <!-- 自动滚动的小说阅读器 -->
    <script>
        // 开启按钮
        var start = document.getElementsByTagName('div')[0];
        // 结束按钮
        var stop = document.getElementsByTagName('div')[1];
        // 给timer一个初始值，以免一开始就点击结束时候抛出异常
        var timer = 0;
        // 加锁式的编程思维，以免多次点击开始时候 滚动速度越来越快
        var key = true;
        // 添加对“开始”按钮的点击事件
        start.onclick = function () {
            // 判断key是否为true，避免多次点击触发加速且无法停止
            if(key){
                timer = setInterval(function (){
                window.scrollBy(0, 10);// 若要修改滚动速度，可以修改此处的x,y
                },100);// 此处的100仅在第一次使用setInterval的时候有效，之后再更改是无效的，以第一次为准
                key = false;
            }
        }
        // 添加对“停止”按钮的点击事件
        stop.onclick = function(){
            clearInterval(timer);
            // 点击停止之后将锁打开，允许再次点击开始
            key = true;
        }
    </script>

alun550

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript积累——DOM操作

DOM操作三个按钮的点击变色功能及对应信息框显示三个按钮的点击变色功能及对应信息框显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫

专栏目录