HTML5学堂-码匠 HTML5学堂

您当前位于:原生JS 实战开发 ——> Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性

Tab切换效果[系列] - 通过children等DOM操作提升Tab切换的扩展性

2015/05/02 20:41:57 | 作者:HTML5学堂(码匠) | 分类:原生JS 实战开发 | 关键词:Tab切换,DOM,children

从一个简单的Tab切换开始——如果tab内容中仍然有div

HTML5学堂:之前我们已经完成了tab切换这个效果的代码的第一次简化。伴随着对这个效果思考的深入,很多人会遇到这样一个问题,如果在存放tab内容的div当中,又出现了div这个标签,那么会发生什么样的现象呢?又如何解决这个问题呢?大家一起来看看。

tab内容中的div标签,开始影响效果实现

修改后的HTML结构代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Tab-独行冰海</title>
  6.     <link rel="stylesheet" href="css/tab.css">
  7. </head>
  8. <body>
  9.     <div id='tab' class='tab'>
  10.     <ul id='tabTit' class='tabTit'>
  11.         <li class='select'>标题一</li>
  12.         <li>标题二</li>
  13.         <li>标题三</li>
  14.     </ul>
  15.         <div id='tabCon' class='tabCon'>
  16.             <div class='show'>独行冰海的博客</div>
  17.             <div>欢迎光临</div>
  18.             <div>
  19.              <div>一切都从Tab开始</div>
  20.              <div>Tab内容div标签中又出现了div标签</div>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </body>
  25. <script src='js/tab.js'></script>
  26. </html>

不难发现,在这段代码当中,第三个tab内容区域当中,出现了两个div块。那么,此时我们js代码中仍然在使用的标签的获取方法就出现了问题。

欢迎沟通交流~HTML5学堂

JS中当前标签的获取方法

  1. var tab = document.getElementById('tab'),
  2.     tabTit = document.getElementById('tabTit'),
  3.     tabCon = document.getElementById('tabCon'),
  4.     tabTits = tabTit.getElementsByTagName('li'),
  5.     tabCons = tabCon.getElementsByTagName('div'),
  6.     len = tabTits.length;
  7.  

修改后的JS获取标签的方式

  1. var tabTitsA = document.getElementById('tabTit').children,
  2.     tabConsA = document.getElementById('tabCon').children,
  3.     len = tabTitsA.length;

除了使用children能够解决这个问题之外,也可以通过childNodes的DOM操作解决这个问题。下面书写一个小例子:

  1. var nowEle = document.getElementById('con').childNodes;
  2. var newDivs = [];
  3. for (var i = 0, num = 0; i < nowEle.length; i++) {
  4.     // 检测获取到节点的类型是不是标签节点
  5.     if(nowEle[i] && nowEle[i].nodeType == 1){
  6.         newDivs[num] = nowEle[i];
  7.         num++;
  8.     }
  9. };

在这个版本中,我们主要修改调整了标签的获取方式,用children去替代掉了原来单一的document.getElementsByTagName,防止子代之外的后代相关元素的影响。相应暴露出的问题是,div的样式是在原来书写好的,需要将样式代码进行相应的处理。这也将是我们在后面将要处理的,也就是,为了降低样式代码与行为代码的耦合度,提升代码的扩展性,我们需要对CSS再调整一下。

当然,对于代码,我们还有一个思索,就是,如何能够让我们的代码得到通用呢?后面的文章中,我们会依次进行讲解。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端