W3C DOM Compatibility - Core

These compatibility tables detail support for the W3C DOM Core Level 1 and 2 modules in all modern browsers.

On this page I grouped the various W3C DOM methods and properties in eight tables. Basically you must know the first four tables by heart and you'll rarely need the second four tables.

  1. The Four Methods with which the W3C DOM starts. Creating and finding HTML elements.
  2. Node information. Once you found a node you need more information about it.
  3. Walking the DOM tree. How to go from one node to another.
  4. Node manipulation. How to move nodes through the document.
  5. Microsoft extensions to Level 1 DOM Core. Generally not interesting.
  6. Manipulating data. Data is always text, and there are some specialized methods for dealing with it.
  7. Manipulating attributes. Terrible browser incompatibilities.
  8. Miscellaneous methods and properties. You'll rarely need one of them.

See also the key to my compatibility tables.

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

The Four Methods

First of all the Four Methods. The average W3C DOM script uses them all. The first two methods allow you to create element nodes and text nodes. Later you insert these newly created nodes into the document.

The second two methods are for finding elements in the page. You can either find a single one, identified by an id, or all tags of one type.

You must know these methods by heart.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
createElement()
Create a new element

Test page
Yes Yes Yes Yes Yes Yes
x = document.createElement('P')
Create a new HTML element node <P> and temporarily place it in x, which is later inserted into the document.
  • Explorer Windows also supports ('<P>').
createTextNode()
Create a new text node

Test page
Yes Yes Yes Yes Yes Yes
x = document.createTextNode('text')
Create a text node with content text and temporarily place it in x, which is later inserted into the document.
getElementById()
Get the element with this ID

Test page Lower case 'd'!!
Almost Almost Yes Yes Yes Yes
x = document.getElementById('test')
Take the element with ID="test" (wherever it is in the document) and put it in x. Now you can use all methods and properties on x and the element with ID="test" will change accordingly.
This is the equivalent of document.layers and document.all in the Version 4 browsers and it is necessary to make your DHTML work.
  • Explorer Windows also returns the element with name="test".
getElementsByTagName()
Get all tags of this type

Test page
Incomplete Yes Yes Yes Incomplete Incomplete
x = document.getElementsByTagName('P')
Make x into an array of all P's in the document, so x[1] is the second P etc.
x = y.getElementsByTagName('P'): all P's that are descendants of node y.
  • document.getElementsByTagName('*')
    Returns a list of all tags in a document. Doesn't work in Explorer 5 Windows.
  • document.getElementsByTagName('PPK')
    Custom tags cannot be accessed in Safari and Opera.

Node information

These four properties give basic information about all nodes. What they return depends on the node type. They are read-only, except for nodeValue.

There are three basic node types: element nodes (HTML tags), attribute nodes and text nodes. I test these properties for all these three types and added a fourth node type: the document node (the root of all other nodes).

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
nodeName
The name of the node

Test page
Yes Yes Yes Yes Yes Yes
x.nodeName
The name of node x. Please note that nodeName returns an UPPER case tag name, so you must do
if (x.nodeName == 'SPAN')
Element nodes Tag name
Attribute nodes Attribute name
Text nodes #text
Document node #document
nodeType
The type of the node

Test page
Incomplete in 5.0 Yes Yes Yes Yes Yes
x.nodeType
Element nodes 1
Attribute nodes 2
Text nodes 3
Document node 9
  • Explorer 5.0 Windows assigns no nodeType to attributes. Solved in Explorer 5.5
nodeValue
The value of the node, if any

Test page
Yes Yes Yes Yes Yes Yes
x.nodeValue
Element nodes Not available
Attribute nodes Attribute value
Text nodes Text
Document node Not available
You can also set the nodeValue:
x.nodeValue = 'new value'
tagName
The tag name of an element node

Test page
Yes Yes Yes Yes Yes Yes
x.tagName
Element nodes Tag name
Attribute nodes Not available
Text nodes Not available
Document node Not available

The DOM tree

Five properties and two arrays for walking through the DOM tree. Using these properties, you can reach nodes that are close to the current node in the document structure.

In general you shouldn't use too many of these properties. As soon as you're doing something like

x.parentNode.firstChild.nextSibling.children[2]

your code is too complicated. Complex relationships between nodes can suddenly and unexpectedly change when you alter the document structure, and altering the document structure is the point of the W3C DOM. In general you should use only one or two of these properties per action.

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
childNodes[]
An array with all child nodes of the node

Test page
Yes Yes Yes Yes Yes Yes
x.childNodes[1]
The second child node of node x.
children[]
An array with all child element nodes of the node

Test page
Yes Yes Yes No Yes Yes
x.children[1]
The second element child node of node x.
Where childNodes holds all child nodes, children only holds those that are element nodes (HTML tags).
firstChild
The first child node of the node

Test page
Yes Yes Yes Yes Yes Yes
x.firstChild
The first child node of node x.
lastChild
The last child node of the node

Test page
Yes Yes Yes Yes Yes Yes
x.lastChild
The last child of node x.
nextSibling
The next sibling node of the node

Test page
Yes Yes Yes Yes Yes Yes
x.nextSibling
The next child of the parent of x.
parentNode
The parent node of the node

Test page
Yes Yes Yes Yes Yes Yes
x.parentNode
The parent node of x.
previousSibling
The previous sibling node of the node

Test page
Yes Yes Yes Yes Yes Yes
x.previousSibling
The previous child of the parent of x.
sourceIndex
The index number of the node in the page source

Test page
Yes Yes Yes No No (1.0) No
x.sourceIndex
The sourceIndex is also the index number for the element in the document.getElementsByTagName('*') array.

Node manipulation

These five methods allow you to restructure the document. The average DOM script uses at least two of these methods.

The changes in the document structure are applied immediately, the whole DOM tree is altered. The browser, too, will immediately show the changes.

You must know these methods by heart.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
appendChild()
Append a child node as the last node to an element

Test page
Almost Yes Yes Yes Yes Yes
x.appendChild(y)
Make node y the last child of node x.
If you append a node that's somewhere else in the document, it moves to the new position.
  • I have heard, but not tested, that Explorer 5 Windows crashes when you append an option to a select.
cloneNode()
Clone a node

Test page
Yes Yes Incomplete Yes Yes Yes
x = y.cloneNode(true | false)
Make node x a copy of node y. If the argument is true, the entire tree below y is copied, if it's false only the root node y is copied.
Later you insert the clone into the document.
  • Explorer 5 Mac doesn't clone the event handlers of the element.
insertBefore()
Insert a node into the child nodes of an element

Test page
Yes Yes Yes Yes Yes Yes
x.insertBefore(y,z)
Insert node y as a child of node x just before node z.
removeChild()
Remove a child node from an element

Test page
Yes Yes Yes Yes Yes Yes
x.removeChild(y)
Remove child y of node x.
replaceChild()
Replace a child node of an element by another child node

Test page
Yes Yes Yes Yes Yes Yes
x.replaceChild(y,z)
Replace node z, a child of node x, by node y.

Microsoft extensions

As usual Microsoft has extended the standard somewhat. Though sometimes its extensions are brilliant (innerHTML springs to mind), in the case of the DOM Core they aren't.

Note the difference between W3C and Microsoft methods. The W3C methods are owned by the parent element of the node you want to adjust, the Microsoft methods by the node itself.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
applyElement()
Give a node another parent node

Test page
Yes Yes No No No No
x.applyElement(y)
Make node x a child of node y
This only applies the actual node, not its content (text, for instance). Not recommended.
clearAttributes()
Remove all attributes from a node

Test page
Incomplete Incomplete No No No No
x.clearAttributes()
Remove all attributes from node x
  • Explorer doesn't clear event handlers.
mergeAttributes()
Copy all attributes of one node to another node

Test page
Yes Yes No No No No
x.mergeAttributes(y)
Copy all of node y's attributes to node x.
removeNode()
Remove a node

Test page
Yes Yes No No No Yes
x.removeNode(true | false)
Remove node x from the document. If you add true its children are also removed.
replaceNode()
Replace a node by another node

Test page
Yes Yes No No No No
x.replaceNode(y)
Replace node x by node y.
swapNode()
Swap two nodes

Test page
Yes Yes No No No No
x.swapNode(y)
Put node x in node y's place and vice versa.

Data

These methods are for manipulating text data. Note the difference between a text node and text data: the text node is a node and contains the data in its nodeValue. The methods below only work with this contained data.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
appendData()
Append data to a text node

Test page
No Yes Yes Yes Yes Yes
x.appendData(' some extra text')
Appends the string some extra text to x, which must be a text node.
data
The content of a text node

Test page
Yes Yes Yes Yes Yes Yes
x.data
The content of x, which must be a text node. The same as x.nodeValue .
Can also be set: x.data = 'The new text'.
deleteData()
Delete text from a text node

Test page
No Yes Yes Yes Yes Yes
x.deleteData(4,3)
Delete some data from x, which must be a text node, starting at the fifth character and deleting three characters.
Second argument is required.
insertData()
Insert text into a text node

Test page
No Yes Yes Yes Yes Yes
x.insertData(4,' and now for some extra text ')
Insert the string and now for some extra text after the fourth character into x, which must be a text node.
replaceData()
Replace text in a text node

Test page
No Yes Buggy Yes Yes Yes
x.replaceData(4,3,' and for some new text ')
Replace three characters, beginning at the fifth one, of node x, which must be a text node, by the string and for some new text.
  • Explorer 5 Mac replaces the three characters by the first three characters of the new string, while the other characters of the new string are ignored.
substringData()
Take a substring of the text in the text node

Test page
No Yes Yes Yes Yes Yes
x.substringData(4,3)
Takes a substring of x, which must be a text node, starting at the fifth character and with a length of three characters. Thus it's the same as the old substr() method of strings.

Attributes

A bloody mess. Try influencing attributes in this order:

  1. Try getting or setting a specific property, like x.id or y.onclick.
  2. If there is no specific property, use getAttribute() or setAttribute().
  3. If even that doesn't work, try any other method or property in the table below. Most have horrible browser incompatibility patterns, though.
  4. Avoid attributes[]. It's worse than anything else.

Note

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
attributes[index]
An array with the attributes of a node, accessed by index number

Test page Do not use Use getAttribute() instead
Incorrect Incorrect More incorrect Yes Yes Yes
x.attributes[1]
According to Explorer this means the second possible attribute of node x. So Explorer puts its entire list of possible attributes in the attributes[] array (84 in IE 6.0 Win!)
The list of attributes is alphabetical in Explorer 5, non-alphabetical in 6.
Explorer Mac doesn't put custom attributes in the list.

According to all other browsers this means the second actual attribute of node x, decidedly the saner interpretation.
  • Explorer 5 Win and Mac initially give the value of the attribute, and not an attribute object. You can access the properties of the object, though.
attributes[key]
An array with the attributes of a node, accessed by attribute name

Test page Do not use Use getAttribute() instead
Almost Yes Incomplete Yes No Yes
x.attributes['align']
For accessing an attribute by its name. Because of the total confusion with index numbers this would be the best method for using the attributes[] array, except that Safari doesn't support it.
  • Explorer 5 Win and Mac initially give the value of the attribute, and not an attribute object. You can access the properties of the object, though.
  • Explorer 5 Mac cannot access custom attributes.
createAttribute()
Create a new attribute node

Test page
No Minimal Incorrect Minimal Minimal Minimal
x = document.createAttribute('title','Test Title')
Create a new attribute title with value Test Title and temporarily place it in node x.

I have not succeeded in actually inserting the attribute into any node through setAttributeNode (which I think would be the correct way).
  • Explorer Mac doesn't even create an attribute object
getAttribute()
Get the value of an attribute

Test page
Incomplete Incomplete Yes Yes Yes Almost
x.getAttribute('align')
The value of the attribute align of node x.
  • Gives weird results on style in Opera (its own internal styles, I presume) and Explorer gives 'object'. All other browsers sanely return the actual value of the style attribute of tag x.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
getAttributeNode()
Get an attribute node

Test page
No Yes Almost Yes Yes Yes
x.getAttributeNode('align')
Get the attribute align of node x. This is an object, not a value.
  • Explorer 5 Mac initially returns a value, not an object.
hasAttribute()
Check if a node has a certain attribute

Test page
No No No Yes Yes Incorrect
x.hasAttribute('align')
Is true when node x has an attribute 'align'. Else it is false.
  • Opera is wildly off the mark. It gives true for an undefined class attribute and false for defined ppk and onclick attributes.
hasAttributes()
Check if a node has attributes

Test page
No No No Yes Yes Yes
x.hasAttributes()
Is true when node x has attributes, false when it hasn't.
name
The name of an attribute

Test page
Minimal Yes Yes Yes Yes Yes
x.name
The name of attribute x.
  • Explorer 5 Windows supports this property only on XML attributes
removeAttribute()
Remove an attribute node

Test page
Incomplete Incomplete No Yes Incomplete Incomplete
x.removeAttribute('align')
Remove the align attribute of node x.
  • Safari doesn't remove style.
  • Explorer Windows and Opera don't remove events.
removeAttributeNode()
Remove an attribute node

Test page
No Minimal Minimal Yes Yes Yes
x.removeAttributeNode(x.attributes['align']) or
x.removeAttributeNode(x.attributes[1])
Removes the attribute node. There is no difference with removeAttribute()
  • Explorer 6 Win and 5 Mac don't remove the attribute, but don't give an error message either.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
setAttribute()
Set the value of an attribute

Test page
Incomplete Incomplete Incomplete Yes Almost Incomplete
x.setAttribute('align','left')
Set the attribute align of node x to left. The name and value are both strings.
  • Explorer doesn't set styles. It removes events when you try to set them.
  • Opera doesn't set events
  • Safari sets the new styles but doesn't remove the old ones
setAttributeNode()
Set an attribute node (whatever that may mean)

Test page
No Minimal Minimal Minimal Untestable Minimal
z = document.createAttribute('title','Test Title')
x.setAttributeNode(z)

No browser adds the title attribute to the element. In general this way of creating attributes does not work.
  • I do not know whether Safari has Minimal or No support because of its lack of error messages
specified
Whether an attribute is specified

Test page
Yes Yes Yes Minimal Minimal Minimal
x.attributes['align'].specified or
x.attributes[1].specified
Is true when node x has an align attribute, false when it hasn't.
So it's meant to find out whether a node has a certain attribute.

This property must work on unspecified attributes if it is to be of any use. This is possible in Explorer, where the attributes[] array contains all possible attributes.
In the other browsers the array only contains the specified attributes. Hence specified is useless in them.
value
The value of an attribute

Test page
Minimal Incomplete Yes Yes Yes Incomplete
x.value
The value of attribute x.
  • Explorer 5 Windows supports this property only on XML attributes
  • Explorer 6 cannot access the value of styles.
  • Opera cannot access the values of events or styles.

Miscellaneous

A lot of miscellaneous methods and properties that you'll rarely need. I use only two of them in an actual script.

Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
contains()
Check whether an element contains another element

Test page
Yes Yes Yes No Incorrect Yes
x.contains(document.getElementById('test'))
If node x has a descendant with ID=test, it is true, else false.
  • In Safari the method always returns true, even when the node is not a descendant.
createDocument()
Create a new document

Test page;
main test is the Import XML script
No No No Yes Minimal No
x = document.implementation.createDocument('','',null)
  • Safari supports the bare method. v73 could import XML, but not read out the XML and write the data into the HTML page. v80 has regressed on this point
createDocumentFragment()
Create a document fragment

Test page
No No Minimal Yes Yes Almost
x = document.createDocumentFragment();
x.[fill with nodes];
document.appendChild(x);

Create a fragment, add a lot of nodes to it, and then insert it into the document. Note that the fragment itself is not inserted, only its child nodes.
You may not move a node from the existing document to the document fragment.
  • Opera creates the fragment but does not apply styles to the created elements.
  • Explorer Mac does not allow text nodes to be appended to the fragment.
documentElement
The HTML tag

Test page
Yes Yes Yes Yes Yes Yes
document.documentElement
Represents the HTML tag and thus the entire HTML document.

documentElement can hold interesting information about the dimensions of the document and/or the window. However, it's not exactly easy to use. See the document.body and doctypes 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
getElementsByName()
Get elements by their name attribute

Test page
Incorrect and incomplete Incorrect and incomplete Incomplete Yes Incomplete Incorrect and incomplete
x = document.getElementsByName('MapNode')
Make x into an array of all elements with name="MapNode" in the document

On my test page the <p>, <input>, <img> and <ppk> tags have this name.
  • Explorer Windows and Opera only look at input and img, elements that traditionally have a name attribute, and also add an element with id="MapNode".
  • Explorer Mac does the same, except for the element with id="MapNode"
  • Safari refuses the custom <ppk> tag
hasChildNodes()
Check if the node has child nodes

Test page
Yes Yes Yes Yes Yes Yes
x.hasChildNodes()
Is true when node x has child nodes.
hasFeature()
Check if an element has a certain feature.

Test page
No Yes Yes Yes Yes Yes
document.implementation.hasFeature('XML','1.0')
Is true if the browser supports XML 1.0 in. See the test page for a fuller list of possible features.

Unfortunately most browsers answer false to most features, even Core 1, so this method is not very useful.
item()
Access an item in an array

Test page Not necessary in JavaScript
Yes Yes Yes Yes Yes Yes
document.getElementsByTagName('P').item(0)
The same as document.getElementsByTagName('P')[0].

This method is meant for other programming languages where NodeLists like those returned by getElementsByTagName are not conveniently made into arrays.
You don't need item() at all.
Method or property Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
normalize()
Merge adjacent text nodes into one node

Test page
No Danger Yes Yes Yes Yes
x.normalize()
All child nodes of node x that are text nodes and have as siblings other text nodes, are merged with those. This is in fact the reverse of splitText: text nodes that were split, come together again.
Safari removes the incorrect whitespace splitText() caused.

This method used to crash Explorer 6. If you do the test once now, it holds stable, though. Two or more rapid clicks will still bring it down.
ownerDocument
The document that 'owns' the element

Test page
No Yes Yes Yes Yes Yes
x.ownerDocument
Refers to the document object that 'owns' node x. This is the document node.
splitText()
Split a text node into two text nodes

Test page
Yes Yes Yes Yes Buggy Yes
x.splitText(5)
Split the text node x at the 6th character. x now contains the first part (char. 0-5), while a new node is created (and becomes x.nextSibling) which contains the second part (char. 6-end) of the orginial text.
  • Safari adds whitespace between the two text nodes.