This page notes the new methods and properties that Version 5 browsers should support and the (in)compatibilities of Netscape 6 and Explorer 5, who (surprise!) don't support everything as well as theory says they should.
I wrote an introduction to the Level 1 DOM so that you understand what nodes are and why you need them. On this page, first a large table of methods and properties and then four cases of trying to make generated events work (none cross-browser).
If you want to keep in touch with the cutting edge of DOM research, become a member of the W3C DOM mailing list I founded.
The W3C DOM Compatibility Table is most generously sponsored by
Untreated: objects, namedItems, CssMediaRule, CSSPrimitiveValue, methodNS(), CDATA, Comments, Traversal, ProcessingInstruction, DocumentType, MediaList, MutationEvent, Notation, TreeWalker, UIEvent
Create TOC (may take a while).
Tested on:
If you know of a method or property not listed here, please mail me.
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
---|---|---|---|---|---|
add()
Level 1 HTML Warning: Severe browser incompatibilities |
Yes | Yes | Yes | Yes | No |
x.add(y,x.options[x.options.length]) x.add(y,1) where x is the SELECT and y is the new option. Note the severe incompatibilities in the second argument: For more information see the Dynamic options page. |
|||||
addRange()
Mozilla Selection interface
|
Test | ||||
Test | |||||
addRule()
MS extension to Level 2 CSS
|
Yes | No | No | No | No |
document.styleSheets[0].addRule('PRE', 'font: 14px verdana') Add the rule PRE {font: 14px verdana} to the first style sheet in the document. For more information see the change style sheets page. |
|||||
addEventListener()
Level 2 Events
|
Test | ||||
Test | |||||
altKey
Level 2 Events |
Test | ||||
MouseEvent.altKey | |||||
anchorNode
Mozilla Selection interface
|
Test | ||||
Test | |||||
anchorOffset
Mozilla Selection interface
|
Test | ||||
Test | |||||
appendChild()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
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. |
|||||
appendData()
Level 1 Core
| From IE6 | Yes | Yes | Yes | No |
x.appendData(' some extra text') Appends the string some extra text to x, which must be a text node. | |||||
applyElement()
MS extension to Level 1 Core
|
Yes | No | No | No | No |
x.applyElement(y) Make node x a child of node y Even in Explorer 5 on Windows, this method only applies the actual node, not its content (text, for instance). Not recommended. |
|||||
attributes[]
Level 1 Core
Warning: Severe browser incompatibilities |
Yes | Yes | Yes | Yes | No |
x.attributes[1] x.attributes['align'] Also allowed, except in Konqueror. In Explorer the array contains all possible attributes for node x, ordered alphabetically on Mac and in 5.0 Windows, ordered randomly afterwards. In Netscape the array contains all attributes that are in the HTML, in the order they appear in the source code. If you want to know if an attribute is defined, use x.attributes[i].specified. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
boundingHeight
MS extension of Level 2 Range |
Test | ||||
Test | |||||
boundingLeft
MS extension of Level 2 Range |
Test | ||||
Test | |||||
boundingTop
MS extension of Level 2 Range |
Test | ||||
Test | |||||
boundingWidth
MS extension of Level 2 Range |
Test | ||||
Test | |||||
bubbles
Level 2 Events |
Test | ||||
Event.bubbles | |||||
cancelable
Level 2 Events |
Test | ||||
Event.cancelable | |||||
caption
Level 1 HTML |
Yes | Yes | Yes | Yes | No |
x.caption Access the caption of x, which must be a table. For more information see the Fun with tables page. |
|||||
cellIndex
Level 1 HTML |
Yes | Yes | Yes | Buggy, always 0 | No |
x.cellIndex The index number of element x, which must be a TD or TH, in its row (TR). For more information see the Fun with tables page. |
|||||
cells[]
Level 1 HTML |
Yes | Yes | Yes | Buggy | No |
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) For more information see the Fun with tables page. |
|||||
childNodes[]
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.childNodes[1] The second child node of node x. |
|||||
children[]
MS extension to Level 1 Core
|
Yes | Yes | No | Basic support | No |
x.children[1] The second child node that is a element node (HTML tag) of node x. Where childNodes holds all child nodes, children only holds those that are HTML tags. |
|||||
className
Level 1 HTML |
Yes | Yes | Yes | Yes | Basic support, no support on Mac |
x.className The value of attribute CLASS of node x. If the node doesn't have a class, it is empty. Can also be set: x.className="name". When this is done the style of the element also changes to the new class, except in Opera. |
|||||
clearAttributes()
MS extension to Level 1 Core
|
Yes | No | No | No | No |
x.clearAttributes() Remove all attributes from node x |
|||||
clientX, clientY
Level 2 Events |
Test | ||||
MouseEvent.clientX | |||||
cloneContents()
Level 2 Range
|
Test | ||||
Test | |||||
cloneNode()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
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. |
|||||
cloneRange()
Level 2 Range
|
Test | ||||
Test | |||||
collapse()
Level 2 Range
|
Test | ||||
Test. Also Selection | |||||
collapsed
Level 2 Range
|
Test | ||||
Range.collapsed | |||||
collapseToEnd()
Mozilla Selection interface
|
Test | ||||
Test | |||||
collapseToStart()
Mozilla Selection interface
|
Test | ||||
Test | |||||
commonAncestorContainer
Level 2 Range
|
Test | ||||
Test | |||||
compareBoundaryPoints()
Level 2 Range
|
Test | ||||
Test | |||||
compareEndPoints()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
compareNode()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
comparePoint()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
contains()
(unclear)
|
Yes | Yes | No | 'Internal function' | Yes |
x = y.contains(document.getElementById('test')) If the node y has as a descendant the node with ID=test, x becomes true, else x is false. |
|||||
containsNode()
Mozilla Selection interface
|
Test | ||||
Test | |||||
createAttribute()
Level 1 Core
Warning: Useless in practice. |
Basic support from IE6 | Basic support | Basic support | Basic support | No |
x = document.createAttribute('align','center') Create a new attribute align with value center and temporarily place it in node x. I think the new node should be set with setAttributeNode(), but even then browser support is patchy. After var x = document.createAttribute('align','center'); document.getElementById('test').setAttributeNode(x); <P ALIGN=right ID=test>the P is aligned left (except in Opera and Explorer on Mac, where nothing happens). |
|||||
createCaption()
Level 1 HTML
|
Yes | Yes | Yes | No | No |
x = y.createCaption() Create a caption for table y and store it in variable x for easy access. For more information see the Fun with tables page. |
|||||
createContextualFragment()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
createCSSStyleSheet()
Level 2 CSS
|
No | No | No | Yes | No |
document.implementation.createCSSStyleSheet() Creates a new style sheet. I have currently no idea how to put it in the document. |
|||||
createDocument()
Level 2 Core
|
No | No | Yes | No | No |
x = document.implementation.createDocument('','',null) See the Import XML page for a practical example. |
|||||
createDocumentFragment()
Level 1 Core
|
No | Some support | Yes | Some support | No |
x = document.createDocumentFragment() Create a document fragment and temporarily store it in x. As soon as you insert x into the document, you insert only its child nodes, not the fragment itself. In my test only Mozilla actually inserted the fragment, Explorer 5 on Mac and Konqueror did nothing. |
|||||
createElement()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x = document.createElement('P') Create a new HTML element <P> and temporarily place it in node x. This node is later inserted into the document. In Explorer ('<P>') is also allowed. |
|||||
createEvent()
Level 2 Events
|
Test | ||||
Test | |||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
createHTMLDocument()
Level 2 HTML
|
No | No | No | No | No |
document.createHTMLDocument() Create a new HTML document. |
|||||
createEvent()
Level 2 Range
|
Test | ||||
Test | |||||
createTextNode()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x = document.createTextNode('text') Create a text node with content text and temporarily place it in node x This node is later inserted into the document. |
|||||
createTFoot()
Level 1 HTML
|
Yes | No | Yes | No | No |
x = y.createTFoot() Create a TFOOT for table y and store it in variable x for easy access. For more information see the Fun with tables page. |
|||||
createTHead()
Level 1 HTML
|
Yes | No | Yes | No | No |
x = y.createTHead() Create a THEAD for table y and store it in variable x for easy access. For more information see the Fun with tables page. |
|||||
cssRules[]
Level 2 CSS
|
No | Yes | Yes | Crash | No |
document.styleSheets[0].cssRules[1] Access the second rule of the first style sheet in the document. For more information see the change style sheets page. |
|||||
cssText
Level 2 CSS
Warning: Browser incompatibilities |
Only style sheets | Yes (both) | Only rules | No | No |
document.styleSheets[0].cssRules[1].cssText document.styleSheets[0].cssText Get the style rule(s) as a string. Please note that browsers disagree whether to allow this only for rules, only for style sheets or for both. For more information see the change style sheets page. |
|||||
ctrlKey
Level 2 Events |
Test | ||||
MouseEvent.ctrlKey | |||||
currentTarget
Level 2 Events |
Test | ||||
Event.currentTarget | |||||
data
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.data The content of x, which must be a text node. Equivalent to x.nodeValue . Can also be set: x.data = 'The new text'. | |||||
deleteCaption()
Level 1 HTML
|
Yes | Yes | Yes | Crash | No |
x.deleteCaption() Delete the caption of table x For more information see the Fun with tables page. |
|||||
deleteCell()
Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.tBodies[0].rows[0].deleteCell(1) Delete the second cell of the first row of the first TBODY of table x. (tBodies is not necessary) For more information see the Fun with tables page. |
|||||
deleteContents()
Level 2 Range
|
Test | ||||
Test | |||||
deleteData()
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
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. | |||||
deleteFromDocument()
Mozilla Selection interface
|
Test | ||||
Test | |||||
deleteRow()
Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.tBodies[0].deleteRow(1) Delete the second row of the first TBODY of table x. (tBodies is not necessary, except in Konqueror) For more information see the Fun with tables page. | |||||
deleteRule()
Level 2 CSS
|
No | Basic support | Basic support | Basic support | No |
document.styleSheets[0].deleteRule(1) Delete the second rule of the first style sheet in the document. For more information see the change style sheets page. |
|||||
deleteTFoot()
Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.deleteTFoot() Delete the TFOOT of table x. For more information see the Fun with tables page. | |||||
deleteTHead()
Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.deleteTHead() Delete the THEAD of table x. For more information see the Fun with tables page. | |||||
detach()
Level 2 Range
|
Test | ||||
Test | |||||
detail
Level 2 Events
|
Test | ||||
UIEvent.detail (mouseEvent!) | |||||
dir
Level 1 HTML
|
Yes | Basic support | Yes | Yes | No |
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'. Please note that the DIR attribute currently serves as a kind of align, the characters of the words are not reversed. |
|||||
disabled
Level 2 CSS
|
Yes | Yes | Yes | No | No |
document.styleSheets[0].disabled = true Disable the first style sheet of the document. (Setting it to false enables the style sheet again). |
|||||
dispatchEvent()
Level 2 Events
|
Test | ||||
Test | |||||
documentElement
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x = document.documentElement Represents the HTML tag and thus the entire HTML document. | |||||
doctype
Level 1 Core
|
No | Yes | Yes | Yes | No |
document.doctype.name document.doctype gives access to the Doctype declaration at the start of the document. Example: <!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> The example above gives xhtml in Netscape 6 and xhtml plus the entire doctype tag in Explorer 5 on Mac. document.doctype als has the properties entities and notation to delve further into the arcana of DTD's. | |||||
duplicate()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
endContainer
Level 2 Range
|
Test | ||||
Test | |||||
endOffset
Level 2 Range
|
Test | ||||
Test | |||||
eventPhase
Level 2 Events |
Test | ||||
Event.eventPhase | |||||
expand()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
extend()
Mozilla Selection interface
|
Test | ||||
Test | |||||
extractContents()
Level 2 Range
|
Test | ||||
Test | |||||
findText()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
firstChild
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.firstChild The first child of node x. |
|||||
focusNode
Mozilla Selection interface
|
Test | ||||
Test | |||||
focusOffset
Mozilla Selection interface
|
Test | ||||
Test | |||||
getAttribute()
Level 1 Core
|
Yes | Yes | Yes | Yes | Yes |
x = y.getAttribute('align') Give x the value of the attribute align of node y. In Opera the value of 'align' is always a number, but other attributes work fine. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
getAttributeNode()
Level 1 Core
|
From IE6 | Buggy | Yes | Yes | No |
x.getAttributeNode('onmouseover') Get the attribute onmouseover of node x. This is an object, not a value. If the attribute doesn't exist, it is empty. Explorer 5 on Mac nonetheless returns a value, not an object. |
|||||
getComputedStyle()
Level 2 CSS
|
No | No | Yes | Basic support | No |
document.defaultView.getComputedStyle(x,null) Offers access to the default styles of element x. You can read out the individual styles by the getPropertyValue() method. For more information see the Get styles page. |
|||||
getElementById()
Level 1 HTML, Level 2 Core
|
Yes | 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. |
|||||
getElementsByTagName()
Level 1 Core
|
Yes | Yes | Yes | Yes | Yes |
x = y.getElementsByTagName('P') Make x into an array of all P's that are children of node y, so x[1] is the second P etc. Using this method for self-defined tags (like <MYTAG>) is also allowed in Netscape and Explorer. document.getElementsByTagName('*') Returns a list of all tags in a document. Doesn't work in Explorer 5.0 and 5.5 on Windows. |
|||||
getOverrideStyle()
Level 2 CSS
|
No | No | No | Yes | No |
document.getOverrideStyle() Get the override style (I have no idea what that is). |
|||||
getPropertyValue()
Level 2 CSS
|
No | Yes | Yes | No | No |
style.getPropertyValue('color') Get the color declaration of the style object. This should work on all style objects, for instance: document.getElementById('test').style document.styleSheets[0].cssRules[1].styleHowever, it doesn't work on a getElementById style in any browser. Compatibility info above is for cssRules only. For more details on the cssRules implementation, see the change style sheets page. |
|||||
getRangeAt()
Mozilla Selection interface
|
Test | ||||
Test | |||||
hasAttribute()
Level 2 Core
|
No | No | Yes | 'Internal function' | No |
x = y.hasAttribute('align') Determine whether the node y has an attribute 'align'. If yes x becomes true, if no x becomes false. |
|||||
hasAttributes()
Level 2 Core
|
No | No | Yes | 'Internal function' | No |
x = y.hasAttributes() Determine whether the node y has attributes. If yes x becomes true, if no x becomes false. |
|||||
hasChildNodes()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x = y.hasChildNodes() Determine whether the node y has child nodes. If yes x becomes true, if no x becomes false. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
hasFeature()
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
x = document.implementation.hasFeature('XML','1.0') This method is meant to find out if a browser supports a certain feature (like XML 1.0 in the example). Unfortunately hasFeature() is not widely enough supported to rely on it. |
|||||
href
Level 2 CSS
|
Yes | Read only | Read only | Read only | No |
document.styleSheet[0].href Get the HREF of the style sheet. This is a complete URL in Netscape and Konqueror, a relative path in Explorer. Can be set in Explorer on Windows. |
|||||
htmlText
MS extension of Level 2 Range |
Test | ||||
Test | |||||
id
Level 1 HTML
|
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' |
|||||
implementation
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
document.implementation In itself implementation does nothing. It contains some functions that can tell you more about the DOM implementation in the browser. |
|||||
importNode()
Level 2 Core
|
No | No | Yes | No | No |
document.importNode(x,true|false) Imports node x into the document. If the second argument is true its children are also imported. |
|||||
initEvent()
Level 2 Events
|
Test | ||||
Test | |||||
initMouseEvent()
Level 2 Events
|
Test | ||||
Test | |||||
innerHTML
MS extension to Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.innerHTML The HTML contained by node x. Can also be set: x.innerHTML = 'The <B>new</B> text' |
|||||
innerText
MS extension to Level 1 HTML
|
Yes | Yes | No | Write only | No |
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' Konqueror does not read it out at all, though you can set it. |
|||||
inRange()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
insertBefore()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.insertBefore(y,z) Insert node y as a child of node x just before node z (which thus becomes y's nextSibling.) |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
insertCell()
Level 1 HTML
|
Yes | Yes | Yes | No | No |
x.insertRow(1) Insert a TD into TR x with index 1. For more information see the Fun with tables page. |
|||||
insertData()
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
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. | |||||
insertNode()
Level 2 Range
|
Test | ||||
Test | |||||
insertRow()
Level 1 HTML
|
Yes | Yes | Yes | No | No |
x.insertRow(1) Insert a TR into element x, which must be a TABLE, THEAD, TBODY or TFOOT, with index 1. For more information see the Fun with tables page. |
|||||
insertRule()
Level 2 CSS
|
No | Buggy | Yes | No | No |
var x = document.styleSheets[0]; x.insertRule('PRE {font: 14px verdana}',x.cssRules.length) Insert the rule PRE {font: 14px verdana} into the first style sheet in the document at the last position (length of the cssRules array). For more information see the change style sheets page. |
|||||
intersectsNode()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
isCollapsed()
Mozilla Selection interface
|
Test | ||||
Test | |||||
isEqual()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
isPointInRange()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
isSupported()
Level 2 Core
|
No | No | Yes | No | No |
x.isSupported(y,'1.0') See if node x supports feature y version 1.0. Roughly the same as hasFeature, except that it works on a single element. |
|||||
isValidFragment()
Mozilla extension of Level 2 Range
|
Test | ||||
Test | |||||
item()
Level 1 Core
|
Yes | Yes | Yes | Yes | Yes |
x.getElementsByTagName('P'). The first element in the array created by x.getElementsByTagName('P'). It is completely equivalent to x.getElementsByTagName('P')[0]. It works only on arrays with HTML elements. This method is meant for other languages than JavaScript, where NodeLists like getElementsByTagName are not conveniently made into arrays. In JavaScript programming you'll hardly need it. |
|||||
lastChild
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.lastChild The last child of node x. |
|||||
mergeAttributes()
MS extension to Level 1 Core
|
Vague | No | No | No | No |
x.mergeAttributes(y) Copy all of node y's attributes to node x. Implementation is very vague. Microsoft has a working example but my own example gave an error in IE5.0 and only copied the STYLE in 5.5 and 6.0, even though the node also had an ALIGN. Not recommended. |
|||||
metaKey
Level 2 Events |
Test | ||||
MouseEvent.metaKey | |||||
move()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
moveEnd()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
moveStart()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
moveToPoint()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
name
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
x.name The name of x, which must be an attribute. |
|||||
nextSibling
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.nextSibling The next child of the parent of x. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
nodeName
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.nodeName The name of node x. If x is text, it is #text, else it is the HTML tag or the name of the attribute. |
|||||
nodeType
Level 1 Core
|
Bug in 5.0 | Yes | Yes | Yes | No |
x.nodeType is 1 for a tag is 2 for an attribute is 3 for text Explorer 5.0 on Windows assigns no nodeType to attributes. Solved in 5.5 |
|||||
nodeValue
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.nodeValue The value of node x, which must be a text node or an attribute. You can also set the nodeValue: x.nodeValue = 'new value' |
|||||
normalize()
Level 1 Core
|
Crash in IE6, otherwise not supported | Yes | Yes | Yes | No |
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. |
|||||
nSDetach()
Mozilla extension of Level 2 Range |
Test | ||||
Test | |||||
offsetParent
(unclear)
|
Yes | Yes | Yes | Yes | Yes |
x.offsetParent The parent node of x, which must be a element node (HTML tag). Only Konqueror accepts it for other nodes. |
|||||
outerHTML
MS extension to Level 1 HTML
|
Yes | Yes | No | No | No |
x.outerHTML The HTML contained by node x. Can also be set: x.outerHTML = '<P>The <B>new</B> text</P>' |
|||||
outerText
MS extension to Level 1 HTML
|
Yes | Buggy | No | No | No |
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' In Explorer on Mac the text disappears when you try setting it. |
|||||
ownerDocument
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
x.ownerDocument Refers to the document object that 'owns' node x. Usually this is the HTML document itself. |
|||||
ownerNode
Level 2 CSS
|
No | No | Yes | Yes | No |
document.styleSheets[0].ownerNode Accesses the owner node of the style sheet, usually a <LINK> or a <STYLE> tag. |
|||||
parentNode
Level 1 Core
|
Yes | Yes | Yes | Yes | Yes |
x.parentNode The parent node of x. |
|||||
pasteHTML()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
preventDefault()
Level 2 Events
|
Test | ||||
Test | |||||
previousSibling
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.previousSibling The previous child of the parent of x. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
queryInterface()
Mozilla Selection interface
|
Test | ||||
Test | |||||
rangeCount
Mozilla Selection interface
|
Test | ||||
Test | |||||
relatedTarget
Level 2 Events |
|||||
MouseEvent.relatedTarget | |||||
remove()
Level 1 HTML
|
Yes | Yes | Yes | Yes | No |
x.remove(1) Remove the second OPTION from SELECT x. For more information see the Dynamic options page. |
|||||
removeAllRanges()
Mozilla Selection interface
|
Test | ||||
Test | |||||
removeAttribute()
Level 1 Core
Warning: Slightly buggy |
Yes | Yes | Yes | Yes | No |
x.removeAttribute('align') Remove the align attribute of node x. Each browser removed the border of a table, but only Netscape 6 and Explorer 5 on Windows removed the ALIGN of a P. So the implementation is still a bit buggy. |
|||||
removeChild()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.removeChild(y) Remove child y of node x. |
|||||
removeEventListener()
Level 2 Events
|
Test | ||||
Test | |||||
removeNode()
MS extension to Level 1 Core
|
Yes | No | No | No | No |
x.removeNode(true | false) Remove node x from the document. If you add true its children are also removed. |
|||||
removeProperty()
Level 2 CSS
|
No | No | No | No | No |
document.styleSheets[0].cssRules[1].style.removeProperty('color') document.getElementById('test').style.removeProperty('color') Remove the color declaration from the second rule of the first style sheet on the page or the element with ID="test". |
|||||
removeRange()
Mozilla Selection interface
|
Test | ||||
Test | |||||
removeRule()
MS extension to Level 2 CSS
|
Yes | No | No | No | No |
document.styleSheets[0].removeRule(1) Remove the second rule from the first style sheet in the document. For more information see the change style sheets page. |
|||||
replaceChild()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.replaceChild(y,z) Replace node z, a child of node x, by node y. |
|||||
replaceData()
Level 1 Core
|
From IE6 | Buggy | Yes | Yes | No |
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. In Explorer 5 on Mac the three characters are replaced by the first three characters of the new string, while the other characters of the new string are ignored. | |||||
replaceNode()
MS extension to Level 1 Core
|
Yes | No | No | No | No |
x.replaceNode(y) Replace node x by node y. |
|||||
Method or property | Explorer 5+ Windows | Explorer 5 Mac | Mozilla 0.9.4 | Konqueror 2.2 | Opera 5 |
rowIndex
Level 1 HTML |
Yes | Yes | Yes | Buggy, counts THEAD and TFOOT first, then TBODY | No |
x.rowIndex The index number of element x, which must be a TR, in its TABLE. For more information see the Fun with tables page. | |||||
rows[]
Level 1 HTML |
Yes | Yes | Yes | Yes | No |
x.tBodies[0].rows An array with all rows of the first TBODY of table x. (tBodies is not necessary) For more information see the Fun with tables page. | |||||
rules[]
MS extension to Level 2 CSS
|
Yes | Yes | No | No | No |
document.styleSheets[0].rules[1] Access the second rule of the first style sheet in the document. For more information see the change style sheets page. |
|||||
screenX, screenY
Level 2 Events |
Test | ||||
MouseEvent.screenX | |||||
sectionRowIndex
Level 1 HTML |
Yes | Buggy | Yes | Yes | No |
x.sectionRowIndex The index number of element x, which must be a TR, in its TABLE section (THEAD, TBODY, TFOOT). For more information see the Fun with tables page. | |||||
select()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
selectAllChildren()
Mozilla Selection interface
|
Test | ||||
Test | |||||
selectionLanguageChange()
Mozilla Selection interface
|
Test | ||||
Test | |||||
selectNode()
Level 2 Range
|
Test | ||||
Test | |||||
selectNodeContents()
Level 2 Range
|
Test | ||||
Test | |||||
selectorText
Level 2 CSS
|
Yes | Yes | Yes | No | No |
document.styleSheets[0].cssRules[1].selectorText Get the selector text of the second rule in the first style sheet in the document. For Explorer, use rules[1] instead of cssRules[1]. For more information see the change style sheets page. |
|||||
setAttribute()
Level 1 Core
|
Yes | Yes | Yes | Yes | Basic support |
x.setAttribute('align','left') Set the attribute align of node x to left. The name and value are both strings. Explorer 5 special effects: When you set the attribute style, the style of the element doesn't change. Attribute name is not allowed. Attribute names must be lower case. Changing the 'type' attribute of an INPUT only works in Mozilla. Adding a new INPUT with a type attribute set by this method does not work in Explorer 5 on Mac. |
|||||
setAttributeNode()
Level 1 Core
|
Basic support from IE6 | Basic support | Basic support | Basic support | No |
Vague, vague. After
var x = document.createAttribute('align','center'); document.getElementById('test').setAttributeNode(x); <P ALIGN=right ID=test>the P is aligned left (except in Opera and Explorer on Mac, where nothing happens). |
|||||
setEnd()
Level 2 Range
|
Test | ||||
Test | |||||
setEndAfter()
Level 2 Range
|
Test | ||||
Test | |||||
setEndBefore()
Level 2 Range
|
Test | ||||
Test | |||||
setEndPoint()
MS extension of Level 2 Range |
Test | ||||
Test | |||||
setProperty()
Level 2 CSS
|
No | Yes | Vague | Supported, but crashes on cssRules | No |
style.setProperty('color','#00cc00',null) Set the color declaration of this style object green. This property should work on any style object, for instance document.getElementById('test').style document.styleSheets[0].cssRules[1].styleHowever, Netscape/Mozilla support is patchy. It works on a cssRule in Netscape 6.1 on Mac and Mozilla 0.9.4, but not on a getElementById. For more details on the cssRules implementation, see the change style sheets page. |
|||||
setStart()
Level 2 Range
|
Test | ||||
Test | |||||
setStartAfter()
Level 2 Range
|
Test | ||||
Test | |||||
setStartBefore()
Level 2 Range
|
Test | ||||
Test | |||||
shiftKey
Level 2 Events |
Test | ||||
MouseEvent.shiftKey | |||||
specified
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.specified Is true when the attribute x has a value, false when it hasn't. |
|||||
splitText()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
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. |
|||||
startContainer
Level 2 Range
|
Test | ||||
Test | |||||
startOffset
Level 2 Range
|
Test | ||||
Test | |||||
stopPropagation()
Level 2 Events
|
Test | ||||
Test | |||||
styleSheets[]
Level 2 CSS
|
Yes | Yes | Yes | Yes | No |
document.styleSheets[0] Access the first style sheet (linked or embedded) in the document. For more information see the change style sheets page. |
|||||
substringData()
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
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. Since substringData() isn't supported by Explorer 5 on Windows, I advise you to use y.data.substr(4,3) instead. |
|||||
surroundContents()
Level 2 Range
|
Test | ||||
Test | |||||
swapNode()
MS extension to Level 1 Core
|
Yes | No | No | No | No |
x.swapNode(y) Put node x in node y's place and vice versa. |
|||||
tagName
Level 1 Core
|
Yes | Yes | Yes | Yes | Yes |
x.tagName The name of node x, which must be a element node (HTML tag). |
|||||
target
Level 2 Events |
Test | ||||
Event.target | |||||
tBodies[]
Level 1 HTML |
Yes | Yes | Yes | Yes | No |
x.tBodies An array with all TBODies of table x. For more information see the Fun with tables page. | |||||
text
MS extension of Level 2 Range |
Test | ||||
Test | |||||
tFoot
Level 1 HTML |
Yes | Yes | Yes | Yes | No |
x.tFoot Access the TFOOT of x, which must be a table. For more information see the Fun with tables page. |
|||||
tHead
Level 1 HTML |
Yes | Yes | Yes | Yes | No |
x.tHead Access the THEAD of x, which must be a table. For more information see the Fun with tables page. |
|||||
timeStamp
Level 2 Events |
Test | ||||
Event.timeStamp | |||||
title
Level 1 HTML
|
Yes | Yes | Yes | Yes | Yes |
x.title The title attribute of node x. Can also be set: x.title = 'Other title!' |
|||||
toString()
Level 2 Range
|
Test | ||||
Test. Also Selection | |||||
type
Level 2 Events |
Test | ||||
Event.type | |||||
value
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
x.value The value of x, which must be an attribute. |
If you know of a method or property not listed here, please mail me.
The W3C DOM Compatibility Table is most generously sponsored by