Bug 22523
| Summary: | getElementsByClassName fails to find elements with dynamically added classnames | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Steve Yegge <stevey> |
| Component: | JavaScriptCore | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | ||
| Priority: | P2 | ||
| Version: | 525.x (Safari 3.1) | ||
| Hardware: | Mac | ||
| OS: | OS X 10.5 | ||
Steve Yegge
{document|element}.getElementsByClassName (in Safari 3.1 and 3.2) fails to include elements that began with at least one class name, then had other space-delimited class names added during an event handler.
For instance, if you start with a span whose class is "foo", and in an onclick handler you modify it to span.className = "foo bar", then document.getElementsByClassName('bar) will not include the span. However, if the span began with no classname, then it may be included in the results.
The following standalone html page allows you to observe and experiment with the behavior. If it fails to make it through the Bugzilla filtering, please feel free to contact me at my email address for further information.
I have no idea which WebKit bugzilla component applies here.
<html>
<head>
<style type="text/css">
.test {
background-color: lightyellow;
}
</style>
</head>
<body style="margin-left:1em">
<p>Safari 3.x has a bug with dynamically added class names: its
<code>getElementsByClassName</code> function doesn't find elements
whose class names were added by event handlers.</p>
<p>To watch it in action:
<ul>
<li>Click the first span to count highlights.</li>
<li>Click the second span to highlight it by adding a classname</li>
<li>Click the first span again to count highlights. Count is still 1.</li>
</ul>
</p>
<p>Strangely, if you then click span 3 (which has no initial classname)
to highlight it, then the span count jumps to 3. But you get different
results if you highlight span 3 first. Play with it!</p>
<p>
<span id="two" class="dummy test" onclick="countHighlights()">
Span 1: click me to count highlighted spans
</span>
</p>
<p>
<span id="one" class="dummy" onclick="highlight('one')">
Span 2: click me to add a highlight
</span>
</p>
<p>
<span id="three" onclick="highlight('three')">
Span 3: click me to add a highlight
</span>
</p>
<script type="text/javascript">
function highlight(id) {
var span = document.getElementById(id);
if (span.highlighted) {
alert('already have highlight');
} else {
span.className = span.className + " test";
span.highlighted = true;
}
}
function countHighlights() {
var spans = document.getElementsByClassName('test');
alert("highlighted spans: " + spans.length);
}
</script>
</body>
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
David Smith
Duplicate of https://bugs.webkit.org/show_bug.cgi?id=19974 (which is fixed in trunk)
*** This bug has been marked as a duplicate of 19974 ***
Darin Adler
Moving all JavaScriptGlue bugs to JavaScriptCore. The JavaScriptGlue framework itself is long gone. And most of the more recent bugs put in this component were put there by people who thought this was for some other aspect of “JavaScript glue” and have nothing to do with the actual original reason for the existence of this component, which was an OS-X-only framework named JavaScriptGlue.