jQueryやJavascriptの書籍で度々出てくるDOMの表現、配下と直下
これらの意味が合っているか不安だったので、まとめました。
配下 - 祖先要素と子孫要素の関係
結論
ある要素に含まれる要素すべてのこと
具体例
<body id="me">
<p id="child">
配下に含まれる
</p>
<div>
<p class="grandchild">
配下に含まれる ※
</p>
</div>
</body>
上記のコードでは、 me セレクタから見てすぐ下の要素である child と div要素、さらにdiv要素の子要素である grandchild 要素も配下に含まれます。
直下 - 親要素と子要素の関係
結論
ある要素のすぐ内側にある要素のこと
具体例
<body id="me">
<p id="child">
直下に含まれる
</p>
<div>
<p class="grandchild">
直下に含まれない ※
</p>
</div>
</body>
上記のコードでは、 me セレクタから見てすぐ下の要素である child とdiv要素が直下に含まれますが、 配下の場合と異なるのは、さらに下のgrandchildは含まれないことです。