Question

我正在尝试使用GWT中的CSS选择器（例如“#someId .className a”）来获取任意元素。

我正在构建一个可以在第三方网站上生活的JS小部件，并且希望能够与页面上的元素进行交互。通过JavaDocs搜索我没有看到任何可以通过选择器找到元素的东西。我确实遇到过GQuery，但它似乎是项目might be dead，我不确定它是否适用于GWT 2.

我考虑过的一个选项是将现有的库（jQuery，Mootools，Prototype等）包装到GWT类中，并通过JSNI公开所需的行为。看起来这可能非常庞大。

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

Answer 1

有DOM类，它提供了许多用于访问DOM树的包装器方法。没有一个函数可以采用我所知道的CSS选择器jQuery样式 - GWT只是鼓励/强制通过Widgets（等等）访问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，更新为GWT 2.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

...在浏览器支持方面，Firefox 3.1 +，IE8 +（仅限IE8标准模式）和Safari 3.1 +
支持querySelector（）和querySelectorAll（）

Answer 4

按toCollection()启发。

只需定义此方法，并在Web应用程序在现代浏览器中运行时享受它。

public final native NodeList<Element> querySelectorAll(String selectors) /*-{
 return $doc.querySelectorAll(selectors);
 }-*/;

Answer 5

这是一个使用GWT元素和Node类查找具有给定类名的单个嵌套元素的示例。这不像文字CSS选择器那样开放和强大，但可以根据具体用例的需要进行修改：

static public Element findFirstChildElementByClassName( Widget w, String className ){
    return findFirstChildElementByClassName( w.getElement(), className );
}
static private Element findFirstChildElementByClassName( Element e, String className ){     
    for( int i=0; i != e.getChildCount(); ++i ){
        Node childNode = e.getChild(i);
        if( childNode.getNodeType() == Node.ELEMENT_NODE ){
            Element childElement = (Element)childNode;
            if( childElement.getClassName().equalsIgnoreCase( className ) )
                return childElement;
            else if( childElement.hasChildNodes() ){
                Element grandChildElement = 
                    findFirstChildElementByClassName( 
                            childElement, className );
                if( grandChildElement != null ) return grandChildElement;
            }
        }
    }
    return null;
}

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

5 个答案: