Question

我有一个DOM，每当我想找到一个我不想一直做getElementByID / Class的元素时。我希望能够获得第一个元素，然后从该位置获得逐个向下移动的元素。即

<div>
  <p id="1"></p>
  <p id="2"></p>
  <p id="3"></p>
</div>

假设我想要＆＃34; 1＆＃34;，＆＃34; 2＆＃34;和＆＃34; 3＆＃34;一个接一个，我希望能够得到1，然后从那里下移到2然后从那里得到3.我怎么能这样做？

Answer 1

尝试类似

的内容

document.getElementById('1').nextSibling;

另外，看看这个答案： https://stackoverflow.com/a/574922

Answer 2

您可以使用TreeWalker来走树。在你的情况下，

const first = document.getElementById('1');
const walker = document.createTreeWalker(first, NodeFilter.SHOW_ELEMENT);
let next;

while (next = walker.nextSibling()) {
  console.log("Got next sibling", next);
}

如果您想要的是兄弟姐妹，这可能会有些过分，但它可以提供更复杂的步行类型。

您还可以考虑使用document.evaluate，它允许您根据名为XPath的语言查找节点。在这种情况下，它看起来像

const xPathResult = document.evaluate('following-sibling::p', first, 
  null, XPathResult.ANY_TYPE, null);

这将返回一个你可以通过的迭代器：

while (next = xPathResult.iterateNext()) {
  console.log("Got next sibling", next);
}

如果选择元素的条件更复杂，这可能很有用，因为XPath几乎可以代表任何东西。

获取元素的另一种方法当然是querySelectorAll。但是，它无法选择兄弟姐妹。您需要从父母开始：

first.parentNode.querySelectorAll('*')

当然，这将给你所有的后代，而不仅仅是直接的孩子。为了得到第二个和后面的兄弟姐妹：

document.querySelectorAll('#1 > p:not(:first-child)')

自上而下获取JavaScript组件

2 个答案: