A is for Attributes

The goal of this exercise is to produce a consistent, canonical and symmetrical interface for reading and mutating documents. Host implemenations provide two interfaces: attribute methods and DOM properties. Both vary cross-browser and DOM properties provide only an obscured view.

Attributes are Awful

The first set directly tests the implementation of get/set/removeAttribute. Cross-browser results vary. Changing compatibility modes in IE8 affects the results as well. Invoking the Compatibility View command (conveniently located on the toolbar next to Refresh) may show an improved view on the surface due to CSS quirks, but with bugs hiding beneath.

See the notes for more information about this DOM implementation.

Wrappers Can Compensate

The second set uses wrappers to achieve consistent cross-browser results.

Known Exceptions

Properties are not Perfect

The third set attempts to reproduce the same interface with DOM properties, skipping tests that are impossible (and a few that are superfluous). Cross-browser results vary. See the notes for more information about this DOM implementation

Hybrid Solution Works Best

The fourth set retrieves DOM property values by attribute name. This is the basic concept botched by the various attr methods found in "major" libraries. It features the same utility of the attribute-based interfaces. Missing attributes return null rather than property defaults. The style set is skipped as the style property is read only. This is the fastest and most robust solution. Like the attribute wrapper, it is 100% consistent in the latest major browsers (as well as several others tested).

Known Exceptions

Common Quirks

There are many cross-browser differences related to attributes and properties.


Outside of the broken MSHTML implementations, inconsistencies with attributes corresponding to boolean properties require the most feature testing. The workaround to present a consistent interface for these attributes is to refer to the corresponding DOM properties, returning '' for true and null for false. Note that this loses some precision as we cannot discriminate between these two:-

<input readonly>
<input readonly="readonly">

The wrapper returns '' for both of these and null if the attribute is missing. These attributes would be created by setting '' or the name of the attribute (e.g. readonly). For the sake of symmetry, the former is recommended.


URI's are resolved for some attributes in older versions of major browsers (e.g. Opera). Even anchor href attributes can be affected (e.g. Opera 8.54), in violation of the spotty DOM2 specifications.

Result Map

Attributes Wrapped
Properties Wrapped
Legend: Pass Fail Indeterminate Error

First Set

Other Primers