如何使用 JavaScript 获取 HTML 中的下一个元素？
假设我有三个<div>s 并且我在 JavaScript 代码中得到了一个的引用，我想知道哪个是下一个<div>，哪个是前一个。
使用 JavaScript 获取下一个/上一个元素？
IT技术
javascript
html
dom
2021-02-10 05:46:10
6个回答
使用nextSibling和previousSibling属性：
<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>
document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1
但是在某些浏览器中（我忘了是哪个），您还需要检查空格和注释节点：
var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
nextSibling = nextSibling.nextSibling
}
像 jQuery 这样的库开箱即用地为您处理所有这些跨浏览器检查。
真的取决于你的文档的整体结构。
如果你有：
<div></div>
<div></div>
<div></div>
它可能像遍历一样简单使用
mydiv.nextSibling;
mydiv.previousSibling;
但是，如果“下一个”div 可能位于文档中的任何位置，您将需要更复杂的解决方案。你可以尝试使用
document.getElementsByTagName("div");
并通过这些运行以某种方式到达您想要的地方。
如果您正在执行大量复杂的 DOM 遍历，例如这样，我建议您查看诸如 jQuery 之类的库。
那么在纯 javascript 中，我的想法是您首先必须将它们整理到一个集合中。
var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");
所以基本上用 selectionDiv 遍历集合以找到它的索引，然后显然 -1 = 前一个 +1 = 下一个在边界内
for(var i = 0; i < divs.length;i++)
{
if(divs[i] == selectionDiv)
{
var previous = divs[i - 1];
var next = divs[i + 1];
}
}
请注意，正如我所说，需要额外的逻辑来检查您是否在范围内，即您不在集合的末尾或开头。
这也意味着说你有一个嵌套有子 div 的 div。下一个 div 不是兄弟姐妹而是孩子，所以如果你只想要与目标 div 处于同一级别的兄弟姐妹，那么肯定使用 nextSibling 检查tagName属性。
每个 HTMLElement 上都有一个属性，“previousElementSibling”。
前任：
<div id="a">A</div>
<div id="b">B</div>
<div id="c">c</div>
<div id="result">Resultado: </div>
var b = document.getElementById("c").previousElementSibling;
document.getElementById("result").innerHTML += b.innerHTML;
这将很容易...它是一个纯 javascript 代码
<script>
alert(document.getElementById("someElement").previousElementSibling.innerHTML);
</script>