JS学习笔记

疑问：

1. getElementsByTagName 和 getElementsByClassName 的区别？分别在什么应用场景？

<!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>普通选项卡</title>
    <style>
    #div1 input{
        background: white;
    }
    #div1 input.active{
        background: yellow;
        /* 这里直接给className为active的标签设置颜色，

            1. 第一个按钮默认是黄色，所以需要先设置。
            2. js只需要先清空所有input的className，再把点击的this按钮 className变成active。
            不应该用js设置颜色式样！错误： aBtn[i].style.background-color = yellow;
         */
    }
    #div1 div{
        width: 200px;
        height: 200px;
        background-color: #ccc;
        display: none;
    }
    </style>

    <script>
    window.onload = function()
    {
        var oDiv = document.getElementById('div1');
        var aBtn = oDiv.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');

        for(var i=0; i<aBtn.length; i++)
        {
            aBtn[i].index = i;  
            //把aBtn的index顺序变成数值，以便于后面aDiv使用
            
            aBtn[i].onclick = function()
            {
                for(var i=0; i<aBtn.length; i++)
                {
                    aBtn[i].className = '';          // 先清空 所有按钮 和 div 的样式
                    aDiv[i].style.display = 'none';
                };

                this.className = 'active';         // 把点击的 这个按钮 类名 变成 ‘active’
                
                aDiv[this.index].style.display = 'block'; 
                // 和按钮序号相对应的div，display变成block
                
                // aDiv[this.index]  ==> aBtn[i].index = i
                // 把aBtn的index顺序变成数值，以便于后面aDiv使用  
                //疑问，怎么不能直接写 aDiv[i] ？
            };
        };
    };
    </script>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="aaa">
        <!-- 默认把第一个按钮的class设置为active，即背景色为yellow -->
        <input type="button" value="bbb">
        <input type="button" value="ccc">

        <div style="display: block";>mfdkjgmdkgm</div>
        <!-- 默认把第一个div的display设置为block-->
        <div>我梦见你梦见我</div>
        <div>14597825</div>
    </div>    
</body>
</html>

错误1：

<script>
    window.onload = function ()
    {
        var aBtn = document.getElementsByTagName('input');
        var oDiv = document.getElementById('div1');
        var aDiv = oDiv.getElementsByTagName('div');

        for(var i=0; i<aBtn.length; i++)
        {
            aBtn[i].index = i;

            aBtn[i].onclick = function()
            {
                for (var i=0; i<aBtn.length;i++) {
                        aBtn[i].className = '';
                        aDiv[i].style.display = 'none';
                    }
                // aBtn[i].className = ''; 
                // 不是直接在onclick事件里 用 aBtn[i] 给其他所有按钮、div设置样式。
                // aBtn[i] 只表示单个，再用一个for循环来处理，才表示全部。

                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            }            
        }
    }
    </script>

错误2：

<script>
    window.onload = function()
    {
        var aBtn = document.getElementsByTagName('input');

        for(i=0; i<aBtn.length; i++)
        {
            aBtn[i].onclick = function()
            {
                //aBtn[i].className = 'active'; 

                this.className = 'active';  
                // 当前事件作用于 this， 所以给 this 加 className
            };
        };
    };
    </script>

相关阅读:
数字音乐均衡器
 移植x264到vs2008之二
 无线连接频繁掉线，解决方法之telnet命令突破ddwrt端口最大数连接限制分析
 最新开发的消费平台开发过程持续更新（二）
.net 4.0 下请求验证模式变化应对方法
 DDWRT无线参数解读
 利用 Application_Error 捕获所有异常
 location.reload() 和 location.replace()的区别和应用
 纯CSS 实现组织架构图，学习
 Syslog架设windows日志服务器
原文地址：https://www.cnblogs.com/carpenterzoe/p/10196619.html