Level 1 DOM -
methods and properties

  • These methods and properties only work in browsers that support the W3C Level 1 DOM. This page is based on Explorer 5 and Netscape 6, but many other browsers support bits of the Level 1 DOM. See the Version 5 browsers page for details.

    •  

    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.

    The table below is based on Explorer 5.0, Netscape 6.01, Opera 5.02 Windows/5.0B1 Mac and Konqueror 2.1 beta.
    I haven't updated this page in a long time. Meanwhile I've created a DOM Test Suite but I haven't yet written the descriptions of the various methods and properties. I've fallen behind in DOM research. If you want to keep in touch with the cutting edge, become a member of the W3C DOM mailing list I founded.

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

    Methods and properties

    I tested each method and property by trying to use it in a live situation. I tested each method and property separately, so it's possbile that certain combinations won't work properly. I'll solve these problems on a case by case basis.

    Remarks:

    If you know of a method or property not listed here, please mail me.

    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    appendChild() SupportedSupportedSupportedNot supported
    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() Supported only on Mac
    IE6!    		SupportedSupportedNot supported
    x.appendData(' some extra text')
    Appends the string some extra text to x, which must be a text node.
    applyElement() Supported only on WindowsNot supportedNot supportedNot supported
    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[]

    Warning: Severe browser incompatibilities    		 x.attributes[1]
    The value of the second possible attribute of node x (ALIGN).
    The array contains all possible attributes for node x, ordered alphabetically (not in Explorer 6).
    x.attributes['align'] is allowed.
    Self-defined attributes not allowed.
    If you want to know if an attribute is defined, use x.attributes[i].specified.    		 x.attributes[1]
    The second actual attribute of node x. This is an object, not a value.
    The array contains all attributes that are in the HTML, in the order they appear in the source code.
    x.attributes['align'] not allowed.
    Also supports self-defined attributes (like BLAH="stuff").    		 Not supported
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    childNodes[] SupportedSupportedSupportedNot supported
    x.childNodes[1]
    The second child node of node x.
    className SupportedSupportedSupportedSupported only 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"
    clearAttributes() Supported only on WindowsNot supportedNot supportedNot supported
    x.clearAttributes()
    Remove all attributes from node x
    cloneNode() SupportedSupportedNot supportedNot supported
    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() SupportedNot supportedSupportedSupported
    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()

    Warning: Useless in practice.    		 Supported only on Mac
    IE6!    		SupportedUntestableNot supported
    x = document.createAttribute('align','right')
    Create a new attribute align with value right and temporarily place it in node x.
    The problem is that I have found no way of actually inserting the created attribute into the document. Neither appendChild() nor setAttribute() works and you can only use this method to create an attribute in the document, not in a deeper node.
    So the practical use of this method is effectively nil.
    createElement() Supported. ('<P>') is also allowed.SupportedSupportedNot supported
    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.
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    createTextNode() SupportedSupportedSupportedNot supported
    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.
    data SupportedSupportedSupportedUntestable
    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'.
    deleteData() Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    x.deleteData(4,3)
    Delete some data from x, which must be a text node, starting at the fifth character and deleting three characters.
    documentElement SupportedSupportedSupported Not supported
    x = document.documentElement.innerHTML
    In a way document.documentElement is the successor of the IE-specific DOM document.all. Developers will be thrilled that it contains good old innerHTML, also in Netscape 6. It contains a lot more interesting stuff, including most of the things that were included in document.all and it is also the node representing the root HTML tag of a document.
    I'll write a separate discussion of documentElement later on.
    doctype Supported only on MacSupportedSupportedNot supported
    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.
    firstChild SupportedSupportedSupportedNot supported
    x.firstChild
    The first child of node x.
    getAttribute() SupportedSupportedSupportedSupported
    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 propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    getAttributeNode() Supported only on Mac
    IE6!    		SupportedSupportedNot supported
    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.
    Through document.body.getAttributeNode() you can access the attributes of the <BODY> tag, but it's not entirely clear to me why we need something separate for that.
    getElementById() SupportedSupportedSupportedSupported
    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()

    Warning: Browser incompatibilities    		 Supported
    Explorer searches only for NAMEs within IMG, A, APPLET, OBJECT and all form-related tags.
    ID is the same as NAME.    		 Supported
    Netscape searches for all NAMEs within all tags, even self-defined ones.
    ID is not a NAME.    		 Supported
    Self-defined tags do not count, but all HTML tags do.
    ID is not a NAME.    		 Supported
    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() SupportedSupportedSupportedSupported only on Mac
    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 on Windows.
    getNamedItem() SupportedSupportedSupportedUntestable
    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.
    hasAttributes() Not supportedSupportedNot supportedNot supported
    x = y.hasAttributes()
    Determine whether the node y has attributes. If yes x becomes true, if no x becomes false.
    hasChildNodes() SupportedSupportedSupportedNot supported
    x = y.hasChildNodes()
    Determine whether the node y has child nodes. If yes x becomes true, if no x becomes false.
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    id SupportedSupportedSupportedSupported
    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 Supported only on Mac
    IE6!    		SupportedSupportedNot supported
    In itself implementation does nothing, it's only interesting for its two methods: createDocument() and hasFeatures().
    implementation. createDocument() Not supportedSupportedNot supportedNot supported
    x = document.implementation.createDocument('','',null)
    See the Import XML page for a practical example.
    implementation. hasFeature() Supported only on MacSupportedSupportedNot supported
    x = document.implementation.hasFeature('XML','1.0')
    In the Level1 DOM, the implementation property is only interesting for its single method: hasFeature(). This method can be used to find out if a browser supports XML or HTML. The example above checks if the browser supports XML 1.0 .
    Although the W3C DOM Specification states that the '1.0' bit can be left out, Netscape 6 throws an error if you do. So Explorer 5 on Mac is the only browser to correctly support this method.
    innerHTML SupportedSupportedCrash; untestableNot supported
    x.innerHTML
    The HTML contained by node x.
    Can also be set: x.innerHTML = 'The <B>new</B> text'
    innerText SupportedNot supportedBuggyNot supported
    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'
    insertBefore() SupportedSupportedSupportedNot supported
    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 propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    insertData() Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    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.
    item() SupportedSupportedSupportedSupported only on Mac
    x.getElementsByTagName('P').item(0)
    The first element in the array created by x.getElementsByTagName('P'). It is completely equivalent to x.getElementsByTagName('P')[0]
    lastChild SupportedSupportedSupportedNot supported
    x.lastChild
    The last child of node x.
    mergeAttributes() Supported only on WindowsNot supportedNot supportedNot supported
    x.mergeAttributes(y)
    Copy all of node y's attributes to node x.
    name Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    x.name
    The name of x, which must be an attribute.
    namedItem Supported only on MacSupportedNot supportedSupported only on Mac
    x.getElementsByTagName('P').namedItem('testp')
    Search for an element with ID testp in the array generated by document.getElementsByTagName('P'). Works only on such arrays.
    nextSibling SupportedSupportedSupportedNot supported
    x.nextSibling
    The next child of the parent of x.
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    nodeName SupportedSupportedSupportedNot supported
    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 SupportedSupportedSupportedNot supported
    x.nodeType
    is 1 for a tag
    is 2 for an attribute
    is 3 for text
    nodeValue SupportedSupportedSupportedUntestable
    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() Supported only on Mac
    Basic support in IE6, crashed on one test    		SupportedSupportedNot supported
    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.
    offsetParent SupportedSupportedSupportedSupported
    x.offsetParent
    The parent node of x. Completely equivalent to parentNode.
    parentNode SupportedSupportedSupportedSupported
    x.parentNode
    The parent node of x.
    previousSibling SupportedSupportedSupportedNot supported
    x.previousSibling
    The previous child of the parent of x.
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    removeAttribute()

    Warning: Slightly buggy    		 SupportedSupportedSupportedNot supported
    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()

    Warning: Vague implementation    		 Basic support on MacSupportedBasic supportNot supported
    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() SupportedSupportedSupportedNot supported
    x.removeChild(y)
    Remove child y of node x.
    removeNode() Supported only on WindowsNot supportedNot supportedNot supported
    x.removeNode(true | false)
    Remove node x from the document. If you add true its children are also removed.
    replaceChild() SupportedSupportedSupportedNot supported
    x.replaceChild(y,z)
    Replace node z, a child of node x, by node y.
    replaceData() Supported buggily on Mac
    IE6!    		SupportedSupportedUntestable
    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()
    		 Supported only on WindowsNot supportedNot supportedNot supported
    x.replaceNode(y)
    Replace node x by node y.
    Method or propertyExplorer 5.0Netscape 6.01Konqueror 2.1Opera 5
    setAttribute() SupportedSupportedSupportedBasic 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.
    When you try to set the type attribute of an INPUT, Explorer 5 Windows used to give errors, but not any more, now it's Explorer 5 Mac that gives an error message. Strange...
    setAttributeNode() Supported only on Mac
    IE6!    		SupportedSupportedNot supported
    Don't get this to work, Netscape returns an obscure error, though it does support the method.
    specified SupportedSupportedSupportedUntestable
    x.specified
    Is true when the attribute x has a value, false when it hasn't.
    splitText() Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    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.
    substringData() Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    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() Supported only on WindowsNot supportedNot supportedNot supported
    x.swapNode(y)
    Put node x in node y's place and vice versa.
    tagName SupportedSupportedSupportedSupported
    x.tagName
    The name of node x, which must be an element (HTML tag).
    title SupportedSupportedSupportedSupported
    x.title
    The title attribute of node x.
    Can also be set: x.title = 'Other title!'
    value Supported only on Mac
    IE6!    		SupportedSupportedUntestable
    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.

    Generated events

    I noticed that as soon as you start to generate JavaScript events, like adding a mouseover to a link, you are in deep trouble. Below are some example scripts and their results.

    The goal of each of the scripts below is to get this HTML tag 

    <A HREF="#" onMouseOver="alert('Correct!')>Link!</A>

    and to see if the mouseover gives an alert.

     ScriptExplorer 5.0 and 6.0Netscape 6.01Konqueror 2.1
    Generate tag 
    var a = document.createElement('A');
a.setAttribute('onmouseover','alert("Correct!")');
a.setAttribute("href","#");
b = document.createTextNode('Link!');
a.appendChild(b);
document.getElementsByTagName('BODY')[0].appendChild(a);
    		 No alert boxAlert boxAlert box
    Add attributes to existing tag Existing tag: 
    <A></A>
    Add attributes and text. 
    var a = document.getElementsByTagName('a')[0];
a.setAttribute('onmouseover','alert("Correct!")');
a.setAttribute("href","#");
b = document.createTextNode('Link!');
a.appendChild(b);
    		 No alert boxAlert boxAlert box
    Change attributes of existing tag Existing tag:
    <A HREF="#" onMouseOver="alert('Incorrect')">Link!</A>
    Change mouseover attribute. 
    var a = document.getElementsByTagName('a')[0];
a.setAttribute('onmouseover','alert("Correct!")');
    		 No alert boxAlert boxAlert box
    Clone existing tag Existing tag:
    <A HREF="#" onMouseOver="alert('Correct')">Link!</A>
    Clone tag and see what happens to the copy. 
    var a = document.getElementsByTagName('a')[0].cloneNode(true);
document.getElementsByTagName('BODY')[0].appendChild(a);
    		 Alert box only on WindowsNo alert boxAlert box

    Home