疑问：
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>