JavaScriptコンポーネントをトップダウンで取得する

Question

私はDOMを持っており、いつでも要素を見つけたいときはいつでもgetElementByID/Classを実行したくありません。私は最初の要素を取得し、その位置から要素1を1つ下に移動する機能が必要です。すなわち

次々に、私は「1」したいと仮定すると、「2」と「3」

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

、私は2を取得し、そこから3を得るために移動して、そこから1、その後のダウン取得する機能が欲しいです。 どうやってやるの？

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('*') 

当然、それはあなたに直接子供だけでなく、すべての子孫を与えるでしょう。 2番目以降の兄弟を取得するには：

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