getAttribute href bug
Whilst working on the Ajax Link Tracker and MapSurface I have come across an inconsistency in how the href attribute is retrieved using DOM Scripting.
The href attribute is different to other element attributes in that the value set can be relative to the context of the page URL. If you set a link with a relative href attribute
<a href="../development/test1.html">test page</a>
The browser will look at the pages current URL and derive an absolute URL for the link.
http://www.glenn.jones.net/development/test1.html
This is the root of the problem, some browsers return the text of the attribute and others return the derived absolute URL. The results also differ by the method you use to retrieve the href attribute. There are three common ways to access an attribute:
linkobj.href;
linkobj[‘href’];
linkobj.getAttribute(‘href’);
The linkobj.href and linkobj[‘href’]; methods of accessing the attribute consistently return the derived absolute URL.
Microsoft has tried to address this by problem adding a
second parameter to the getAttribute method. The second parameter can be set to
0,1 or 2. If the parameter is set to 2 the method returns the attribute text.
Any other setting will return the derived absolute URL.
linkobj.getAttribute(‘href’);
linkobj.getAttribute(‘href’,2);
| Derived Absolute URL |
Attribute Text | ||
|---|---|---|---|
| IE | linkobj.href; | x | |
| IE | linkobj.getAttribute(‘href’); | x | |
| IE | linkobj.getAttribute(‘href’,2); | x | |
| Gecko | linkobj.href; | x | |
| Gecko | linkobj.getAttribute(‘href’); | x | |
| Gecko | linkobj.getAttribute(‘href’,2); | x | |
| Opera | linkobj.href; | x | |
| Opera | linkobj.getAttribute(‘href’); | x | |
| Opera | linkobj.getAttribute(‘href’,2); | x |
So what should be returned by the getAttribute method?
The W3C DOM Level 2
Core specification which sets out the structure of the getAttribute method does
not cover this issue. It is
not that either approach is wrong or right. On this point the specification is
open to interpretation.
As a coder I would like to be able to access both values. The DOM Core specification should be updated to address the problem.
After a really good exchange with Jim in the comments below, I stand corrected. The specification does say the getAttribute should return the attribute value, not the absolute URL. The Microsoft approach is wrong.
For the time being I am using the old school object property
method linkobj.href to return derived absolute URLs. It provides the most consistent results across all browsers.
W3C REC DOM Level 2 Core specification for getAttribute
Gecko documentation for getAttribute
Microsoft documentation for getAttribute
As usual just as I was finishing this post I found this bug report on the QuickMode site which discusses the same subject.
getAttribute HREF is always absolute.html
Comments
1
Jim
> So what should be returned by the getAttribute method? The W3C DOM Level 2 Core specification which sets out the structure of the getAttribute method does not cover this issue.
Yes it does. It unambiguously states that it retrieves the attribute value. The attribute value is the relative URI, not what you end up with once you've taken the attribute value and fiddled around with it a bit. Internet Explorer's behaviour is wrong.
PS: What I am typing is practically unreadable. What's with the insanely small fonts in the textarea?
Posted 23 February 2006 00:37
2
Glenn Jones
Jim, That was my first though when I looked at the specification. What I meant by unambiguously is that it does discuss situations where there may be a derived value as well as the original text value. The DOM itself is a model interpreted from the HTML. When we ask for the value of an attribute, are we querying the DOM or the HTML.
I though that specification should have dealt with this issue directly, rather than it been implied. May it does and I miss it.
I am sorry about the size of the text, could you tell me what platform and browser your using.
Posted 23 February 2006 08:48
3
Anne van Kesteren
We should have fixed this in Opera 9. As in, getAttribute returns the specified value and .href returns the resolved value (as per DOM Level 2 HTML).
Posted 23 February 2006 09:11
4
Glenn Jones
Anna. That really interesting, so the getAttribute returns the specified value and .href returns the resolved value. Although this is useful to me as a coder, what’s the logic in the href returning different values dependant on how you access the value? Apart from href and src are there any other attribute this applies to.
Posted 23 February 2006 09:41
5
Jim
The href attribute is defined by DOM 2 HTML:
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-88517319
As you can see, it explicitly states that the absolute URI should be returned.
The logic behind having attribute accessors return the values of the attributes is fairly obvious, as for the logic behind having href return the absolute value, the DOM 2 specification almost certainly does it for backwards compatibility with "DOM 0" (the old-fashioned Netscape 2-era DOM). DOM 0 probably did it for convenience for things like window.location = foo.href.
I'm using Firefox 1.5 on Linux and the DOM Inspector tells me that the font size is computed at 9.333px.
Posted 23 February 2006 13:18
6
Glenn Jones
Jim, I stand corrected specification does state that the value should be returned when you use the getAttribute and explicitly states href object property should return the absolute URL. I should of taken more time to read it all.
I see what you maen about the font size, I will correct it as soon as possible.
Posted 23 February 2006 15:28
7
drops
Glenn, I found that if an A contains a span clicks are not logged correctly. The id is empty and the target is null.
I can mail you an example, but unfortunately this comment box causes a server error if I post the html snippet. (other thing you might want to fix)
kind regards
Oliver
Posted 11 March 2006 01:03
8
Dragan Babić
Hi Glenn, I just dropped by to say great work on this widget. I really like it. Now I have only one suggestion for you regarding CSS.
Namely I wanted to suggest more "strict" rules for anchors (a elements) in terms of it's pseudoclasses. For example I use background images to style my visited, hover and link statuses on links, and they "rubb off" on MapSurface's links--ending up not really good looking, so you could think about adding something like this to your stylesheet:
a:link, a:visited, a:hover, a:focus, a:active{
padding:0; background:transparent;
}
Also if someone is using :after and :before pseudoelements from CSS3 spex you should consider adding fixes to override tose as well.
Keep up the good work!
Posted 12 March 2006 11:34
9
David Hammond
It's interesting that the DOM spec doesn't specify whether or not other URI attributes should return absolute URIs or the exact values set. Assuming the expected result is an absolute URI, here are some attributes that don't get converted in IE, Firefox, or Opera:
IE: HTMLHeadElement.profile
IE: HTMLLinkElement.href
IE: HTMLBaseElement.href
IE: HTMLBodyElement.background
IE: HTMLFormElement.action
IE: HTMLInputElement.useMap
Firefox: HTMLInputElement.useMap
IE: HTMLQuoteElement.cite
IE: HTMLModElement.cite
IE: HTMLImageElement.longDesc
IE: HTMLImageElement.useMap
Firefox: HTMLImageElement.useMap
IE: HTMLObjectElement.codeBase
IE: HTMLObjectElement.data
IE: HTMLObjectElement.useMap
Firefox: HTMLObjectElement.useMap
IE: HTMLAppletElement.codeBase
IE: HTMLScriptElement.src
IE: HTMLFrameElement.longDesc
IE: HTMLFrameElement.src
IE: HTMLIFrameElement.longDesc
IE: HTMLIFrameElement.src
Complete tables can be found here:
http://www.webdevout.net/browser_support_dom.php
Posted 25 May 2006 14:41
10
Yogurt Earl
I modified the test case to check the src attribute on an image tag.
http://www.yogurtearl.com/subdir/getattribute.htm
I found the same problem.
Yogurt Earl
Posted 25 May 2006 20:03
11
Garrett
object.property and object["property"] are idential. The only difference is that the latter gives you the ability to use invalid javascript identifiers, such as object["property-value"].
No surprise that IE returns the resolved URL in getAttribute. For IE, you can sometimes get the real hard-coded value via getAttributeNode(sAttr).value. That doesn't work here.
If you want the hard-coded href attribute value in IE, you'll have to use a RegExp to parse the elements outerHTML. That appears to be the only way.
Posted 27 May 2006 06:04
12
Swetlana Maßat
Great and excellent article it’s realy helpful. Thanks again.
Posted 31 December 2006 00:54
13
Kris Kowal
Safari 2 mimics the Gecko behavior.
Posted 26 October 2007 07:36
Comment Guidelines
All comments are moderated. Please keep comments relevant. Abusive, inappropriate and anonymous posts may be edited and/or removed.