在GWT中按属性获取DOM元素？

Question

I want to add elements in GWT to the following element of a static html page:

<div data-id="test"></div>

When I would have used this:

<div id="test"></div>

then I could have accessed the element with:

RootPanel.get("test").add(someElement);

This is only working when I use the id attribute.

How can I access an element that uses an attribute like data-id as I showed in the first example and attach a Panel or a Widget on it?

Answer 1

If you don't need to support IE6/7, then you can go with JSNI:

Element querySelector(String selectors) /*-{
  return $doc.querySelector(selectors);
}-*/;

See http://caniuse.com/queryselector for the compat table.

Maybe GWT 3.0 will add this to GWT proper as IE6/7 support will definitely be removed (it's only disabled by default in GWT 2.6)

Now that you get the Element there's unfortunately no RootPanel.get(Element) method so the only way you can get a panel widget to which you can add other widgets is to use HTMLPanel.wrap(Element) .

Answer 2

使用gwtquery ，你可以像这样匹配元素：

$("div[data-id='test']").add(someElement);