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/