getElementById on XBL element
phreed
<foo id="bar"/>
Where svg:foo is an element supported via XBL.
Suppose a Javascript that wishes to gain access to this element via
getElementById.
var foo = document.getElementById('bar');
This doesn't work as the 'id' attribute is not of type ID.
An alternative approach that almost works makes use of...
<g class="foo" id="bar"/>
This is better in that the getElementById works as expected.
However there is still a problem with creating the the element
programmatically.
It can only be partly constructed as the 'className' property cannot
be set.
var foo = document.createElementNS(SvgNs, "g");
foo.className = 'foo'; // (error: setting a property that
has only a getter).
foo.id = uuid;
I have seen some documentation on the 'xml:id' attribute but that
appears to not be available.
Boris Zbarsky
> This doesn't work as the 'id' attribute is not of type ID.
Of course you could declare it that way in your doctype... And in any case, if
it's really an <svg:foo> I would think the 'id' attribute would in fact be of
type ID, unless SVG has some SVG elements not having an 'id' attribute of type
ID (which come to think of it might be the case; only SVGStyledElement support
IDs or something).
> This is better in that the getElementById works as expected.
> However there is still a problem with creating the the element
> programmatically.
Why?
> It can only be partly constructed as the 'className' property cannot
> be set.
.setAttribute("class", "whatever");
None of this has anything to do with XBL, as far as I can tell, so setting
followup to .svg.
-Boris
phreed
In summary I am trying to dynamically create elements based on an XBL
binding.
The resulting element must have an ID attribute suitable for using
document.getElementById().
Bjoern Hoehrmann
>It can only be partly constructed as the 'className' property cannot
>be set.
>
> var foo = document.createElementNS(SvgNs, "g");
> foo.className = 'foo'; // (error: setting a property that has only a getter).
The .className attribute is of type SVGAnimatedString, as you might have
noticed trying to read the attribute value. Use .setAttributeNS to set
the attribute, or use
foo.className.baseVal = 'foo';
See e.g. http://www.w3.org/TR/SVG11/idl.html for other details here.
--
Björn Höhrmann · mailto:bjo...@hoehrmann.de · http://bjoern.hoehrmann.de
Weinh. Str. 22 · Telefon: +49(0)621/4309674 · http://www.bjoernsworld.de
68309 Mannheim · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/
Boris Zbarsky
> In summary I am trying to dynamically create elements based on an XBL
> binding.
Dynamically create how, exactly? createElementNS? Something else?
> The resulting element must have an ID attribute suitable for using
> document.getElementById().
You can do this by creating elements that have such an attribute on them by default.
-Boris
phreed
Yes, I am using createElementNS to create elements in the SVG
namespace having an effective 'id' attribute.
How is the ID set by default?
Thanks for the link to using the baseVal to set className.
Boris Zbarsky
> Yes, I am using createElementNS to create elements in the SVG
> namespace having an effective 'id' attribute.
That should work.
> How is the ID set by default?
They need to be in a language that Gecko assumes has an @id of type ID (HTML,
SVG, XUL) or they need to be an element that the internal subset of the DTD for
the page defines to have an @id of type ID.
-Boris
phreed
Context : defining a new XUL/HTML/SVG (XHS) element using XBL.
Problem : XHS elements have a unique id, but the new XBL element does
not.
(My Ideal) Solution : allow a proper 'id' attribute for XBL elements.
xul:
<svg:foo id="bar"/>
css:
foo { -moz-binding: "chrome://myapp/content/my-xbl.xml#foo" }
my-xbl:
<xbl:binding id="foo"> ...somehow define the 'id' attribute... </
xbl:binding>
Work around 1 :
Use an element that has a valid 'id' attribute and bind to the XBL
based on something other than the tag name.
xul:
<svg:g type="foo" id="bar"/>
css:
[type=foo] { -moz-binding: "chrome://myapp/content/my-xbl.xml#foo" }
my-xbl:
<xbl:binding id="foo"> ...id is already set... </xbl:binding>
Notes:
I did not realize that the CSS class notation was only special for
HTML.
Boris Zbarsky
> Problem : XHS elements have a unique id, but the new XBL element does
> not.
Meaning what, exactly?
> <svg:foo id="bar"/>
Ah, so your problem is that unknown SVG elements create a random XML element
instead of creating an element that behaves like SVG elements. OK./
> <xbl:binding id="foo"> ...somehow define the 'id' attribute... </
> xbl:binding>
There's no way to do that.
> Work around 1 :
> Use an element that has a valid 'id' attribute and bind to the XBL
> based on something other than the tag name.
That's an option, yes. You could also have a DTD with an internal subset that
declares that attribute to be of type ID for that tagname.
> Notes:
> I did not realize that the CSS class notation was only special for
> HTML.
It's not. It also works for some (but not all) SVG elements and for XUL. More
to the point, it works for any element which has an attribute that claims to be
a class attribute in the CSS sense, not just an attribute named "class".
-Boris