在GWT中通過CSS選擇器查找元素

我試圖在GWT中使用CSS選擇器（例如「#someId .className a」）來抓取任意元素。在GWT中通過CSS選擇器查找元素

我正在構建一個JS小部件，可以在第三方網站上生活，並希望能夠與頁面上的元素進行交互。通過JavaDocs搜索我沒有看到任何可以通過選擇器查找元素的東西。我也碰到過GQuery，但似乎這個項目might be dead，我不知道這是否與GWT 2.工作

一個選擇，我認爲是包裝現有庫（jQuery的，MooTools的，原型，等等）轉換成GWT類並通過JSNI暴露所需的行爲。看起來這可能很builky。

任何人都有在GWT中使用通用CSS選擇器的經驗？

來源

2010-03-09 etoleb

GWTQuery/GQuery似乎已經恢復和活動將最有可能對應於發行的GWT 2.1。 – 2010-12-02 15:37:55

在GWT中沒有本地的'querySelector [All]'真的令人沮喪。我想知道這個項目是否註定會被討厭客戶端開發的人所運營。 – rxgx 2011-03-02 22:51:45

這裏有DOM類，它提供了許多訪問DOM樹的包裝方法。沒有函數需要我知道的CSS選擇器jQuery樣式 - GWT只是鼓勵/強制通過Widgets（而不是直接）訪問DOM元素 - 儘管我知道在您的情況下，這種「低級」方法可能會被需要。我看到通過純Java GWT方法解決這個問題的唯一方法是通過很多很多（可能是可怕的）鏈接/調用DOM類。如果你所要做的只是訪問一些id--因爲它有RootPanel.get(id)（和DOM.getElementById(id)，它們在返回的對象類型上有所不同）。

但是，像你已經建議，JSNI可能提供一個更好的解決方案 - 嘗試從JSNI作爲Element返回，例如，$wnd.$("#someId .className a") - 其實，你可以返回任何從JSNI什麼，GWT只會廢話了第二個你嘗試使用，例如說一個int作爲一個DOM元素或東西。 PS：雖然GQuery項目看起來已經死機或者不活躍，但可能值得檢查它們如何包裝jQuery調用（例如$），以便它們可以在GWT中看起來使用。

來源

2010-03-09 01:40:00

試試這個，我得到：「Uncaught TypeError：Object [對象DOMWindow]沒有方法'$'」我需要頁面上的jQuery.js還有什麼？ – 2011-11-25 13:19:44

是的，你需要在你的主頁中包含jQuery .js文件。另外，看看[這個問題]（http://stackoverflow.com/q/2319997/181497），但'$'應該從JSNI工作正常。 – 2011-11-26 09:52:49

我猜'document.querySelector（...）'不是一個選項？ – WORMSS 2017-10-02 15:32:11

你可以使用querySelector（）和querySelectorAll（）和可用於新的瀏覽器...

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

...in terms of browser support, querySelector() and querySelectorAll() is supported in Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

來源

2010-07-02 10:31:09

'querySelector'和'querySelectorAll'在GWT中不可用。有一個名爲'GwtQuery'或'gQuery'的jQuery選擇器重寫。 – rxgx 2011-03-02 00:15:16

GWT可以調用你想要的任何Javascript方法，你只需要編寫一個小包裝方法來充當參數的傳遞。請參閱GWT文檔中原生方法訪問的文檔。這個方法被用來從我的工作中訪問GWT中的querySelector/querySelectorAll。 – 2011-11-07 16:36:24

我爲自己編寫了一個用於doc /元素querySelector和querySelectorAll的單行GWT JSNI包裝，現在我正在使用它們，結果非常好。簡單，可靠和快速。 – 2011-12-01 16:06:40

使用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

來源

2012-07-28 05:50:33

靈感來自Asfand Yar Qazi answer。

只需定義此方法並在您的Web應用程序在現代瀏覽器中運行時享受它。

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

來源

2015-06-19 21:25:08

這真的有用嗎？你測試過了嗎？如果從本地js返回中隱式轉換爲NodeList ，我會很驚訝。 – BuvinJ 2016-05-05 18:51:25

請檢查：http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html – 2016-05-05 21:09:52

你能證實這對你有用嗎？ – BuvinJ 2016-05-06 19:01:00

下面是一個使用GWT Element和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; 
}

來源

2016-05-05 18:48:24 BuvinJ

在GWT中通過CSS選擇器查找元素

回答

相關問題