gpt4 book ai didi

javascript - 不包含 block 引用的节点的查询选择器

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:47:31 25 4
gpt4 key购买 nike

我正在尝试为以下标记找出一个选择器。我想要所有节点,除了包含 block 引用的节点<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。

最佳答案

您无法在 native 执行此操作。在任何当前的选择器规范中都无法通过子元素过滤元素。 (然而,这可能会出现在未来的选择器规范中。)

因此,您需要自己进行过滤。这不是特别困难。一种方法是选择所有相关元素,然后过滤掉不需要的元素:

Array.prototype.slice.call(document.querySelectorAll("body > *"))
.filter(function(el) {
return !el.querySelector(':scope > blockquote');
})

(jsFiddle)

这会将选择变成一个数组,然后使用 Array#filter去除所有包含 blockquote 元素的方法。

显然这比原生选择器的性能要差得多,但这是在当前 JS 中做你想做的事情的唯一方法。

正如 BoltClock 正确指出的那样,:scope 还不是官方标准。 Chrome 确实支持它这一事实让我产生了一种错误的安全感:其他浏览器尚不支持。如果您想在任何级别排除包含 blockquote 元素的任何顶级元素,最好的方法是:

return !el.querySelector('blockquote');

关于javascript - 不包含 block 引用的节点的查询选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19910709/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com