Discuss: JavaScript Logging
by David F. Miller
- Editorial Comments
2 Yes, there's an easier way
In my experience, yes — setting the “className” property of a DOM node will apply the class to the node in question in all modern browsers I’ve tried.
I generally use that approach in my scripts; “class” itself is theoretically a reserved word for “JavaScript 2.0”, too.
posted at 04:27 am on September 6, 2005 by Angus Turnbull
3 setAttribute in IE
In my experience, setAttribute in IE will not compile the attribute’s actual action into the IE document model. For instance if you’ll try something like this:
myElement.setAttribute(“onclick”, “doSomething()”, 0);
IE won’t actually register this event to the object. To my surprise, Firefox will actually do this. So what I’m trying to say, that setAttribute in IE won’t do you any good with attributes like ‘class’, ‘style’, ‘maxlength’, ‘value’, etc..
In my experience, you’ll have to use the “proper” procedure:
myElement.className = “yourClassName”;
Using setAttribute and getAttribute for your own custom attributes works perfectly on the latest browsers..
posted at 04:44 am on September 6, 2005 by Rafi B.
4 A little improvement
Nice work! I’ll use it for sure. But there’s one improvement I’d make.
I would add “return false;” to every onclick event in the menu to avoid annoying page leaping.
So I’d rewrite:
<dd class=“all”>
[url=”#fvlogger”]all[/url]
</dd>
as:
<dd class=“all”> [url=”#fvlogger”]all[/url] </dd>
posted at 09:08 am on September 6, 2005 by Tomasz Kupczyk
5 Clever, very Clever
As someone just starting to dabble in the world of slightly more advanced Javascripting, I find the prospect of debugging scripts in non-FF browsers to be a very very scary one. So thanks for the tips.
However, related to that awkward setAttribute loop, is object.className now a deprecated property?
posted at 10:00 am on September 6, 2005 by Mike Purvis
6 should these tags be there?
for (i = 0; i < attrs.length; i++) {
[strong]debug(“attribute #” + i + “: “ +
attrs[i].name + “=” + attrs[i].value);[/strong]
}
posted at 11:47 am on September 6, 2005 by Scott Matthews
7 A timely article!
Agreed, this is very clever. More importantly (now that it’s here), it’s available to those doing coding that are experiencing more cross-browser issues as the Ajax approach is becoming more common. This would have been a lifesaver on a project I completed recently, and my company hesitant about Ajax due to concerns about difficulties in maintenance and debugging.
Thanks!
posted at 12:16 pm on September 6, 2005 by Mark Shields
8 debuggers
Let’s not forget the Venkman plugin for firefox (http://tinyurl.com/cmu7j). It’s easy to use and works well.
posted at 12:43 pm on September 6, 2005 by clint troxel
9 a
Looping round the attributes after already calling getAttributeNode seems a bit wasteful, this should (and does) work:
var attributeNode = p3.getAttributeNode(“class”);
if (attributeNode) {
attributeNode.value = className;
} else {
p3.setAttribute(“class”, className);
}
posted at 02:31 pm on September 6, 2005 by Ash Searle
10 Set the value on the Attr Node.
(apologies for this double-comment; ‘comment preview’ needs a few wrinkles ironing out.)
This comment applies to the fvlogger code, as mentioned in the ‘Solution’ section of the article, and which appears in the fvlogger function FVL_log
var attributeNode = p3.getAttributeNode(“class�);
if (attributeNode) {
attributeNode.value = className;
} else {
p3.setAttribute(“class�, className);
}
Similarly, for getNodeClass you could do:
var attributeNode = p3.getAttributeNode(“class�);
return attributeNode && attributeNode.value;
The implementation’s good though. I’d fallen into the habbit of using .className, which seems to work, but isn’t part of the DOM spec. The approach in the article is more pure.
posted at 03:05 pm on September 6, 2005 by Ash Searle
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)
1 An easier way?
Can anyone tell me if the above method is better than simply using:
p3.setAttribute(“class”,“labrat”, 0);
p3.setAttribute(“className”,“labrat”, 0);
Regards,
Chris
posted at 03:29 am on September 6, 2005 by Chris Gillis