logo标签列表

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

javascripthtmldom
169

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

假设我有三个<div>，并且我在JavaScript代码中引用其中一个，我想要获取它后面的一个<div>和前面的一个<div>。

10个回答
328

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

105
nextElementSibling 更加有用。 - Trisped
9
请注意，nextSibling和nextElementSibling并非完全跨浏览器兼容。Firefox的nextSibling返回文本节点，而IE则不返回。另外，nextElementsibling在IE9之前的版本中没有实现。 - Carl Onager
3
如果这些元素不是兄弟节点，那么这个方法将无法起作用。 - rvighne
1
@Kloar：问题是如何获取HTML中的“下一个[div]元素”。标记中的下一个div可能不会与元素相邻；它可能比元素深一级或高一级。 - rvighne
不要忘记在 while 循环语句中加上 ';'。 - VikkyB
显示剩余4条评论
37

很简单。试试这个：

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

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

如果你有：

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

可能只需要使用遍历就能解决问题。

mydiv.nextSibling;
mydiv.previousSibling;

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

document.getElementsByTagName("div");

并且通过这些运行，以某种方式达到您想要的目的。

如果您正在执行许多复杂的DOM遍历操作，例如此类操作，我建议您查看像jQuery这样的库。

3
应该是nextSibling，我认为这是对的。 - paul_h
33

在纯JavaScript中，我的想法是您首先需要将它们收集到一个集合中。

var divs = document.getElementsByTagName("div");
//divs now contain each and every div element on the page
var selectionDiv = document.getElementById("MySecondDiv");
所以基本上使用selectionDiv迭代遍历集合，然后显然地-1 = previous +1 = next在边界内。
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属性。
1
这似乎是一个不错的解决方案，但如何获取下一个元素呢？因为你现在只有集合和所选元素，你能再帮我一下吗？ - Amr Elgarhy
27
每个 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似乎是跨浏览器的解决方案。 - Niks
17

这很简单... 这是纯JavaScript代码

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>
9
所有这些解决方案看起来都有点过度设计。为什么不使用我的解决方案呢？
IE9及以上版本支持previousElementSibling。
document.addEventListener需要一个polyfill。 previousSibling可能会返回文本。
请注意，我选择在边界被打破时返回第一个/最后一个元素。在实际应用中，我更喜欢它返回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
您可以使用 nextElementSibling 或 previousElementSibling 属性。
<div>
    <span id="elem-1">
        span
    </span>
</div>
<div data-id="15">
    Parent Sibling
</div>


const sp = document.querySelector('#elem-1');
let sibling_data_id = sp.parentNode.nextElementSibling.dataset.id;
console.log(sibling_data_id); // 15
1

我测试过了，对我有效。您需要根据您拥有的文档结构更改找到我的元素。

<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;
}
-1

这太简单了

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

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

1
应该使用element.parentElement，ParentElement似乎不起作用。 - Thomas
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接