在GWT中通过CSS选择器查找元素

Question

我正在尝试使用CSS选择器抓取任意元素(例如。"#someId .className a")。

我正在建立一个JS小工具，可以生活在第三方网站上，并希望能够与页面上的元素互动。通过搜索JavaDocs，我没有看到任何可以通过选择器找到元素的东西。我确实遇到过GQuery，但它看起来像是might be dead项目，我不确定它是否适用于GWT2。

我考虑过的一种选择是将现有的库(jQuery、Mootools、Prototype等)包装到GWT类中，并通过JSNI公开所需的行为。看起来这可能是非常复杂的。

有人有在GWT中使用通用CSS选择器的经验吗？

Answer 1

有一个DOM类，它提供了许多用于访问DOM树的包装器方法。据我所知，没有采用CSS选择器jQuery风格的函数- GWT只是鼓励/强制通过小部件(等等)访问DOM元素，而不是直接访问DOM元素-尽管我知道在您的情况下可能需要这种“低级”方法。我认为通过纯Java GWT方法实现这一点的唯一方法是通过大量(可能很可怕) DOM类的链接/调用。如果你所要做的就是访问一些id，那就更简单了--因为有RootPanel.get(id) (和DOM.getElementById(id) )。

然而，正如你已经建议的，JSNI可能会提供一个更好的解决方案--例如，试着从JSNI返回$wnd.$("#someId .className a")作为Element -实际上，你可以从JSNI返回任何东西，GWT只会在你试图使用的那一秒就搞砸了，比如说一个int作为DOM元素或其他东西。

PS:虽然GQuery项目看起来确实是死的/不活动的，但可能有必要检查一下它们是如何包装jQuery调用的(比如$)，以便它们看起来可以在GWT中使用。

Answer 2

使用GwtQuery，已更新到GWT2.4：http://code.google.com/p/gwtquery/

选择器示例：

//select an element having id equals to 'container'
GQuery myElement = $("#container");
//select all elements having 'article' as css class
GQuery allArticles = $(".article");
/select all cells of tables
GQuery allCells = $("table > tr > td");
//find the ul elements being inside a element with class 'article' itself inside a element with id 'container'
GQuery articleUls = $("#container .article ul");

http://code.google.com/p/gwtquery/wiki/GettingStarted

Answer 3

您可以使用querySelector()和querySelectorAll()，它们可用于较新的浏览器...

http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

根据浏览器支持条款，

...in 3.1+、IE8+ (仅在IE8标准模式下)和Safari 3.1+

支持querySelector()和querySelectorAll()