473,322 Members | 1,504 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Element.getElementsByClassName() IE and Opera Bugs

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/exampl...tests/001.html
[2]
http://lachy.id.au/dev/script/exampl...ByClassName.js
[3] http://delete.me.uk/2004/09/ieproto.html
--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
Aug 20 '05 #1
2 5520


Lachlan Hunt wrote:

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). http://lachy.id.au/dev/script/exampl...ByClassName.js


I don't think the check
new RegExp("\\b" + className + "\\b", flags).test(classNames)
is anything like perfect, consider
<http://home.arcor.de/martin.honnen/javascript/2005/08/test2005082101.html>
as an example where your check for class name "class" returns (run with
Mozilla 1.7) several elements which are not in the class with that name
but simply belong to a class where "class" is a substring of the class name.
So that regular expression is not a good check, works in some cases,
yes, but for code which is some kind of library it needs to be improved.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Aug 21 '05 #2
Martin Honnen wrote:
Lachlan Hunt wrote:
http://lachy.id.au/dev/script/exampl...ByClassName.js


I don't think the check
new RegExp("\\b" + className + "\\b", flags).test(classNames)
is anything like perfect, consider
<http://home.arcor.de/martin.honnen/javascript/2005/08/test2005082101.html>
as an example where your check for class name "class" returns (run with
Mozilla 1.7) several elements which are not in the class with that name
but simply belong to a class where "class" is a substring of the class
name.
So that regular expression is not a good check, works in some cases,
yes, but for code which is some kind of library it needs to be improved.


Thanks, I should have got more information about what \b matches. The
JavaScript 1.5 Reference only states [1]:

| Matches a word boundary, such as a space. (Not to be confused with
| [\b].)

So I thought it only matched white space or the start/end of the line, I
didn't realise it also matched a hyphen and probably other characters
too. I replaced the regex with

new RegExp("(^|\\s)" + className + "(\\s|$)", flags).test(classNames);

It now passes your test cases and all of mine.

[1]
http://developer.mozilla.org/en/docs...Objects:RegExp
--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox
Aug 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Spijon | last post by:
Seems opera can not work normally with javascript, does anyone knows how to fix it? Thanks in advance.
14
by: delerious | last post by:
I need to determine an element's width and height in pixels (not including padding, border, and margin) in Javascript. The element will not have width or height styles specified. In Mozilla, I...
7
by: TheMartian | last post by:
Opera is driving me nuts, I am trying to get it to actually render a table the full width of the browser window sounds easy, but no, Opera and only Opera leaves a 16px margin on the right edge ...
12
by: The Master | last post by:
>>does a floated element require a fixed width to work? >It does if the UA adheres to CSS 2.0 rules, not if it adheres to CSS 2.1 >float rules (or if it's IE). So does that mean nn6, moz1.0,...
9
by: Derek Basch | last post by:
I have a simple XHTML document that I would like to apply javascript functionality to: <body> <div class="length">9</div> <div class="sequence">AAAAAAATTTAAA</div> <div...
3
by: Captain Dondo | last post by:
I need to create a table where each element has certain specific properties. For example, elements in the first column should always have a range of 0-100, and increment by 1. Elements in column...
10
by: rush2 | last post by:
Having an odd issue that I didn't have with Opera until the most recent update to 9.22. I have a DHTML menu that I thought I was done with until yesterday. I have a root node that when a user enters...
12
by: Aaron Gray | last post by:
In FF you can define the following ... Element.prototype.getClass = function() { return this.className; /* or whatever */ } Element.prototype.setClass = function(c) { this.className = c; } ...
53
by: Aaron Gray | last post by:
Due to M$'s stupidity in not making DOMElements first class citizens the following will not work :- function isElement( o) { return o instanceof Element } It works for FF, Opera and Safari.
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.