标签：javascript css-selectors selectors-api
我正在试图找出以下标记的选择器.我想要所有节点,除了包含blockquote的节点. < blockquote>永远是< div>的直接孩子这将是< body>的直接孩子.标签.
示例HTML：
<ul>
<!-- Lots of HTML -->
</ul>
<div>
<p>
<!-- Lots of other HTML -->
</p>
</div>
<div>
<blockquote>Some text I don't care about</blockquote>
</div>
预期结果：
<ul><!-- Lots of HTML --></ul>
<div><p><!-- Lots of other HTML --></p></div>
尝试选择器：
document.querySelectorAll("body > :not(div > blockquote)")
我尝试了上面的内容,但我不能将一个直接的子选择器放在：not()选择器中. Here is a fiddle失败的尝试.
我目前不是,也不能使用jQuery.
解决方法:
你原生不能这样做.在任何当前的选择器规范中,无法通过子节点过滤元素. (但是,这可能会出现在未来的选择器规范中.)
因此,您需要自己进行过滤.这并不是特别困难.一种方法是选择所有相关元素,然后过滤掉你不想要的元素：
Array.prototype.slice.call(document.querySelectorAll("body > *"))
.filter(function(el) {
return !el.querySelector(':scope > blockquote');
})
这会将选择转换为数组,然后使用Array#filter方法去掉所有包含blockquote元素的方法.
显然,这比原生选择器的性能差得多,但它是在当前JS中做你想要的唯一方法.
正如BoltClock正确指出的那样：范围还不是官方标准.由于Chrome确实支持它,我被一种虚假的安全感所迷惑：其他浏览器还没有.如果要在任何级别排除包含blockquote元素的任何顶级元素,最好的方法是：
return !el.querySelector('blockquote');
标签：javascript,css-selectors,selectors-api 来源： https://codeday.me/bug/20190624/1281475.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。