var x = document.createElement('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.

• Nokia Xpress decodes entities such as  . This should not happen; they should be rendered literally.

var text = new Text('Oh, how quick that fox was!');

text is now a text node that can be appended to 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.

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.

document.querySelector('.testClass')
document.querySelector('.testClass + p')

Returns the first element that have a class value that contains "testClass"; or the first element that directly follows such an element.

document.querySelectorAll('.testClass')
document.querySelectorAll('.testClass + p')

Returns a nodeList with all elements that have a class value that contains "testClass"; or a nodeList with all paragraphs directly following such an element.

Essentially, this method allows you to use CSS syntax to retrieve elements.

x.nodeName

The name of node x. The correct names are:

• Interesting incompatibility: what is the nodeName of an attribute testAttribute? IE and Opera 12 retain the camelCase, the other browsers say testattribute all lower-case. The spec is entirely silent on this subject.

x.nodeType

The type of node x. The correct types are:

x.nodeValue

Get the value of node x

x.nodeValue = 'Test'

Set the value of node x

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.

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.

x.firstChild

Get the first child node of node x.

• IE8 and lower do not count empty text 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.

x.nextSibling

Get the next child of the parent of x.

x.parentNode

Get the parent node of x.

x.previousSibling

Get the previous child of the parent of x.

x.childElementCount

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

• IE8 and lower incorrectly count comment nodes, too.

x.firstElementChild

x.lastElementChild

x.nextElementSibling

• Symbian WebKit Anna (but not Belle) reports a <br> tag that is not present in the test. This purported tag is just before a bunch of generated nodes, so it may be that this bug has something to do with dynamic elements, but it’s not good in any case.

x.previousElementSibling

• The tests run fine in Symbian WebKit Anna, but I don’t trust it because of the bug in nextElementSibling.

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.

Note: Event handlers are not cloned. This is an error in the spec.

Also, eventually cloneNode() without argument will mean cloneNode(true), as it should have from the start. Only Firefox supports this yet, as did Presto-based Opera 12 (but not Blink-based Opera 15/16).

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.after(y)

Insert node y just after node x.

x.append(y)

Insert node y as the last child of node x.

(This is exactly the same as appendChild())

x.before(y)

Insert node y just before node x.

x.prepend(y)

Insert node y as the first child of node x.

x.remove()

Remove node x from the document.

No more x.parentNode.removeChild(x), in other words.

• BB10 allows it only on element nodes, and not on text nodes.

x.replace(y)

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

• IE 9 handles the first splitText() fine, but after you’ve normalized the text IE doesn’t split it any more.

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.

This read-only property is useful if you want to get the entire text at a certain point and don’t want to be bothered by borders between text nodes.

x.attributes[1]

This array consists of all defined attributes in the source code order .

• Gecko (Nokia Xpress and Firefox) and IE try to create a list in source code order, but the order is off.

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

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

• Where the test would expect color: green, IE9 and up return color: green; (with semicolon).

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. Upper case attribute names are also allowed.

• Where the test would expect color: green, IE9 and up return color: green; (with semicolon).

x.getAttributeNode('align')

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

• Where the test would expect color: green, IE9 and up return color: green; (with semicolon).

x.hasAttribute('align')

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

x.hasAttributes()

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

x.name

The name of attribute node x.

• Presto-based Opera 12 returns ALIGN upper-case, but onclick and style lower-case.

x.removeAttribute('align')

Remove the align attribute from node x.

• The test does not run very well in Opera Mini.
• IE9 doesn’t remove event handlers.

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

• The test does not run very well in Opera Mini.
• IE doesn’t remove event handlers.

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

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

• The test does not run very well in Opera Mini.
• UC 8 doesn’t set event handlers.

x.setAttributeNode(node)

Add attribute node node to the element.

• Symbian WebKit Anna doesn’t set events.
• UC 8 doesn’t set event handlers.

x.value

The value of attribute x.

• Where the test would expect color: green, IE9 and up return color: green; (with semicolon).

x.compareDocumentPosition(y)

Compares the document (DOM) position of element y to that of element x The method returns a bitmask:

• 1: Position disconnected
• 2: Precedes
• 4: Follows
• 8: Contains
• 16: Is contained by

All relevant numbers are added, and this sum is returned. So if y follows (4) and is contained by (16) x, the method returns 20.

x.contains(y)

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

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.

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.

• I&I: Incorrect and incomplete: IE9 ignores the <p> and <ppk> tags with name="test", but counts the <div> with id="test"

x.isEqualNode(y)

Returns true when x and y refer to the same node; false if they don’t.

x.ownerDocument

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

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 and inline styles.

x.mergeAttributes(y)

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

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.

• Doesn’t work on text nodes in Opera Mini.

x.replaceNode(y)

Replace node x by node y.

x.sourceIndex

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

• IE9 and up return a sourceIndex that’s one higher than it should be, and thus the link to document.getElementsByTagName('*') is lost. This extra element is the DOCTYPE declaration.
• Opera Mini returns the correct index.

x.swapNode(y)

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