【JavaScript】子要素の取得方法はどっちが良い？

良かったらコメントで意見を聞かせてください。

case1

const index = N; // 0以上の整数
const parentNode = document.getElementById('parent'); // ←これが本質
const childNodeList = parentNode.children;
const childNode = childNodeList[N];

つまり本質としては『親要素を取得』ということだと思います。

case2

const index = M; // 自然数
const childDivNode = document.querySelector('#parent :nth-child(M)'); // ←これが本質

つまり本質としては『特定の要素を取得』ということだと思います。

【コメ欄より】

:nth-child(M)

と記述することで、M番目の任意の子要素を取得できます。

（tag名を明記する必要があると思っていました）

個人的な見解

私はいつも、以下の理由によりcase1の書き方をします。

• 配列と同様に0から要素をカウントできる（プロジェクト内で最初のインデックスが統一される）
• JavaScriptの知識だけで内容を理解できる（CSSの知識ゼロでOK）
• childrenプロパティ自体はCollectionなので他にも色々できる（総数カウント・配列化とループなど）

逆にcase2を避ける理由。

• querySelectorがあまり好きではない（狙ったDOMの取得に失敗する可能性がある）←今回はなさそう？
• nth-childはCSSの書き方なので、『こう書かないと実装できない』ケースを除いて使いたくない
• nth-of-typeとの使い分けで、絶対に間違えない自信がない
• 『要素を1つ取得』以外の汎用性がない

※コメ欄より補足

nth-childの記述方法について教えて頂きました。
感謝です🙏

奇数番目のtagを選択

両者は同じ結果になる

tag:nth-of-type(2n + 1)

:nth-child(2n + 1 of tag)

補足の補足

この場合、両者は異なる要素を選択する可能性がある。

// 要素の奇数番目がtagなら選択
tag:nth-child(2n + 1)

// tagに対して奇数番目を選択
:nth-child(2n + 1 of tag)

参考