从DOM中选择元素，它不是所选e的兄弟

Question

我选择了span元素，我想要遍历input:checkbox。我尝试过使用next()，nextAll()，nextElementSibling。但由于input元素不是span的兄弟，因此无效。我可以选择输入元素吗？

以下是我的代码：

<span>This element is selected via javascript</span>

<div>
  <a href="some link"></a>
</div>


<div class="mb_content">
  5 attachement
  <br />
  <span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>

<div class="checker f_left">
  <label for="rec_787128222">&nbsp;</label>
  <input type="checkbox" class="mb_check" /><!--i want to select this-->
</div>

PS：实际结构有点不同，但我不能将其粘贴在这里。这是它的复制品。

Answer 1

如果您真的想使用nextSibling() ...

var el  = document.querySelector("#foo").nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.children[1];

el.style.display = 'none';

<span id="foo">This element is selected via javascript</span>

<div>
  <a href="some link"></a>
</div>


<div class="mb_content">
  5 attachement
  <br />
  <span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>

<div class="checker f_left">
  <label for="rec_787128222">&nbsp;</label>
  <input type="checkbox" class="mb_check" />
  <!--i want to select this-->
</div>

Answer 2

如果不对null进行任何检查，您可以尝试：

document.querySelectorAll('.error_star.mr_1')[0].parentNode.nextElementSibling.children[1];