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. |
|||||
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 | |||||
altLeft
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
altKey
Level 2 Events |
Test | ||||
MouseEvent.altKey | |||||
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 |
bubbles
Level 2 Events |
Test | ||||
Event.bubbles | |||||
button
Level 2 Events
|
Test | ||||
Test | |||||
cancelable
Level 2 Events |
Test | ||||
Event.cancelable | |||||
cancelBubble
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
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 | |||||
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. |
|||||
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. |
|||||
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. |
|||||
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 |
createEventObject()
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
createHTMLDocument()
Level 2 HTML
|
No | No | No | No | No |
document.createHTMLDocument() Create a new HTML document. |
|||||
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. |
|||||
ctrlLeft
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
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. |
|||||
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. | |||||
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. | |||||
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. | |||||
eventPhase
Level 2 Events |
Test | ||||
Event.eventPhase | |||||
firstChild
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.firstChild The first child of node x. |
|||||
fromElement, toElement
MS extension to Level 2 Events
|
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. |
|||||
getElementsByName()
Level 1 Core/HTML
Warning: Browser incompatibilities |
Yes Explorer searches only for NAMEs within IMG, A, APPLET, OBJECT and all form-related tags. ID is the same as NAME. |
Yes Netscape searches for all NAMEs within all tags, even self-defined ones. ID is not a NAME. |
Yes Self-defined tags do not count, but all HTML tags do. ID is not a NAME. |
Yes Works only on a limited number of HTML elements. Only IDs count, not NAMEs. |
|
x = document.getElementsByName('nomen') Make x into an array of all elements with NAME="nomen" in the document, so x[1] is the second of those. |
|||||
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. |
|||||
getNamedItem()
Level 1 Core
|
Yes | Yes | Yes | Untestable | |
x = y.attributes.getNamedItem('class').nodeValue Makes x the value of the CLASS attribute of node y. This method only works on namedNodeMaps, which you can envision as a kind of Perl hashes. Until now I only found attributes[] as an example of a namedNodeMap. |
|||||
getOverrideStyle()
Level 2 CSS
|
No | No | No | Yes | No |
document.getOverrideStyle() Get the override style (I have no idea what that is). |
|||||
getPropertyCSSValue()
Level 2 CSS
|
Test | ||||
cssRules[0].getPropertyCSSValue() | |||||
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. |
|||||
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. |
|||||
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. |
|||||
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. | |||||
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. |
|||||
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. |
|||||
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 | |||||
name
Level 1 Core
|
From IE6 | Yes | Yes | Yes | No |
x.name The name of x, which must be an attribute. |
|||||
namedItem()
Level 1 HTML
|
Supported only on Mac | Yes | No | Supported only on Mac | |
x.getElementsByTagName('P'). Search for an element with ID testp in the array generated by document.getElementsByTagName('P'). Works only on such arrays. RETEST! |
|||||
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. |
|||||
offsetX, offsetY
MS extension to Level 2 Events
|
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. |
|||||
offsetX, offsetY
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
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. |
|||||
parentRule
Level 2 CSS
|
Test | ||||
cssRules[0].parentRule | |||||
parentStyleSheet
Level 2 CSS
|
Test | ||||
styleSheet[0].parentStyleSheet | |||||
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 |
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. |
|||||
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. |
|||||
removeAttributeNode()
Level 1 Core
Warning: Vague implementation |
No | Basic support | Yes | Basic support | No |
The main problem is naming the attribute you want to remove. x.removeAttributeNode(x.getAttributeNode('border')) Remove the border attribute of node x, which is a table. Done only by Netscape 6. x.removeAttributeNode(x.attributes[1]) Remove the second attribute of node x, which in this case is ALIGN. Done only by Netscape 6. This way of using removeAttributeNode() is impossible in Explorer, due to the strange implementation of attributes[]. |
|||||
removeChild()
Level 1 Core
|
Yes | Yes | Yes | Yes | No |
x.removeChild(y) Remove child y of node x. |
|||||
removeEventListener()
Level 2 Events
|
Test | ||||
Test | |||||
removeNamedItem()
Level 1 Core
|
Test | ||||
NamedNodeMap | |||||
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". |
|||||
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. |
|||||
repeat
MS extension to Level 2 Events
|
Test | ||||
keyDown (keyPress?) event | |||||
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 |
returnValue
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
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. | |||||
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). |
|||||
setNamedItem()
Level 1 Core
|
Test | ||||
NamedNodeMap | |||||
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. |
|||||
shiftLeft
MS extension to Level 2 Events
|
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. |
|||||
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. |
|||||
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. | |||||
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!' |
|||||
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. |
|||||
wheelDelta
MS extension to Level 2 Events
|
Test | ||||
Test | |||||
which
Ancient Netscape property
|
Test | ||||
Test | |||||
x,y
MS extension to Level 2 Events
|
Test | ||||
Test |
If you know of a method or property not listed here, please mail me.
The W3C DOM Compatibility Table is most generously sponsored by