【HTML】親要素と子要素とは!?祖先要素・子孫要素との違いは何?

今回はHTMLの子孫要素について。

HTMLの要素同士の関係性が整理しきれていなかったので、今回は親要素と子要素について整理したいと思う。

スポンサーリンク

親要素とは?

HTMLのコード(HTML文書)は要素同士が階層構造になっている。

そもそも要素というのは<p>~</p>などのセットのことを呼び、「~」の部分の内容まで含む。
→詳しくは【HTML】タグってなに!?要素との違いとは?を読んでみて欲しい。

上記のようなコードがある場合に

<html>~<html>は<head>~</head>や<body>~</body>を挟んだ状態=入れ子構造になっている。

しかも、html要素(<html>~<html>)はhead要素やbody要素のすぐ1つ上の階層にある。

この場合のhtml要素(<html>~<html>)はhead要素やbody要素の「親要素」という。

このようにある要素(今回はhead要素やbody要素)から見て、「すぐ上の階層にある要素(今回はhtml要素)」のことを「親要素」というのだ。

親要素・子要素

子要素とは?

親要素がわかったら、子要素は簡単だ。

「ある要素から見てすぐ下の階層にある要素」を「子要素」という。

つまり、先ほどのコード⇩の場合

html要素はhead要素やbody要素の親要素だった。

一方、head要素とbody要素はhtml要素のすぐ下の階層にあるので、html要素から見れば「子要素」となるのだ。

つまり、どこの視点から見るかによって呼び方が変わってくるのだ、

  • html要素の視点から見れば、head要素やbody要素は「子要素」
  • head要素やbody要素から見れば、html要素は「親要素」

となる。

親子の関係は要素同士がすぐ1つ上(あるいは下)の階層にあることが条件なので、2つ上の階層にいる要素のことを「親要素」とは呼べないことに注意が必要だ。

親要素・子要素②

祖先要素・子孫要素との違いは?

親要素・子要素と紛らわしいのが、祖先要素と子孫要素だ。

親要素と祖先要素の違いは?

「親要素」と「祖先要素」の違いを先ほどの例で説明する。

「親要素」は例えば、h1要素から見て、body要素のように

「すぐ1つ上にある階層の要素」

のことを言う。

そのため、h1要素から見て、「親要素」であるbody要素の更に1つ上の階層であるhtml要素はh1要素の「親要素」ではない。

なぜなら、h1要素にとって、html要素は「すぐ1つ上の階層」ではなく、「2個上の階層」にあるからだ。

では、h1要素にとって、html要素は一体どんな関係か?というと「祖先要素」にあたる。

「祖先要素」はある要素(今回はh1要素)にとって直結した上位の要素(親要素の親要素など)のことをいうのだ。

h1要素にとって上位の要素は全て「祖先要素」にあてはまる。

そのため、h1要素にとっての親要素であるも「祖先要素」に含まれるのだ。

祖先要素はある要素から見て2つ上の階層の要素だけでなく、直結した上位の要素全てを指すから、

「すぐ1つ上の階層である「親要素」も含む上位の階層の要素全て」

を指す。

これが「親要素」と「祖先要素」との違いだ。

「祖先要素」は「親要素」よりももっと範囲が広いのだ。

子要素と子孫要素との違いは?

子要素と子孫要素との違いも同じことだ。

子要素は

「ある要素から見てすぐ1つ下の階層にある要素」

だから2つ下の階層にいる要素は「子要素」ではない。

一方、子孫要素は「ある要素に直結した下位要素全て」のことを指す。

そのため、ある要素から見て、すぐ1つ下の階層である「子要素」も2階層下の要素なども全て「子孫要素」に該当するのだ。

先程の例で言えば、html要素にとって、すぐ1つ下の階層であるhead要素やbody要素も2つ下の階層であるh1要素やp要素も全て「子孫要素」ということだ。

関連記事はこちら!

【HTML】タグってなに!?要素との違いとは?

スポンサーリンク
おすすめの記事