jQueryやJavascriptの書籍にでてくる表現、配下と直下の違い
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は含まれないことです。