はじめに

JavaScriptのDOMの勉強をし始めて、Elementと名の付くプロパティが使えたり使えなかったり大変だなあと感じています。
取得の仕方がとても重要そうなことを理解したので、今回はdocument.querySelectorとdocument.querySelectorAllで取得できるデータの形と、それぞれにNodeオブジェクトのプロパティ「.firstChild」「.lastChild」が使えるか試してみました。

結論

①document.querySelectorで取得(Elementオブジェクト)
→first/lastChildプロパティ利用可
➁document.querySelectorAllで取得(NodeListオブジェクト)
→first/lastChildプロパティ利用不可
ちなみに、
③getElementByIdで取得(Elementオブジェクト)
→利用可
④getElementByTagName/ClassNameで取得(HTMLCollectionオブジェクト)利用不可

利用可の①と③はどちらもElementオブジェクトとして単一の要素を取得するようですね。

感想

傾向的に複数の要素を含むような取得の仕方をすると、使えなくなるプロパティが増えるようです。前回の記事↓
classやタグで取得したデータにgetElementsが使えない件