cssセレクタのfirst-childとjavascriptエレメントのfirstChildの違い

コーディングを仕事でしている人、楽しんでいますか？ 極稀にお会いするエンジニアの方で、プログラムが嫌いというプログラマーがいらっしゃいますが、「やめてまえ！」と言いたいのを押さえて理由を聞いてみると、そもそも書き物をする作業が得意ではなく、思考するような仕事は向いていないと自己分析している理由を聞きました。 スポーツジムのトレーナーでもやればいいのに、そうした人は大体が怠惰な体をしていて、腹は胸よりも突き出していて、顎のラインが見えない首元の人がだいたいですね。 そうしたやる気のない人は、「相手にしないのが一番」と改めて考えさせられましたが・・・話はコーディングの内容になります。 WEBページをコーディングしている時に、cssのセレクタを意識しながらDOM構造をコントロールすると、整った構造体のページ構築ができます。 とあるリストの先頭を選択する「first-child」というセレクタは、javascriptのエレメント操作にも「firstChild」として存在しますが、この２つは扱いが全く違っていてトラブルに成りかけたので、ちゃんと理解しなくてはいけないと思い記事に書いておくことにします。

CSSセレクタの「first-child」

See the Pen css-first-child by YugetaKoji (@geta1972) on CodePen.

cssセレクタでは、「firstChild」は「nth-child(1)」と同じです。 この点はさほど難しくないのですが、注意点としては、demo-3の様なnth-child()は、子要素全体が対象になるので、spanの何番目というような感じにならないところがトラブルに成りやすい点です。

Javascriptの「firstChild」

See the Pen javascript-firstChild-test by YugetaKoji (@geta1972) on CodePen.

javascriptでは、first-childは、elementではなく、nodeの1番目が選択されてしまいます。 elementとnodeって何がどう違うのかと言うと、nodeは、HTML構造の全ての要素の事でtext-nodeやtag-node、comment-nodeなど様々な形がありますが、その中のtag-nodeの事をelement-nodeと言います。 要するにelementはnodeの中の要素の一つということですね。

HTML > Node > Element

こんな構造になるようです。 そして、firstChildはnodeに対して働き、firstElementChildはelementに対して働くという事を理解すると、javascriptの理解がしやすいと思います。

「last-child」も「lastElementChild」

ちなみに、類似機能として、last-childというセレクタがありますが、javascriptでも、lastElementChildとすると似たような情報取得ができるようになります。 liタグなどを使ったリスト構造のページなどで利用することが容易に創造できますね。 Have a good coding!