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结构代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab-独行冰海</title>
<link rel="stylesheet" href="css/tab.css">
</head>
<body>
<div id='tab' class='tab'>
<ul id='tabTit' class='tabTit'>
<li class='select'>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
<div id='tabCon' class='tabCon'>
<div class='show'>独行冰海的博客</div>
<div>欢迎光临</div>
<div>
<div>一切都从Tab开始</div>
<div>Tab内容div标签中又出现了div标签</div>
</div>
</div>
</div>
</body>
<script src='js/tab.js'></script>
</html>

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

欢迎沟通交流~HTML5学堂

JS中当前标签的获取方法

var tab = document.getElementById('tab'),
tabTit = document.getElementById('tabTit'),
tabCon = document.getElementById('tabCon'),
tabTits = tabTit.getElementsByTagName('li'),
tabCons = tabCon.getElementsByTagName('div'),
len = tabTits.length;

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

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

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

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

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

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

欢迎沟通交流~HTML5学堂