L
Lachlan Hunt
Hi,
I'm trying to implement getElementsByClass() for the document object
and the Element interface, that supposed to work for HTML, XHTML, SVG
and MathML class attributes (including mixed namespace documents) and I
have it working perfectly in Gecko (tested in Firefox 1.0.6 and Deer
Park Alpha 2). I'm just having some serious problems with IE and a bug
in Opera.
The test [1] is supposed to get a NodeList (an Array() with an item()
method added) of elements by class name and then output an alert()
containing the tagNames of the selected elements.
After a fair bit of testing, I believe the problem is occuring with the
way I'm trying to attach the getElementsByClassName() and hasClassName()
functions to elements in IE using an HTC. It seems to be breaking at
the point within document.getElementsByClassName() where I call
element.hasClassName (line 34 of the script [2]) but my understanding of
this workaround using HTCs [3]] that I'm trying to use is very limited
and I don't understand why it's breaking.
The bug I'm finding in Opera is with hasAttributeNS() and
getAttributeNS(). For some reason, opera seems to ignore the
namespaceURI and return the attribute if the localName matches. This
isn't really a serious problem, since it would only have side effects if
an author wrote:
<x foo:class="bar">
where foo is defined as any namespace URI where class should not be
treated like the XHTML, SVG, etc. class attributes.
eg.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:foo="http://www.example.org/foo" xml:lang="en">
<head>
<script type="text/javascript"><![CDATA[
window.onload = function() {
var e = document.getElementsByTagName("p").item(0)
if (e.hasAttributeNS("http://www.w3.org/1999/xhtml", "class")) {
alert(e.getAttributeNS("http://www.w3.org/1999/xhtml", "class"));
} else {
alert("PASS");
}
}
]]></script>
</head>
<body>
<p foo:class="FAIL">test</p>
</body>
</html>
Lastly, if anyone finds bugs with other browsers I haven't been able to
test (Mac and Linux browsers) and can suggest a solution, or has any
other improvements to the code in general, that would be greatly
appreciated.
[1]
http://lachy.id.au/dev/script/examples/DOM/getElementsByClassName/tests/001.html
[2]
http://lachy.id.au/dev/script/examples/DOM/getElementsByClassName/getElementsByClassName.js
[3] http://delete.me.uk/2004/09/ieproto.html
I'm trying to implement getElementsByClass() for the document object
and the Element interface, that supposed to work for HTML, XHTML, SVG
and MathML class attributes (including mixed namespace documents) and I
have it working perfectly in Gecko (tested in Firefox 1.0.6 and Deer
Park Alpha 2). I'm just having some serious problems with IE and a bug
in Opera.
The test [1] is supposed to get a NodeList (an Array() with an item()
method added) of elements by class name and then output an alert()
containing the tagNames of the selected elements.
After a fair bit of testing, I believe the problem is occuring with the
way I'm trying to attach the getElementsByClassName() and hasClassName()
functions to elements in IE using an HTC. It seems to be breaking at
the point within document.getElementsByClassName() where I call
element.hasClassName (line 34 of the script [2]) but my understanding of
this workaround using HTCs [3]] that I'm trying to use is very limited
and I don't understand why it's breaking.
The bug I'm finding in Opera is with hasAttributeNS() and
getAttributeNS(). For some reason, opera seems to ignore the
namespaceURI and return the attribute if the localName matches. This
isn't really a serious problem, since it would only have side effects if
an author wrote:
<x foo:class="bar">
where foo is defined as any namespace URI where class should not be
treated like the XHTML, SVG, etc. class attributes.
eg.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:foo="http://www.example.org/foo" xml:lang="en">
<head>
<script type="text/javascript"><![CDATA[
window.onload = function() {
var e = document.getElementsByTagName("p").item(0)
if (e.hasAttributeNS("http://www.w3.org/1999/xhtml", "class")) {
alert(e.getAttributeNS("http://www.w3.org/1999/xhtml", "class"));
} else {
alert("PASS");
}
}
]]></script>
</head>
<body>
<p foo:class="FAIL">test</p>
</body>
</html>
Lastly, if anyone finds bugs with other browsers I haven't been able to
test (Mac and Linux browsers) and can suggest a solution, or has any
other improvements to the code in general, that would be greatly
appreciated.
[1]
http://lachy.id.au/dev/script/examples/DOM/getElementsByClassName/tests/001.html
[2]
http://lachy.id.au/dev/script/examples/DOM/getElementsByClassName/getElementsByClassName.js
[3] http://delete.me.uk/2004/09/ieproto.html