这个是基本的网页里面的数据,\
如上,我在 chrome 浏览器,打开 console,输入
$("div p:contains('A')")
提示我出错
Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div p:contains('A')' is not a valid selector.
at :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:
https://jsbin.com/gecodut/edit?html,output
AFAIK, `:contains()` 是一个 jQuery selector,并不是 CSS 标准。
https://api.jquery.com/contains-selector/
你成功时是调用了 jQuery 的 $方法, 失败则是调用了 console 的 $方法. console 面板里也提供了一个便捷调试用的 $, 类似于 querySelector. querySelector 只接收有效的 CSS 选择器.
可以加个样式 div p:contains('A') {color: red} 来验证下.
querySelector 和 querySelectorAll 用的是 CSS 选择器( CSS selectors ),跟 jquery 的选择器有些不同。
我在前贴回过,可参 https://www.v2ex.com/t/747726?p=1#r_10108500
回取最初的需求,那我怎么 selector 一个 div 或者 p 这样的元素对象,基 text 是指定的值呢?
比如,我想找到 text 为 abc 的 div 对象?
abc
这个恐怕没有什么好的高效的方式,间接的办法先取到 div/p 元素,然后循环判断 element.textContent 是否包含 abc,但 textContent 是会取到所有子元素的文本的,这表示你的 abc 可能是间隔分布在文本节点和 element 子元素内的,如果这没问题的话,你可能还得去重,因为假如子元素能筛选到的话、父元素也一定能筛选到,这样下来性能应该是不会好到哪去的了~
> 回取最初的需求,那我怎么 selector 一个 div 或者 p 这样的元素对象,基 text 是指定的值呢?
这个可以用 xpath 做,比较方便。
举例:
//*[contains(text(),'ABC')]
https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript