良かったらコメントで意見を聞かせてください。
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)
参考