推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
JS 的 querySelector 和 JQuery 的是一样的语法么？还是有些许区别？
yazoox · 2021-03-25 10:17:12 +08:00 · 3011 次点击这是一个创建于 1322 天前的主题，其中的信息可能已经有所发展或是发生改变。
这个是基本的网页里面的数据，\
<div>
<p>
A
</p>
<p>
A global issue
</p>
</div>
<div>
<p>
C
</p>
</div>
如上，我在 chrome 浏览器，打开 console，输入
$("div p:contains('A')")
提示我出错
Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div p:contains('A')' is not a valid selector.
at <anonymous>:1:1
但是，有时候又能够成功，我“傻掉”了......
n.fn.init [prevObject: n.fn.init(1), context: document, selector: "div p:contains('A')"]
p.s.
之所以问这个问题，是因为我在用 WebDriverIO 写 end-to-end 测试时，
declare var browser: WebdriverIO.BrowserObject;
我想用 browser 查找一个 div 的 text 为“A"或者，p 的 text 为“A"的对象，
browser.$("div p:contains(’A')");
调用总是失败，所以，我用 jsbin 试了一下，有时候成功，有时候失败。我也查了一样 DOM 的 querySelector & JQuery，没找到原因。
所以来问问。
p.s.2
jsbin sample:
 |
1
Girlphobia 2021-03-25 10:31:55 +08:00
AFAIK, `:contains()` 是一个 jQuery selector，并不是 CSS 标准。
https://api.jquery.com/contains-selector/ |
 |
2
cin 2021-03-25 10:38:35 +08:00
你成功时是调用了 jQuery 的 $方法, 失败则是调用了 console 的 $方法. console 面板里也提供了一个便捷调试用的 $, 类似于 querySelector. querySelector 只接收有效的 CSS 选择器.
可以加个样式 div p:contains('A') {color: red} 来验证下. |
 |
3
DOLLOR 2021-03-25 10:41:14 +08:00
querySelector 和 querySelectorAll 用的是 CSS 选择器（ CSS selectors ），跟 jquery 的选择器有些不同。
|
 |
4
Rhilip 2021-03-25 13:50:09 +08:00
|
 |
5
yazoox OP @Rhilip
@Girlphobia 回取最初的需求，那我怎么 selector 一个 div 或者 p 这样的元素对象，基 text 是指定的值呢？ 比如，我想找到 text 为 abc 的 div 对象？ <div>abc<div> |
 |
6
xuanzizhe 2021-03-25 14:29:03 +08:00
这个恐怕没有什么好的高效的方式，间接的办法先取到 div/p 元素，然后循环判断 element.textContent 是否包含 abc，但 textContent 是会取到所有子元素的文本的，这表示你的 abc 可能是间隔分布在文本节点和 element 子元素内的，如果这没问题的话，你可能还得去重，因为假如子元素能筛选到的话、父元素也一定能筛选到，这样下来性能应该是不会好到哪去的了~
|
 |
7
wxsm 2021-03-25 14:32:59 +08:00  1
> 回取最初的需求，那我怎么 selector 一个 div 或者 p 这样的元素对象，基 text 是指定的值呢？
这个可以用 xpath 做，比较方便。 举例： //*[contains(text(),'ABC')] https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript |
|
8
xuanzizhe 2021-03-25 15:22:57 +08:00
@wxsm 👍🏻 是个好办法啊，不过看了下 xpath 里 contains 方法和 jquery 里的:contains 选择器还是有些区别的，如上面所说，xpath 里匹配到的文本必须是在元素的文本子节点里连续存在的，相当于获取到元素后，再遍历元素的所有文本子节点看是否包含，比如『<div>ab<span>c</span></div>』，在 xpath 里是只能匹配到文本『 ab 』而不能匹配到『 abc 』的，所以看实际需求了，如果你的需求就是如 xpath 的处理方式一样，那原生的就能满足了，如果是如 jquery 的处理方式，那就不如直接引下库了~
|
Select Language