W3C DOM Compatibility - HTML

This compatibility table details support for the W3C DOM HTML Level 1 and 2 modules in all modern browsers.

There are four tables on this page. You must know the first two tables by heart, the other two are far less important.

  1. One with properties for all elements
  2. One with some miscellaneous items
  3. One with two select box methods
  4. One with all table methods and properties

See also the key to my compatibility tables.

All Safari 1.2 tests by Mark 'Tarquin' Wilton-Jones.

All elements

First some quite important properties of all HTML elements. You can create a lot of nice effects by playing with these properties.

You must know these properties by heart.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
className
The class attribute.

Test page
Yes Yes Yes Yes Yes Yes
x.className
The value of attribute CLASS of node x, if any.

Can also be set: x.className="name".
The element takes on the styles of the new class.
dir
The dir attribute.

Test page
Yes Yes Incomplete Yes Yes Yes
x.dir
Gives the text direction (ltr or rtl, left to right or right to left) of element x.
Can also be set: x.dir = 'ltr'.
For the moment dir serves as a glorified align.
  • Explorer Mac doesn't change the direction of the text when you change the dir.
id
The id attribute.

Test page
Yes Yes Yes Yes Yes Yes
x.id
The ID of node x, which must be a tag. If no ID is specified in the HTML, it is empty.

Can also be set: x.id = 'newid'
The element takes on the styles of the new id.
innerHTML
The HTML contained by a tag, as a string.

Originally a Microsoft extension, innerHTML is so useful that all other browsers support it, too.

Test page
Yes Yes Buggy Yes Yes Almost
x.innerHTML
The HTML contained by node x.
Can also be set: x.innerHTML = 'The <B>new</B> text'
  • When setting the innerHTML of an element in Explorer 5 Mac, the element may become much larger than it was at first. This does not happen in the test page, but I encountered it often enough.
    Solve this by first setting innerHTML to an empty string and then setting it to the new value.
    x.innerHTML = '';
    x.innerHTML = 'The <B>new</B> text'
  • Opera doesn't show the style attribute in the innerHTML. It correctly applies styles when writing to the innerHTML, though.

If you write a large string with lots of HTML to an element's innerHTML, this string is not immediately accessible as a node tree. I found that the best solution for this problem is to stop the script and set a timeout for the follow-up script to start in, say, one second. This gives the browser time to turn the string into a node tree.

Is innerHTML faster than the official Core methods like createElement() and appendChild()? See the W3C DOM vs. innerHTML test page for more information.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
innerText
The text contained by a tag.

Test page
Yes Yes Yes No Yes Yes
x.innerText
The text contained by node x. If there are HTML tags in the node, these are ignored.
Can also be set: x.innerText = 'The new text'
outerHTML
The HTML of a tag, including the tag itself.

Test page
Yes Yes Yes No No Yes
x.outerHTML
The HTML of the entire node x, so it includes the outermost tag (element x itself).
Can also be set: x.outerHTML = '<P>The <B>new</B> text</P>'
outerText
The text of a tag, including the tag itself. (And no, the tag itself is not text. I don't understand the difference with innerText)

Test page
Yes Yes Yes No No Yes
x.outerText
The text contained by node x. If there are HTML tags in the node, these are ignored.
Can also be set: x.outerText = 'The new text'.
title
The title attribute.

Test page
Yes Yes Yes Yes Yes Yes
x.title
The title attribute of node x.
Can also be set: x.title = 'Other title!'

Miscellaneous

Some miscellaneous items, the first two of which are sometimes important.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
body
The body tag

Test page
Yes Yes Yes Yes Yes Yes
document.body
Represents the BODY tag.

document.body can hold interesting information about the dimensions of the document and/or the window. However, it's not exactly easy to use. See the Viewport compatibility page for more information.
compatMode
Strict mode or Quirks mode

Test page
No Yes No Yes No Incorrect
document.compatMode
Explorer and Mozilla: BackCompat vs. CSS1Compat
Opera: QuirksMode vs. CSS1Compat

Explorer 5 Windows knows only Quirks Mode, Safari knows only Strict Mode.
As to Explorer on Mac, you can detect Strict Mode by giving an element a width without a unit, for instance x.style.width = 1. In Strict Mode the browser throws an error, which you can catch.

Even though this property is anything but standardized and Opera's value honours the very name of this site, I must judge its support Incorrect. BackCompat is the de facto standard.
createHTMLDocument()
Create an HTML document, I suppose

Test page
No No No No Yes Yes
document.implementation.createHTMLDocument()
I don't know what to do with the created HTML document.
defaultView
The window the document is displayed in

Test page
No No No Yes "function" Yes
document.defaultView
parentWindow
The window the document is displayed in

Test page
Yes Yes Yes No No Yes
document.parentWindow
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50

Select boxes

Two new methods for select boxes.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
add()
Add an option to a select box. The argument is an index number.

Test page Do not use See the Dynamic options script for a safe way of adding options.
Yes Yes Yes Alternative Yes Yes
x.add(y,x.options[x.options.length])
x.add(y,1)
where x is the SELECT and y is the new option.
  • According to W3C the second argument should be an options object. Mozilla requires this argument, Opera and Safari allow it.
  • According to Microsoft the second argument should be an index number.
I side with Microsoft here, W3C's implementation is far too complicated.
remove()
Remove an option from a select box Test page
Yes Yes Yes Yes Yes Yes
x.remove(1)
Remove the second OPTION from SELECT x.

Tables

All methods, arrays and properties for child elements of tables. My W3C DOM vs. innerHTML tests show that these methods are the slowest way to build a table in Explorer on Windows. Use with care.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
caption
The caption of a table

Test page
Yes Yes Yes Yes Yes Yes
x.caption
Access the caption of x, which must be a table.
cellIndex
The index number of a cell in its row

Test page
Yes Yes Yes Yes Incorrect Yes
x.cellIndex
The index number of element x, which must be a TD or TH, in its row (TR).
  • In Safari it is always 0
cellPadding
The ancient attribute

Test page Do not use
Yes Yes Yes Yes No Yes
x.cellPadding = 10
Sets the cell padding of table x to 10 pixels. cellPadding is overruled by any CSS padding declaration. When you set cellPadding, the changes only apply to table cells without any CSS padding.

You should use CSS to set the padding of your cells.
cells[]
An array with all cells in a row

Test page
Yes Yes Yes Yes Incorrect Yes
x.tBodies[0].rows[1].cells
An array with all cells of the second row of the first tBody of table x.
(tBodies is not necessary)
  • Safari counts only one cell.
cellSpacing
The ancient attribute

Test page
Yes Yes Yes Yes Yes Yes
x.cellSpacing = 10
Sets the cell spacing of table x to 10.
createCaption()
Create a caption for a table

Test page
Yes Yes Minimal Yes Yes Yes
x.createCaption()
If table x already has a caption this method returns the caption. If not, a caption is created.
  • In Explorer 5 Mac the method works on an existing caption only. If there is no caption it throws an error.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
createTFoot()
Create a tFoot element

Test page
Yes Yes Minimal Yes Yes Yes
x.createTFoot()
If table x already has a tFoot this method returns the tFoot . If not, a tFoot is created.
  • In Explorer 5 Mac the method works on an existing tFoot only. If there is no tFoot it throws an error.
createTHead()
Create a tHead element

Test page
Yes Yes Minimal Yes Yes Yes
x.createTHead()
If table x already has a tHead this method returns the tHead. If not, a tHead is created.
  • In Explorer 5 Mac the method works on an existing tHead only. If there is no tHead it throws an error.
deleteCaption()
Delete the caption of a table

Test page
Yes Yes Yes Yes Yes Yes
x.deleteCaption()
Deletes the caption of table x
deleteCell()
Delete a table cell

Test page
Yes Yes Yes Yes Buggy Yes
x.rows[1].deleteCell(0)
Delete the first cell of the second row of table x.
  • Safari 1.2 deletes the last cell if you do deleteCell(0)
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
deleteRow()
Delete a table row

Test page
Yes Yes Yes Yes Yes Yes
x.tBodies[0].deleteRow(1)
Delete the second row of the first tBody of table x.
deleteTFoot()
Delete the tFoot of a table

Test page
Yes Yes Crash Yes Yes Yes
x.deleteTFoot()
Delete the tFoot of table x.
  • This method crashes Explorer 5.2 on Mac OS X, but works fine in 5.0 and 5.1 on Mac OS 9.
deleteTHead()
Delete the tHead of a table

Test page
Yes Yes Yes Yes Yes Yes
x.deleteTHead()
Delete the tHead of table x.
frame
A border around an entire table

Test page
Yes Yes Incomplete Yes No Yes
x.frame = 'lhs'
Sets the frame attribute of table x.
Possible values: void, above, below, hsides, vsides, lhs, rhs, box, border
  • Explorer Mac only supports void and border
insertCell()
Insert a table cell

Test page
Yes Yes No Yes Yes Yes
x.rows[1].insertCell(0)
Insert a TD as the first TD into TR x with index 1.
  • This method works in Explorer 5.0 Mac, but not in 5.1 and 5.2
insertRow()
Insert a table row

Test page
Yes Yes Buggy Yes Yes Yes
x.insertRow(1)
Insert a new TR into element x, which must be a table or table section. The TR appears as the second one in x.
  • Explorer 5.1 and 5.2 Mac insert a TD instead of a TR.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
moveRow()
Move a row from one position to another. Microsoft proprietary.

Test page
Yes Yes No No No No
moveRow(0,3)
Move row with index 0 to index 3.
rowIndex
The index number of a row in the table. Disregards table sections.

Test page
Yes Yes Yes Yes Yes Yes
x.rowIndex
The index number of element x, which must be a TR, in its table, regardless of table section (tHead, tBody, tFoot).
rows[]
An array of all rows in a table or table section

Test page
Yes Yes Yes Yes Buggy Yes
x.tBodies[0].rows
An array with all rows of the first tBody of table x.
(tBodies is not necessary)
  • Safari makes a mess of this array. Its length is too large and the parent node of a row is a TR.
rules
I don't know what this property is supposed to do.

Test page Does not work
Buggy Buggy No Buggy No Buggy
x.rules = 'rows'
Sets the rules attribute of table x.
Possible values: none, groups, rows, cols, all
  • Setting rules to any value causes a border around the table in Explorer Windows.
  • Setting rules to any value causes the border around the table to disappear in Opera.
  • Setting rules to any value causes all cellspacing to disappear in Mozilla.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
sectionRowIndex
The index number of a row in the table section

Test page
Yes Yes Buggy Yes Yes Yes
x.sectionRowIndex
The index number of element x, which must be a TR, in its table section (tHead, tBody, tFoot).
tBodies[]
An array with all tBody elements

Test page
Almost Almost Almost Yes Almost Yes
x.tBodies
An array with all TBodies of table x.
  • Writing to the innerHTML of a tBody only works in Mozilla and Opera.
tFoot
The tFoot of a table

Test page
Almost Almost Almost Yes Almost Yes
x.tFoot
Access the tFoot of x, which must be a table.
  • Writing to the innerHTML of a tFoot only works in Mozilla and Opera.
tHead
The tHead of a table

Test page
Almost Almost Almost Yes Almost Yes
x.tHead
Access the tHead of x, which must be a table.
  • Writing to the innerHTML of a tHead only works in Mozilla and Opera.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50