JavaScriptで、「指定した要素から指定した要素までを全て取得する」方法について

Question

Javascriptを用いて、「指定した要素から指定した要素までを全て取得する」なんらかのメソッドはありますか？もしくは、指定した要素から指定数分同じ階層の要素を取得できますでしょうか？

前提を示すと、その間の要素にname属性やclass属性を振らないという条件です。

イメージ的にはこんな感じです

<ul> <li>こんにちは太郎</li> <li>こんにちは敦子</li> <li>こんにちは山田</li> ->この要素から(この要素は取得できます) <li>こんにちは新木</li> <li>こんにちは前田</li> <li>こんにちは郁夫</li> ->この要素までを取得 <li>こんにちは幸子</li> <li>こんにちは華子</li> </ul>

Comments

[Zuishin]

https://developer.mozilla.org/ja/docs/Web/API/ParentNode/children

[m.ts10806]

まず思ったように組んでみてください。

[m.ts10806]

できるかできないかだと大抵は「できる」です。それでいいですか？

[Lhankor_Mhy]

「この要素は取得できます」とのことですが、name属性やclass属性なしで、どうやって取得しているのですか？

[sigisyun]

次から組んだものを提示します。失礼しました！

[sigisyun]

Zuishinさん、ありがとうございます！

[m.ts10806]

質問は編集できるので適宜ご対応ください。
書いた内容以上は拾えませんので「何もやってない」と見なされます

Answer 1

document.querySelectorAll('li:nth-child(n+3):nth-child(-n+6)')

戻り値はNodeListですのでご注意。
Document.querySelectorAll() - Web API | MDN | Document.querySelectorAll() - Web API | MDN

Comments

[sigisyun]

甘い質問申し訳ありません。迅速なご回答本当にありがとうございました！

[jun68ykt]

こちらも勉強になりました。そのように、nth-child　を : でつなげると、「〜番目から〜番目まで」になるとは知りませんでした。

Answer 2

ご質問にあるサンプルのように、<li> のうち、３番目から6番目を配列で得たいのであれば、以下で取れます。

[...document.querySelectorAll('li')].filter((_, i) => 2<=i && i<=5)

• 動作確認用サンプル： https://codepen.io/jun68ykt/pen/QWbLLRq?editors=1112

Comments

[Lhankor_Mhy]

横からですが、NodeListって、HTMLツリーの順序が保証されているんですね。
勉強になりました。

[sigisyun]

勉強になります。