使用纯javascript查找特定元素前后的元素

有一个包含如下链接的列表：

<ul>
    <li><a href="#">First tab</a></li>
    <li><a href="#">Second tab</a></li>
    <li class="active"><a href="#">Active tab</a></li>
    <li><a href="#">Fourth tab</a></li>
    <li><a href="#">Fifth tab</a></li>
</ul>

如何在活动选项卡前后找到元素？（在本例中，是第二个和第四个选项卡）

---

我只在纯JavaScript中寻找解决方案，就像jQuery解决方案一样

---

注意：

nextElementSibling

和

previousElementSibling

不受IE8和FF3支持，因此请发布这些浏览器也支持的解决方案。谢谢。

只要有最新的浏览器，就很容易做到：

var activeTab = document.getElementsByClassName('active')[0],
    activePrevSibling = activeTab.previousElementSibling,
    activeNextSibling = activeTab.nextElementSibling;

（用可怕的、可怕的颜色…）

---

根据Esailija留下的评论，对上述内容进行了编辑：

document.querySelector（“.active”）

更受支持且更简洁

参考资料：

---

假设您的

元素被称为

元素

：

var active, prev, next;
active = prev = next = element.querySelector('.active');

do prev = prev.previousSibling; while(prev && prev.nodeType !== 1);
do next = next.nextSibling;     while(next && next.nodeType !== 1);

这将在InternetExplorer8中工作。如果您只担心现代浏览器：

var active = element.querySelector('.active');
var prev = active.previousElementSibling;
var next = active.nextElementSibling;

---

也许像下面这样的答案

document.querySelector（“.active”）

更受支持和简洁；预演？我（显然，我想）从来都不知道这一点；谢谢（并在中编辑！）@Esailija：任何支持

*ElementSibling

的浏览器都支持

getElementsByClassName

。。。但它肯定更简洁。我想知道相比之下它的性能如何？@minitech:我感觉JS性能即将到来@Ωmega:David明确指出了这一点：“[…]提供了最新的浏览器”。

var active = element.querySelector('.active');
var prev = active.previousElementSibling;
var next = active.nextElementSibling;