W3C DOM Compatibility - HTML

Back to the index.

This compatibility table details support for methods and properties specific to HTML elements.

This is the desktop table. See also the mobile table.

Last major update on 15 September 2014.

innerHTML and friends

innerHTML is one of the most-often used properties, since it’s so easy (not to mention fast) to take a string that contains HTML and feed it to the browser’s HTML parser. In general it works really well.

It has a few friends you should know about.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
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
Incomplete Almost Yes Yes Yes Yes Yes
x.innerHTML
x.innerHTML = "Let's <u>change</u> it!"

Get or set the HTML contained by node x.

  • If you change the innerHTML of a script tag the browser doesn’t recognize the new script and you can’t execute it. Don’t do this.
  • The order of the attributes on the HTML element may be off in IE. Not a big deal, but still.
  • 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().
  • IE8 can’t write the innerHTML of a <style> tag.
  • IE8 returns UPPER CASE tags, even though the source is lower case.
  • In IE9 and lower innerHTML refuses to work on tables and selects. Solve this by using pure DOM methods instead. See this explanation of the table behaviour by innerHTML’s inventor. I assume something similar goes for selects.
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.textContent || x.innerText
insertAdjacentElement
Add a DOM node next to an existing node

Test page
Probably Yes No Yes Yes Yes Yes
x.insertAdjacentElementL(position,DOM_node)

Takes two arguments: the position (see below) and the DOM node to be inserted.

Positions:

  • beforebegin: before element x.
  • afterbegin: as first child of element x.
  • beforeend: as last child of element x.
  • afterend: after element x.
Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
insertAdjacentHTML
Add an HTML string next to an existing node

Test page
Probably Yes Yes Yes Yes Yes Yes
x.insertAdjacentHTML(position,HTML_string)

Takes two arguments: the position (see below) and the HTML string to be inserted.

Positions:

  • beforebegin: before element x.
  • afterbegin: added to element x’s innerHTML at the start.
  • beforeend: added to element x’s innerHTML at the end.
  • afterend: after element x.
outerHTML
The HTML of a tag, including the tag itself.

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

  • IE8 returns UPPER CASE tags, even though the source is lower case.
  • 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 Yes
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 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.textContent || x.innerText
Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac

HTML element properties

There are a few properties that exist for any HTML element. They’re treated below.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
classList
A list of class values

Test page
No Yes Yes Yes Yes Yes Yes
x.classList

An array with all the class names of element x. You can read it out as an array, where each member contains one class name. If you change it to a string (x.classList.toString()) you should get the same result as with className.

It also has the following methods:

  • add(className). className is added to the element’s classList.
  • contains(className). Returns true if the element’s classList currently contains className; returns false otherwise.
  • remove(className). className is removed from the element’s classList.
  • toggle(className). className is added if it’s absent; removed if it’s present.
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.

dataset
A list of data- attributes

Test page
No Yes Yes Yes Yes Yes Yes
x.dataset

Grants access to all data-* attributes on element x. Each attribute is a property of x.dataset. The names are complicated, though:

  1. Chop off data-.
  2. Any lower case character preceded by a dash becomes upper case, while the dash is removed. (Same as with CSS property names.)

So the data-a-complicated-value attribute becomes x.dataset.aComplicatedValue.

dir
The dir attribute.

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

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac

Select boxes

There are two methods specifically for select boxes. There used to be browser incompatibilities between the two versions of add(), which is why I test both of them. The problems have disappeared.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
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 second argument is the option object before which the new option should be inserted.

Say again?

Yup, this is the complicated way. One wonders what the person who thought this up was smoking. It even used to be a W3C standard.

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

Test page
Yes Yes 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 second argument is simply an index.

This is the simple way. Microsoft pushed this, and I’m glad they won because they were right.

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

Then a whole slew of table-specific methods and properties that nobody ever uses.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
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 Yes Yes Yes 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.

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.

cellSpacing
The ancient attribute

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

Set the cell spacing of table x to 10.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
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.

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.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
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.

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 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).

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 Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
rows[]
An array of all rows in a table or table section

Test page
Yes Yes Yes Yes Yes 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 Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac

Document

Finally, some properties of HTML documents.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
activeElement
The element that currently has the user focus

Test page
Probably Yes Yes Incomplete Yes Incomplete Incomplete Incomplete Incomplete
document.activeElement

I test this property with form fields, links, and buttons.

  • Firefox on Mac doesn’t support this when the active element is a button. On Windows and Linux buttons work fine.
  • Safari supports it only on form fields; not on links or buttons.
  • Blink-based browsers don’t support it on links.
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
6 Yes Yes 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.
Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
defaultView
The window the document is displayed in

Test page
No Yes Yes Yes Yes Yes Yes
document.defaultView

Refers to the window. I have no idea why we need yet another reference to the window.

doctype
The document’s doctype

Test page Strict
Test page Quirks
No Yes Yes Yes Yes Yes Yes
document.doctype
lastModified
The document’s last modification date; IF the server gives this information

Test page
Probably Yes Yes Yes Yes Yes Yes
document.lastModified
parentWindow
The window the document is displayed in

Test page
Yes No No No No No
document.parentWindow

Refers to the window. I have no idea why we need yet another reference to the window.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac

Character encoding

Character encoding is tricky. These tests were done on my devices, which have English or Dutch as their default language. (Two Android phones originally come from China, though.)

See the WHAT-WG spec for some common encodings and labels. A label is a name that points to a certain encoding. Windows-1252, ISO-8859-1, and Latin-1 are all labels for the same encoding. They’re case insensitive, but strictly speaking the dash in Latin-1 is not allowed. I’m going to ignore that, though.

I test this with two test pages. The expected results are in the table below, where “default” means the browser’s default encoding, which is returned by characterSet on the test page without an encoding definition and is shown in the first row of the compatibility table below.

Property UTF-8 definition No charset definition
characterSet UTF-8 Default
charset UTF-8 Default
defaultCharset Default Default

All browsers get the UTF-8 right; the problem lies in defaultCharset, which sometimes doesn’t return the default encoding.

Method or property Internet Explorer Firefox Safari Chrome Opera Yandex
7 and lower 8 9 10 11 32 Win 32 Mac 32 Linux 7 37 Win 37 Mac 37 Linux 24 Win 24 Mac 14 Win 14 Mac
The default character set
What is the browser’s default character set?

Test page
Win Win ISO ISO ISO ISO

The value charSet and characterSet return when there’s no character declaration.

ISO
ISO-8859-1 (case insensitive)
Win
Windows-1252 (case insensitive)
characterSet
The document’s defined character set

Test page
No Yes Yes Yes Yes Yes Yes
document.characterSet

The actually-defined character set of the page. With a UTF-8 declaration that should be UTF-8; without one the default character set.

charSet
The document’s defined character set

Test page
Probably Yes No Yes Yes Yes Yes
document.charSet

The actually-defined character set of the page. With a UTF-8 declaration that should be UTF-8; without one the default character set.

defaultCharset
The document’s default character set in the absence of any declaration

Test page
Probably Yes No Yes Yes Yes Yes
document.defaultCharset

Should always return the value that the other two properties return on a page without a character set definition.

Browsers

Desktop browser test array 2.0; September 2014

IE7 and lower
I removed them, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
If IE8 supports a method or property I never tested before I have to guess if IE7 and lower also support it. In general I assume they support the Microsoft-invented properties, but for others I will occasionally have to add a "Don’t know" entry. If IE8 does not support something I never tested before, I assume IE7 and lower also don’t support it.
IE 8, 9, and 10
Trident
On separate Windows 7 virtualizations
IE11
Trident
On Windows 8.1 virtualization
On Surface
Firefox
Gecko
32 on Windows 7, Mac, and Linux
Safari
WebKit
7.0.5 on Mac
Chrome
Blink 37
37 on Win7, Mac and Linux
Opera 24
Blink 37
24.0 on Win7 and Mac
Yandex 14
Blink 35
14.0 on Win7
14.0 on Mac

Operating systems

Mac
MacBook Pro 17'' with OS 10.9.4
This is my main test station. It also runs all virtual Windows systems.
Windows
All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE11, which runs on Windows 8.1.
The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Surface
Microsoft Surface with Windows RT 8.1
Linux
Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.