Element.querySelector()选择元素出乎意料的情况（选不准）

Element.querySelector方法接受CSS选择器作为参数，返回父元素的第一个匹配的子元素。如

let content = document.getElementById('content');
let el = content.querySelector('p');

上面代码返回content节点的第一个p元素。

 

而出乎意料的情况呢？

下面是HTML代码：

<div>
<blockquote id="outer">
  <p>Hello</p>
  <div id="inner">
    <p>World</p>
  </div>
</blockquote>
</div>

JS选择元素代码：

let outer = document.getElementById('outer');
outer.querySelector('div p')
// <p>Hello</p>

运行后发现，代码实际上会返回第一个p元素，而不是第二个。

原因就是：

浏览器执行querySelector方法时，是先在全局范围内搜索给定的CSS选择器，然后过滤出哪些属于当前元素的子元素。因此，会有一些违反直觉的结果。CSS选择器先选择div时选到的是outer外的<div>然后选中了outer内的第一个p, 也就是<p>Hello</p>。正好<p>Hello</p>在outer内，满足是outer的子元素的要求，浏览器就返回了。

阮一峰的 JavaScript标准参考教程 中有详细的DOM选择器的介绍 http://javascript.ruanyifeng.com/