使用 JavaScript 获取下一个/上一个元素？答案

【问题标题】：Get next / previous element using JavaScript?使用 JavaScript 获取下一个/上一个元素？
【发布时间】：2010-10-09 03:53:38
【问题描述】：

如何使用 JavaScript 获取 HTML 中的下一个元素？

假设我有三个<div>s，并且我在 JavaScript 代码中得到一个引用，我想知道哪个是下一个 <div>，哪个是前一个。

【问题讨论】：

标签： javascript html dom

【解决方案1】：

使用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 这样的库开箱即用地为您处理所有这些跨浏览器检查。

【讨论】：

nextSibling 和 previousSibling （应该）总是返回所有节点，而不仅仅是元素节点，不是吗？这包括文本节点、评论节点等。您的第二个示例看起来是一个很好的解决方案！也许你可以用 do {} while(); 减少重复。环形？（编辑：或递归）
nextElementSibling 更有用。
请注意，nextSibling 和 nextElementSibling 都不是完全跨浏览器兼容的。 Firefox 的 nextSibling 返回文本节点，而 IE 不返回，并且 nextElementsibling 直到 IE9 才实现。
如果元素不是同级元素，这将不起作用。
@Kloar：问题询问如何获取“html 中的下一个 [div] 元素”。标记中的下一个div 可能不与元素相邻；它可能更深或更高。

【解决方案2】：

实际上取决于文档的整体结构。

如果你有：

<div></div>
<div></div>
<div></div>

可能就像遍历 using 一样简单

mydiv.nextSibling;
mydiv.previousSibling;

但是，如果“下一个”div 可能位于文档中的任何位置，您将需要更复杂的解决方案。您可以尝试使用

document.getElementsByTagName("div");

并通过这些以某种方式到达您想要的地方。

如果您正在执行大量复杂的 DOM 遍历，我建议您查看 jQuery 等库。

【讨论】：

nextSibling() .. 应该是 nextSibling，我认为

【解决方案3】：

在纯 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 属性。

【讨论】：

接缝很好的解决方案，但如何获得下一个元素，正如你现在写的那样，我有集合和选定的一个，你能帮我更多吗？

【解决方案4】：

每个 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;

直播：http://jsfiddle.net/QukKM/

【讨论】：

这在 IE8 上失败（尚未检查其他 IE 版本）。 previousSibling 好像是跨浏览器解决方案。

【解决方案5】：

这很容易... 它是一个纯 JavaScript 代码

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>

【讨论】：

【解决方案6】：

这很简单。试试这个：

let myReferenceDiv = document.getElementById('mydiv');
let prev = myReferenceDiv.previousElementSibling;
let next = myReferenceDiv.nextElementSibling;

【讨论】：

【解决方案7】：

所有这些解决方案看起来都有些矫枉过正。为什么要使用我的解决方案？

IE9 支持previousElementSibling

document.addEventListener 需要一个 polyfill

previousSibling 可能会返回一个文本

请注意，我已选择返回第一个/最后一个元素，以防边界被破坏。在 RL 使用中，我希望它返回 null。

var el = document.getElementById("child1"),
    children = el.parentNode.children,
    len = children.length,
    ind = [].indexOf.call(children, el),
    nextEl = children[ind === len ? len : ind + 1],
    prevEl = children[ind === 0 ? 0 : ind - 1];
    
    document.write(nextEl.id);
    document.write("<br/>");
    document.write(prevEl.id);

<div id="parent">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

【讨论】：

【解决方案8】：

测试了它，它对我有用。找到我的元素会根据您拥有的文档结构而变化。

<html>
    <head>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <form method="post" id = "formId" action="action.php" onsubmit="return false;">
            <table>
                <tr>
                    <td>
                        <label class="standard_text">E-mail</label>
                    </td>
                    <td><input class="textarea"  name="mail" id="mail" placeholder="E-mail"></label></td>
                    <td><input class="textarea"  name="name" id="name" placeholder="E-mail">   </label></td>
                    <td><input class="textarea"  name="myname" id="myname" placeholder="E-mail"></label></td>
                    <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
                    <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
                    <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
                </tr>
            </table>
            <input class="button_submit" type="submit" name="send_form" value="Register"/>
        </form>
    </body>
</html>

var inputs;
document.addEventListener("DOMContentLoaded", function(event) {
    var form = document.getElementById('formId');
    inputs = form.getElementsByTagName("input");
    for(var i = 0 ; i < inputs.length;i++) {
        inputs[i].addEventListener('keydown', function(e){
            if(e.keyCode == 13) {
                var currentIndex = findElement(e.target)
                if(currentIndex > -1 && currentIndex < inputs.length) {
                    inputs[currentIndex+1].focus();
                }
            }   
        });
    }
});

function findElement(element) {
    var index = -1;
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i] == element) {
            return i;
        }
    }
    return index;
}

【讨论】：

【解决方案9】：

就是这么简单

var element = querySelector("div")
var nextelement = element.ParentElement.querySelector("div+div")

这里是浏览器支持https://caniuse.com/queryselector

【讨论】：