querySelector(All)のレシーバは、セレクタのコンテキストには影響を与えない

<ul id="list">
  <li>階層1</li>
  <li>階層1
    <ul>
      <li>階層2</li>
      <li>階層2</li>
    </ul>
  </li>
</ul>

<script>
var list = document.getElementById('list');
var lis = list.querySelectorAll('ul li');
</script>

変数lisには階層2のli要素だけが含まれると思っていたが、実際には階層1のli要素も含まれてしまう。

querySelector、querySelectorAllは、レシーバの要素を基準にしてセレクタにマッチする要素を探し出すのではなく、まず文書からセレクタに一致する要素を探し出し、その中からレシーバの要素の子孫にあたる要素だけを選び出すようだ。

期待していた結果をjQueryで例えると...

$('#list').find('ul li');

実際の結果をjQueryで例えると...

$('ul li').filter(function () {
  return $(this).parents().index($('#list')) !== -1;
});