疑问：

1. getElementsByTagName 和 getElementsByClassName  的区别？ 分别在什么应用场景？ 
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>普通选项卡</title>
  8.     <style>
  9.     #div1 input{
  10.         background: white;
  11.     }
  12.     #div1 input.active{
  13.         background: yellow;
  14.         /* 这里直接给className为active的标签设置颜色，
  15.  
  16.             1. 第一个按钮默认是黄色，所以需要先设置。
  17.             2. js只需要先清空所有input的className，再把点击的this按钮 className变成active。
  18.             不应该用js设置颜色式样！错误： aBtn[i].style.background-color = yellow;
  19.          */
  20.     }
  21.     #div1 div{
  22.         width: 200px;
  23.         height: 200px;
  24.         background-color: #ccc;
  25.         display: none;
  26.     }
  27.     </style>
  28.  
  29.     <script>
  30.     window.onload = function()
  31.     {
  32.         var oDiv = document.getElementById('div1');
  33.         var aBtn = oDiv.getElementsByTagName('input');
  34.         var aDiv = oDiv.getElementsByTagName('div');
  35.  
  36.         for(var i=0; i<aBtn.length; i++)
  37.         {
  38.             aBtn[i].index = i;
  39.             //把aBtn的index顺序变成数值，以便于后面aDiv使用
  40.  
  41.             aBtn[i].onclick = function()
  42.             {
  43.                 for(var i=0; i<aBtn.length; i++)
  44.                 {
  45.                     aBtn[i].className = '';          // 先清空 所有按钮 和 div 的样式
  46.                     aDiv[i].style.display = 'none';
  47.                 };
  48.  
  49.                 this.className = 'active';         // 把点击的 这个按钮 类名 变成 ‘active’
  50.  
  51.                 aDiv[this.index].style.display = 'block';
  52.                 // 和按钮序号相对应的div，display变成block
  53.  
  54.                 // aDiv[this.index]  ==> aBtn[i].index = i
  55.                 // 把aBtn的index顺序变成数值，以便于后面aDiv使用
  56.                 //疑问，怎么不能直接写 aDiv[i] ？
  57.             };
  58.         };
  59.     };
  60.     </script>
  61. </head>
  62. <body>
  63.     <div id="div1">
  64.         <input class="active" type="button" value="aaa">
  65.         <!-- 默认把第一个按钮的class设置为active，即背景色为yellow -->
  66.         <input type="button" value="bbb">
  67.         <input type="button" value="ccc">
  68.  
  69.         <div style="display: block";>mfdkjgmdkgm</div>
  70.         <!-- 默认把第一个div的display设置为block-->
  71.         <div>我梦见你梦见我</div>
  72.         <div>14597825</div>
  73.     </div>
  74. </body>
  75. </html>

错误1：

  1. <script>
  2.     window.onload = function ()
  3.     {
  4.         var aBtn = document.getElementsByTagName('input');
  5.         var oDiv = document.getElementById('div1');
  6.         var aDiv = oDiv.getElementsByTagName('div');
  7.  
  8.         for(var i=0; i<aBtn.length; i++)
  9.         {
  10.             aBtn[i].index = i;
  11.  
  12.             aBtn[i].onclick = function()
  13.             {
  14.                 for (var i=0; i<aBtn.length;i++) {
  15.                         aBtn[i].className = '';
  16.                         aDiv[i].style.display = 'none';
  17.                     }
  18.                 // aBtn[i].className = '';
  19.                 // 不是直接在onclick事件里 用 aBtn[i] 给其他所有按钮、div设置样式。
  20.                 // aBtn[i] 只表示单个，再用一个for循环来处理，才表示全部。
  21.  
  22.                 this.className = 'active';
  23.                 aDiv[this.index].style.display = 'block';
  24.             }
  25.         }
  26.     }
  27.     </script>

错误2：

  1. <script>
  2.     window.onload = function()
  3.     {
  4.         var aBtn = document.getElementsByTagName('input');
  5.  
  6.         for(i=0; i<aBtn.length; i++)
  7.         {
  8.             aBtn[i].onclick = function()
  9.             {
  10.                 //aBtn[i].className = 'active'; 
  11.                 this.className = 'active';
  12.                 // 当前事件作用于 this， 所以给 this 加 className
  13.             };
  14.         };
  15.     };
  16.     </script>

JS学习笔记 - 普通选项卡（面向过程）的更多相关文章

  1. JS学习笔记 - 面向对象 - 选项卡 （普通选项卡改写）

    选项卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // ...

  2. C#学习笔记——面向对象、面向组件以及类型基础

    C#学习笔记——面向对象.面向组件以及类型基础 目录 一 面向对象与面向组件 二 基元类型与 new 操作 三 值类型与引用类型 四 类型转换 五 相等性与同一性 六 对象哈希码 一 面向对象与面向组 ...

  3. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  4. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  5. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

  6. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  7. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  8. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  9. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. LRJ入门经典-0907万圣节的小L306

    原题 LRJ入门经典-0907万圣节的小L306 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 今天是万圣节,小L同学开始了 ...

  2. android 4.4最新官方源代码下载

    国内网络,日夜不休花了一个多月才下载成功android标准源代码,有些开发同人须要.已上传到网盘,分享给大家 微云地址: http://url.cn/PkkSzC 百度云盘地址(更新) http:// ...

  3. 【LeetCode-面试算法经典-Java实现】【05-Longest Palindromic Substring(最大回文字符串)】

    背景 近期開始研究算法,于是在leetcode上做算法题,第五题Longest Palindromic Substring便是关于回文子串的. 什么是回文字串 回文字符串是指将该字符串前后颠倒之后和该 ...

  4. Java 位运算符 深入理解

    在Java中存在着这样一类操作符,是针对二进制进行操作的.它们各自是&.|.^.~.>>.<<.>>>几个位操作符.不管是初始值是依照何种进制,都会换 ...

  5. Java 实现策略(Strategy)模式

    策略模式:行为型模式 将同一行为,不同的处理算法分别封装起来.让它们之间能够互相替换 1. 定义一个超类型接口,及 行为方法 2. 定义不同的实现类,实现该行为的 不同的算法 /** * 策略模式:针 ...

  6. u盘安装14.04ubuntu系统

    最近在安装ubuntu 14.04系统,总结了下安装的方法,记录如下 1.下载ubuntu 14.04 iso文件,下载地址 http://www.ubuntu.com/download/deskto ...

  7. elasticsearch index 之merge

    merge是lucene的底层机制,merge过程会将index中的segment进行合并,生成更大的segment,提高搜索效率.segment是lucene索引的一种存储结构,每个segment都 ...

  8. Spark Tachyon实战应用（配置启动环境、运行spark和运行mapreduce）

    Tachyon实战应用 配置及启动环境 修改spark-env.sh 启动HDFS 启动Tachyon Tachyon上运行Spark 添加core-site.xml 启动Spark集群 读取文件并保 ...

  9. javafx drag

    public class EffectTest extends Application { @Override public void start(Stage stage) { stage.setTi ...

  10. 5个jvm命令

    本文是Neward & Associates的总裁Ted Neward为developerworks独家撰稿“你不知道5个……”系列中的一篇,JVM是多数开发人员视为理所当然的Java功能和性 ...