More than 5 years have passed since last update.

jQueryの配下と直下の違い

Last updated at 2016-09-12Posted at 2016-09-12

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は含まれないことです。