W3C DOM Compatibility - HTML

Last major update on 21 March 2008.

You can also view the previous version, which was created in September 2005 and still features IE Mac.

Cover of my book

If you'd like to have some practical examples of what you can do with the W3C DOM, read my book ppk on JavaScript, especially chapter 8.

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

All elements

First some properties of all HTML elements. All of them are read/write, and the average DOM script uses at least two or three of them.

You must know these properties by heart.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
className
The class attribute.

Test page 		Yes Yes Yes Yes Yes 
x.className
x.className = 'blue'

Get or set the value of the class attribute of node x, if any.
dir
The dir attribute.

Test page 		Yes Buggy Yes Yes Yes Yes 
x.dir
x.dir = 'rtl'

Get or set the text direction (ltr or rtl, left to right or right to left) of element x.

For the moment dir serves as a glorified align.
id
The id attribute.

Test page 		Yes Yes Yes Yes Yes 
x.id
x.id = 'otherID'

Get or set the id of node x, which must be a tag. If no ID is specified in the HTML, it is empty.
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 Yes Yes Yes 
x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Get or set the HTML contained by node x.

Is innerHTML faster than the official Core methods like createElement() and appendChild()? See the W3C DOM vs. innerHTML test page for more information.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
innerText
The text contained by a tag.

Test page 		Yes No Yes Yes Yes 
x.innerText
x.innerText = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the innerText.

Cross browser:

var text = x.innerText || x.textContent
outerHTML
The HTML of a tag, including the tag itself.

Test page 		Yes No Yes Yes No 
x.outerHTML
x.outerHTML = "Let's <u>change</u> it!"

Get or set the HTML of the entire node x, including the outermost tag (element x itself).
outerText
The text of a tag, including the tag itself.

Test page 		Yes No Yes Yes No 
x.outerText
x.outerText = "Let's change it!"

Get or set the text contained by node x. Exactly the same as innerText except that node x is also overwritten and removed when you set outerText.
textContent
The text contained by a tag.

Test page 		No Yes Yes Yes Yes 
x.textContent
x.textContent = "Let's change it!"

Get or set the text contained by node x. Any HTML tags in the node are ignored, though their text content is added to the textContent.

Cross browser:

var text = x.innerText || x.textContent
title
The title attribute.

Test page 		Yes Yes Minimal Yes Yes Yes 
x.title
x.title = 'Changed'

Get or set the title attribute of node x.

  • Safari 3.0 doesn't show the title of an element in any way, so its compatibility is mostly untestable. However, the title property gets its value from the title attribute, so it works to some extent.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Miscellaneous

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

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
body
The body tag

Test page 		Yes Yes Yes Yes Yes 
document.body

Represents the BODY tag.
compatMode
Strict mode or Quirks mode

Test page Strict
Test page Quirks 		No Yes Yes No Yes Yes Yes 
document.compatMode

Returns the compatibility mode of the document: BackCompat (Quirks Mode) or CSS1Compat (Strict Mode). See the Quirks and Strict Mode page for an explanation.

  • IE 5.5 doesn't support this property, but it doesn't need to. It's permanently locked in Quirks Mode.
createHTMLDocument()
Create an HTML document

Test page 		No No Yes Yes No 
document.implementation.createHTMLDocument('Title')

Create an HTML document consisting of <html>, <head>, <title> and <body> tags. The argument becomes the <title> tag's value. Unfortunately I don't know what to do with the created HTML document.
defaultView
The window the document is displayed in

Test page 		No Yes Yes Yes Yes 
document.defaultView

Refers to the window. I have no idea why we need yet another reference to the window.
parentWindow
The window the document is displayed in

Test page 		Yes No No Yes No 
document.parentWindow

Refers to the window. I have no idea why we need yet another reference to the window.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Select boxes

Two new methods for select boxes.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
add()
Add an option to a select box. The argument is an index number.

Test page 		Yes Alternative Yes Yes Yes 
x.add(y,x.options[x.options.length])
x.add(y,2)

Adds an option to a select box, where x is the select box and y is the new option.

The first line is the W3C approved way (but much too complicated): it requires you to refer to the option object after which the new option is inserted.

The second line is the Microsoft way: give the index number of the option after which you want to insert the new option.

I side with Microsoft here; W3C's implementation is far too complicated. Therefore support of the Microsoft model is required for a Yes here. Fortunately all browsers save IE and Firefox support both ways.
remove()
Remove an option from a select box

Test page 		Yes Buggy Yes Yes Yes Yes 
x.remove(1)

Remove the second option from select x.

  • Works in IE8b1, but the screen temporarily goes blank when the option is removed.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

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.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
caption
The caption of a table

Test page 		Yes Yes Yes Yes Yes 
x.caption

Access the caption of table x.
cellIndex
The index number of a cell in its row

Test page 		Yes Incorrect Yes Yes Yes Yes 
x.cellIndex

The index number of element x, which must be a <td> or <th>, in its row (<tr>).

  • Always 0 in IE8b1.
cellPadding
The ancient attribute

Test page 		Yes Yes No Yes Yes No 
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.

  • Safari 3.0 and Konqueror don't react to the setting of cellPadding, but there's a subtle difference between doing the cellPadding test and then the cellSpacing one, and doing the cellSpacing one immediately. The results might be interpreted as the cellPadding only taking effect after the cellSpacing has been set, but I'm not sure if this interpretation is correct.
cells[]
An array with all cells in a row

Test page 		Yes No Yes Yes Yes Yes 
x.rows[1].cells

A nodeList with all cells of the second row of table x. Contains both <td>s and <th>s.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
cellSpacing
The ancient attribute

Test page 		Yes Yes Yes Yes Yes 
x.cellSpacing = 10

Set the cell spacing of table x to 10.
createCaption()
Create a caption for a table

Test page 		Yes Yes Yes Yes Yes 
x.createCaption()

If table x already has a caption this method returns the caption. If not, a new caption is created.
createTFoot()
Create a tFoot element

Test page 		Yes Yes Yes Yes Yes 
x.createTFoot()

If table x has a <tfoot>, get it. If not, create a <tfoot> and append it to the table.
createTHead()
Create a tHead element

Test page 		Yes Yes Yes Yes Yes 
x.createTHead()

If table x has a <thead>, get it. If not, create a <thead> and append it to the table.
deleteCaption()
Delete the caption of a table

Test page 		Yes Yes Yes Yes Yes 
x.deleteCaption()

Delete the caption of table x, if present.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
deleteCell()
Delete a table cell

Test page 		Yes Untestable Yes Yes Yes Yes 
x.rows[1].deleteCell(0)

Delete the first cell of the second row of table x.
deleteRow()
Delete a table row

Test page 		Yes Yes Yes Yes Yes 
x.deleteRow(1)

Delete the second row of table x.

x.tBodies[1].deleteRow(1)

Delete the second row of the second <tbody> of table x.
deleteTFoot()
Delete the tFoot of a table

Test page 		Yes Yes Yes Yes Yes 
x.deleteTFoot()

Delete the tFoot of table x.
deleteTHead()
Delete the tHead of a table

Test page 		Yes Yes Yes Yes Yes 
x.deleteTHead()

Delete the tHead of table x.
frame
A border around an entire table

Test page 		Yes Yes Yes Yes Yes 
x.frame = 'lhs'

Set the frame attribute of table x.

Possible values: void, above, below, hsides, vsides, lhs, rhs, box, border
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
insertCell()
Insert a table cell

Test page 		Yes Untestable Yes Yes Yes Yes 
x.rows[0].insertCell(1)

Insert a <td> the first <tr> of table x, as the second <td>.
insertRow()
Insert a table row

Test page 		Yes Yes Yes Yes Yes
x.insertRow(1)

Insert a <tr> into table x as the second <tr>.
moveRow()
Move a row from one position to another. Microsoft proprietary.

Test page 		Yes No 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 Incorrect Yes 
x.rowIndex

The index number of element x, which must be a <tr>, in its table, regardless of table section (tHead, tBody, tFoot).

Note that browsers should move any <thead> to the top of the table, and any <tfoot> to the bottom. Therefore rows should be counted in the order <thead>-rows, <tbody>-rows, <tfoot>-rows: the order in which they're visible in the rendered page.

  • Opera keeps to the source code order (where the <tfoot> precedes the <tbody>.)
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
rows[]
An array of all rows in a table or table section

Test page 		Almost No Yes Incorrect Yes Incorrect Yes 
x.rows

A nodeList with all rows of table x.

  • Safari 3.0 and Opera keep to the source order (where the <tfoot> precedes the <tbody>)
  • Writing to the innerHTML of a row doesn't work in IE.
rules
I don't know what this property is supposed to do, unless it's meant for removing the cellSpacing.

Test page Does not work 		Buggy Buggy Buggy Buggy No 
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 IE.
  • Setting rules to any value causes all cellspacing to disappear in Firefox, Safari, and Opera.
  • Setting rules to any value causes the border around the table to disappear in Opera.
sectionRowIndex
The index number of a row in the table section

Test page 		Yes Yes 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 No Yes Yes Yes Almost 
x.tBodies
An array with all TBodies of table x.
  • Writing to the innerHTML of a tBody doesn't work in IE and Konqueror.
tFoot
The tFoot of a table

Test page 		Almost Yes Yes Yes Almost
x.tFoot
Access the tFoot of x, which must be a table.
  • Writing to the innerHTML of a tFoot doesn't work in IE and Konqueror.
tHead
The tHead of a table

Test page 		Almost Yes Yes Yes Almost
x.tHead
Access the tHead of x, which must be a table.
  • Writing to the innerHTML of a tHead doesn't work in IE and Konqueror.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7