W3C DOM Compatibility - HTML

Last major update on 12 June 2009.

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.

Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
className
The class attribute.

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

  • If the last character on a line is an interpunction character, IE, Safari, Chrome and Konqueror move it to the start of the line. I don’t think this should happen, so I count it as Almost.
id
The id attribute.

Test page 		Yes 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
see also the table test page 		Almost Yes Yes Yes Yes Almost 
x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Get or set the HTML contained by node x.

In general innerHTML is faster than normal DOM methods because the HTML parser is always faster than the DOM engine. If you want to do complicated changes, use innerHTML. (For simple changes it does not really matter which method you use, although innerHTML remains theoretically faster.) See also the W3C DOM vs. innerHTML test page for more information.

  • In IE and Konqueror innerHTML does not work correctly when you update tables. Solve this by using pure DOM methods instead. See this explanation of the behaviour by innerHTML’s inventor.
  • If you remove elements through innerHTML in IE, their content is wiped and only the element itself (i.e. opening and closing tags) remain. If you want to remove nodes that you may want to reinsert at a later time, use DOM methods such as removeChild().
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
innerText
The text contained by a tag.

Test page 		Yes No Yes 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. If you set innerText all inner HTML elements are removed.

Cross browser:

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

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

Once you’ve changed the outerHTML, element x is removed entirely and replaced by the HTML you’ve specified. However, variable x still refers to the removed element that now floats in “DOM hyperspace.” In IE its content is removed, though, because of the bug mentioned under innerHTML.
outerText
The text of a tag, including the tag itself.

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

See outerHTML note about element x.
textContent
The text contained by a tag.

Test page 		No Yes 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 Yes 
x.title
x.title = 'Changed'

Get or set the title attribute of node x.

  • Safari 3.0 does’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.
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7

Miscellaneous

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

Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
body
The body tag

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

Refers to the window. I have no idea why we need yet another reference to the window.
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7

Select boxes

Two new methods for select boxes.

Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
add(opt,opt)
Add an option to a select box. The second argument is the option after which you want to insert the new option.

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

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

The W3C approved way (that is much too complicated) requires you to refer to the option object after which the new option is inserted.

add(opt,ind)
Add an option to a select box. The second argument is an index number.

Test page 		Yes No Yes Yes Yes Yes 
x.add(y,2)

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

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.
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 IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
caption
The caption of a table

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

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

Test page 		Yes Yes No Yes 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 Yes 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.
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
cellSpacing
The ancient attribute

Test page 		Yes 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 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 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 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 Yes 
x.deleteCaption()

Delete the caption of table x, if present.
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
deleteCell()
Delete a table cell

Test page 		Yes Yes 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 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 Yes 
x.deleteTFoot()

Delete the tFoot of table x.
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 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
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
insertCell()
Insert a table cell

Test page 		Yes Yes 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 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 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>.)
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7
rows[]
An array of all rows in a table or table section

Test page 		Yes Yes Incorrect Yes 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>)
sectionRowIndex
The index number of a row in the table section

Test page 		Yes 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 		Yes Yes Yes Yes Yes Yes 
x.tBodies
An array with all TBodies of table x.
tFoot
The tFoot of a table

Test page 		Yes Yes Yes Yes Yes Yes 
x.tFoot
Access the tFoot of x, which must be a table.
tHead
The tHead of a table

Test page 		Yes Yes Yes Yes Yes Yes 
x.tHead
Access the tHead of x, which must be a table.
Method or property IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.5b4 Saf 3.0 Win Saf 3.1 Win Saf 4.0 Win Chrome 1 Chrome 2 Opera 9.62 Opera 10b Konqueror 3.5.7

These compatibility tables are sponsored by

Google