var x = document.createElement('P')

• IE also supports ('<P>').

var x = document.createTextNode('text')

Create a text node with content text and temporarily place it in x, which is later inserted into the document.

var x = document.getElementById('test')

Take the element with id="test" (wherever it is in the document) and put it in x.

If there is more than one element with id="test", the method selects the first in the document. All others are ignored.

• IE7- and Opera 9.26 also return the element with name="test".

document.getElementsByClassName('test')
document.getElementsByClassName('test test2')

The first expression returns a nodeList with all elements that have a class value that contains "test". The second one returns a nodeList will all elements that have a class value that contains both "test" and "test2" (in any order).

var x = document.getElementsByTagName('P')

Make x into a nodeList of all P's in the document, so x[1] is the second P etc.

var x = y.getElementsByTagName('P')

Gets all paragraphs that are descendants of node y.

• The * argument, which ought to select all elements in the document, doesn't work in IE 5.5.
• Custom tags are not returned in Konqueror.

x.nodeName

The name of node x. The correct names are:

• IE 5.5 doesn't support a nodeName for attributes and the document.
• IE 5.5 reports the nodeName of a comment as !.
• Konqueror doesn't see comment nodes.

x.nodeType

The type of node x. The correct types are:

• IE 5.5: attributes and document not defined; comment has nodeType 1
• Konqueror doesn't see comment nodes.

x.nodeValue

Get the value of node x

x.nodeValue = 'Test'

Set the value of node x

• IE 5.5 doesn't support nodeValue for attributes
• Konqueror doesn't see comment nodes.

x.tagName

Get the tag name of node x. Correct values are:

My advice is not to use tagName at all.
nodeName contains all functionalities of tagName, plus a few more. Therefore nodeName is always the better choice.

• In IE (all versions) the tagName of a comment node is !

x.childNodes[1]

Get the second child node of node x.

The childNodes nodeList consists of all child nodes of the element, including (empty) text nodes and comment nodes.

• IE does not count empty text nodes. Since this is the desired behaviour as far as I'm concerned, it still gets a Yes.
• Konqueror ignores comment nodes.

x.children[1]

Get the second element child node of node x.

Where childNodes holds all child nodes, children only holds those that are element nodes (HTML tags).

• IE incorrectly counts comment nodes, too.

x.firstChild

Get the first child node of node x.

• Konqueror ignores comment nodes.

x.hasChildNodes()

Returns true when node x has child nodes; false when it hasn't.

x.lastChild

Get the last child of node x.

• Konqueror ignores comment nodes.

x.nextSibling

Get the next child of the parent of x.

• Konqueror ignores comment nodes.

x.parentNode

Get the parent node of x.

x.previousSibling

Get the previous child of the parent of x.

• Konqueror ignores comment nodes.

x.sourceIndex

Get the sourceIndex of element x. This is also the index number for the element in the document.getElementsByTagName('*') array.

• Opera 9.26 returns the wrong sourceIndex in my test.

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.

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.

x.insertBefore(y,z)

Insert node y as a child of node x just before node z.

x.removeChild(y)

Remove child y of node x.

x.replaceChild(y,z)

Replace node z, a child of node x, by node y.

x.appendData(' some extra text')

Appends the string some extra text to x, which must be a text node.

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'

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.

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.

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.

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.

x.attributes[1]

This array consists of all defined attributes in all browsers save IE, where it consists of all attributes that can possibly be defined on the node (84 all in all).

Do yourself a favour and don't use the indexed attributes array.

• Safari, Opera, Konqueror take the second attribute that's defined on node x (align in the test).
• Firefox tries to do the same, but the order of attributes is off.
• IE takes the second possible attribute of node x (dataFld in the test), whether it's defined or not.

• IE 5.5 initially gives the value of the attribute; not the attribute object.
• In IE8b1 the attributes array doesn't have a length.

x.attributes['align']

Get the align attribute object of node x. If the node has no align attribute, it returns undefined (except in IE, where it returns an attribute object that has no value.)

After years in the wilderness attribute[key] is slowly approaching a workable situation. I used to advice you not to use it; but by now you can try it if you like.

• IE7- doesn't return the value of a style attribute.
• IE 5.5 doesn't return custom attributes, and initially gives the attribute value instead of an attribute object.

z = document.createAttribute('title');
z.value = 'Test title';
x.setAttributeNode(z)

This creates a title attribute with a value and sets it on node x.

x.getAttribute('align')

Gives the value of the align attribute of node x.

• In IE, accessing the style attribute gives an object, and accessing the onclick attribute gives an anonymous function wrapped around the actual content.

x.getAttributeNode('align')

Get the attribute object align of node x. This is an object, not a value.

• IE 6/7 don't allow you to access the value of x.getAttributeNode('style').

x.hasAttribute('align')

Returns true when node x has an align attribute, false when it hasn't.

• IE8b1 returns false when asked for the style attribute, even though it's defined.

x.hasAttributes()

Returns true when node x has attributes, false when it hasn't.

x.name

The name of attribute node x.

x.removeAttribute('align')

Remove the align attribute from node x.

• IE and Opera don't remove event handlers.
• Konqueror doesn't remove the align attribute.

x.removeAttributeNode(x.attributes['align'])
x.removeAttributeNode(x.attributes[1])
x.removeAttributeNode(x.getAttributeNode('align'))

Removes the attribute node. There is little difference with removeAttribute(), except in the method argument.

• IE 6 does't remove anything, but doesn't give an error message either.
• IE 7/8b1 doesn't remove styles and event handlers.
• Opera doesn't remove event handlers.
• Konqueror doesn't remove the align attribute.

x.setAttribute('align','right')

Set the align attribute of node x to right. The name and value are both strings.

• IE5-7 doesn't set styles and removes events when you try to set them.
• IE8b1 doesn't set event handlers.

x.value

The value of attribute x.

• IE gives null for style values.

x.contains(y)

If node y is a descendant of node x, the method returns true, else false.

x = document.implementation.createDocument('','',null)

Creates a new document. The the Import XML script gives an example of what to do with such a document.

x = document.createDocumentFragment();
x.[fill with nodes];
document.[somewhere].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. (Cloning is allowed, however.)

document.documentElement

Represents the root element of the XML document. In any HTML document, the <html> element is of course the root element.

var x = document.getElementsByName('test')

Create a nodeList with all elements that have name="test". It should ignore elements with id="test"

On my test page the <p>, <input>, <img> and <ppk> tags have this name, while there's also a paragraph with id="test". Ideally, all browsers should get the first four elements and ignore the fifth one.

• IE5-7 and Opera 9.26 ignore the <p> and <ppk> tags with name="test", but counts the <p> with id="test"
• IE8b1 ignores the <ppk> tag.
• Opera counts the <p> with id="test"
• Konqueror ignores the <ppk> tag.

document.implementation.hasFeature('XML','1.0')

Returns true if the browser considers itself to be supporting XML 1.0. Other values include Core, HTML, Range, and CSS.

Note that this method reports the browser's own assessment of its capabilities. There is no independent check.

x.isSupported('XML','1.0')

Returns true if the browser considers itself to be supporting XML 1.0. Other values include Core, HTML, Range, and CSS.

Note that this method reports the browser's own assessment of its capabilities. There is no independent check.

document.getElementsByTagName('P').item(0)

The same as document.getElementsByTagName('P')[0].

The item() method is meant for other programming languages where nodeLists like those returned by getElementsByTagName are not conveniently accessible as if they were arrays.

You don't need item() at all in JavaScript.

x.normalize()

All child nodes of node x that are text nodes and have other text nodes as siblings, are merged. This is in fact the reverse of splitText: text nodes that were split, come together again.

x.ownerDocument

Refers to the document object that 'owns' node x. This is the document node.

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.

var y = document.createElement('i');
x.applyElement(y)

The <i> element is inserted into element x, around the text.

x.clearAttributes()

Remove all attributes from node x.

• IE doesn't clear event handlers. IE 7 doesn't clear inline styles.

x.mergeAttributes(y)

Copy all of node y's attributes to node x.

• IE8b1 doesn't copy the style attribute.

x.removeNode(true | false)

Remove node x from the document. If you use the argument true its children are also removed; if you use false they aren't. Note that all text nodes count as children, too.

x.replaceNode(y)

Replace node x by node y.

x.swapNode(y)

Put node x in node y's place and vice versa.