DOM Core - mobile

Back to the index.

The backgrounds and borders.

This is the mobile table. See also the desktop table.

Last major update on 7 September 2013.

Creating elements

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
createElement()
Create a new element

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
var x = document.createElement('P')
Create a new HTML element node <P> and temporarily place it in x, which is later inserted into the document.
createTextNode()
Create a new text node

Test page
Yes Yes Yes Yes Yes Almost Yes Yes Yes
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 &nbsp;. This should not happen; they should be rendered literally.
Text() constructor
To create text nodes with a constructor.

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

text is now a text node that can be appended to the document.

Getting elements

These methods are meant for getting the HTML elements you need from the document.

You must know these methods by heart.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
getElementById()
Get the element with this ID

Test page Lower case 'd'!!
Yes Yes Yes Yes Yes Yes Yes Yes
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.

getElementsByClassName()
Get a nodeList of the elements with this class.

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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).

getElementsByTagName()
Get all tags of this type

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

querySelector()
Get the first element that conforms to a CSS selector

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

querySelectorAll()
Get a nodeList of elements by CSS selector

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Node information

These four properties give basic information about all nodes. What they return depends on the node type. They are read-only, except for nodeValue.

There are three basic node types: element nodes (HTML tags), attribute nodes and text nodes. I test these properties for all these three types and added a fourth node type: the document node (the root of all other nodes).

You must know these properties by heart.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
nodeName
The name of the node in UPPER CASE

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.nodeName

The name of node x. The correct names are:

Element Attribute Text Comments Document
the UPPER CASE tag name the attribute name #text #comment #document
  • 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.
nodeType
The type of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.nodeType

The type of node x. The correct types are:

Element Attribute Text Comments Document
1 2 3 8 9
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
nodeValue
The value of the node, if any. Read/write

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.nodeValue

Get the value of node x

x.nodeValue = 'Test'

Set the value of node x

Element Attribute Text Comments Document
n/a Value of attribute Content of text node Content of comment node n/a
tagName
The tag name of an element node

Test page Don't use
Yes Yes Yes Yes Yes Yes Yes Yes
x.tagName

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

Element Attribute Text Comments Document
the UPPER CASE tag name n/a n/a n/a n/a

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.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

The DOM tree

Five properties and two arrays for walking through the DOM tree. Using these properties, you can reach nodes that are close to the current node in the document structure.

In general you shouldn't use too many of these properties. As soon as you're doing something like

x.parentNode.firstChild.nextSibling.children[2]

your code is too complicated. Complex relationships between nodes can suddenly and unexpectedly change when you alter the document structure, and altering the document structure is the point of the W3C DOM. In general you should use only one or two of these properties per action.

You must know these properties by heart.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
childNodes[]
An array with all child nodes of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

firstChild
The first child node of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.firstChild

Get the first child node of node x.

  • IE8 and lower do not count empty text nodes.
hasChildNodes()
Check if the node has child nodes

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.hasChildNodes()

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

lastChild
The last child node of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.lastChild

Get the last child of node x.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
nextSibling
The next sibling node of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.nextSibling

Get the next child of the parent of x.

parentNode
The parent node of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.parentNode

Get the parent node of x.

previousSibling
The previous sibling node of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.previousSibling

Get the previous child of the parent of x.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

DOM Traversal

A few useful properties that should have been in the DOM from the start but mysteriously weren’t.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
childElementCount
The number of element children

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.childElementCount
children[]
An array with all child element nodes of the node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.
firstElementChild
The first child that is an element node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.firstElementChild
lastElementChild
The last child that is an element node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.lastElementChild
nextElementSibling
The next element node sibling

Test page
Yes Yes Yes Yes Yes Yes Incorrect Yes Yes Yes
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.
previousElementSibling
The previous element node sibling

Test page
Yes Yes Yes Yes Yes Yes Incorrect Yes Yes Yes
x.previousElementSibling
  • The tests run fine in Symbian WebKit Anna, but I don’t trust it because of the bug in nextElementSibling.
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Node manipulation

These five methods allow you to restructure the document. The average DOM script uses at least two of these methods.

The changes in the document structure are applied immediately, the whole DOM tree is altered. The browser, too, will immediately show the changes.

You must know these methods by heart.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
appendChild()
Append a child node as the last node to an element

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

cloneNode()
Clone a node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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).

insertBefore()
Insert a node into the child nodes of an element

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.insertBefore(y,z)

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

removeChild()
Remove a child node from an element

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.removeChild(y)

Remove child y of node x.

replaceChild()
Replace a child node of an element by another child node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.replaceChild(y,z)

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

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

New node manipulation methods

These methods are brand-new. They should have been in the DOM from the start.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
after()
Add a node after another node

Test page
No No No No No No No No
x.after(y)

Insert node y just after node x.

append()
Add a node as the last child

Test page
No No No No No No No No
x.append(y)

Insert node y as the last child of node x.

(This is exactly the same as appendChild())

before()
Add a node before another node

Test page
No No No No No No No No
x.before(y)

Insert node y just before node x.

prepend()
Add a node as the first child

Test page
No No No No No No No No
x.prepend(y)

Insert node y as the first child of node x.

remove()
Remove a node

Test page
No Yes No No Yes No Yes No Incomplete No No Yes No No Yes
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.
replace()
Replace a node by another node

Test page
No No No No No No No No
x.replace(y)

Replace node x by node y.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Text data

These methods are for manipulating text data, i.e. the contents of text nodes.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
appendData()
Append data to a text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.appendData(' some extra text')

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

data
The content of a text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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'
deleteData()
Delete text from a text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

insertData()
Insert text into a text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

normalize()
Merge adjacent text nodes into one node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
replaceData()
Replace text in a text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

splitText()
Split a text node into two text nodes

Test page
Yes Yes Yes Yes Yes Yes Yes Buggy Yes
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.
substringData()
Take a substring of the text in the text node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

wholeText
The text of a text node plus the text in directly adjacent text nodes. Read only.

Test page
Yes Yes Yes Yes Yes Yes Yes Yes

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.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Attributes

A bloody mess. Try influencing attributes in this order:

  1. Try getting or setting a specific property, like x.id or y.onclick.
  2. If there is no specific property, use getAttribute() or setAttribute().
  3. If even that doesn't work, try any other method or property in the table below. Most have horrible browser incompatibility patterns, though.
  4. Avoid attributes[]. It's worse than anything else.

In my view any method or property concerning attribute nodes should also work on the style attribute, event handlers and custom attributes. If not I judge the method or property incomplete.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
attributes[index]
An array with the attributes of a node, accessed by index number, in the order they're defined in the source code.

Test page Do not use Use getAttribute() instead
Yes Yes Yes Yes Yes Incorrect Yes Yes Incorrect
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.

attributes[key]
An array with the attributes of a node, accessed by attribute name

Test page
Yes Yes Yes Yes Yes Yes Yes Almost Yes
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).
createAttribute()
Create a new attribute node

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
getAttribute()
Get the value of an attribute

Test page
Yes Yes Yes Yes Yes Yes Yes Almost Yes
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).
getAttributeNode()
Get an attribute node

Test page
Yes Yes Yes Yes Yes Yes Yes Almost Yes
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).
hasAttribute()
Check if a node has a certain attribute

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.hasAttribute('align')

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

hasAttributes()
Check if a node has attributes

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.hasAttributes()

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

name
The name of an attribute

Test page
Yes Yes Yes Yes Almost Yes Yes Yes Yes Yes
x.name

The name of attribute node x.

  • Presto-based Opera 12 returns ALIGN upper-case, but onclick and style lower-case.
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
removeAttribute()
Remove an attribute node

Test page
Yes Yes Yes ? Yes Yes Yes Yes Almost Yes
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.
removeAttributeNode()
Remove an attribute node

Test page
Yes Yes Yes ? Yes Yes Yes Yes Almost Yes
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.
setAttribute()
Set the value of an attribute

Test page
Yes Yes Yes ? Yes Yes Yes Incomplete Yes Yes
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.
setAttributeNode()


Test page
Yes Yes Yes Yes Yes Yes Incomplete Yes Incomplete Yes Yes
x.setAttributeNode(node)

Add attribute node node to the element.

  • Symbian WebKit Anna doesn’t set events.
  • UC 8 doesn’t set event handlers.
value
The value of an attribute

Test page
Yes Yes Yes Yes Yes Yes Yes Almost Yes
x.value

The value of attribute x.

  • Where the test would expect color: green, IE9 and up return color: green; (with semicolon).
Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Miscellaneous

A lot of miscellaneous methods and properties that you'll rarely need. I use only two of them in an actual script.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
compareDocumentPosition()
Gives the relative place of one element compared to another.

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

contains()
Check whether an element contains another element

Test page
Yes Yes Yes Yes Yes No Yes Yes Yes
x.contains(y)

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

createDocumentFragment()
Create a document fragment

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
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.

documentElement
The HTML tag

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
document.documentElement

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

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
getElementsByName()
Get elements by their name attribute

Test page
Yes Yes Yes Yes Yes Yes Yes i&i Yes
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"
isEqualNode()
Whether two nodes are the same

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.isEqualNode(y)

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

ownerDocument
The document that 'owns' the element

Test page
Yes Yes Yes Yes Yes Yes Yes Yes
x.ownerDocument

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

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Microsoft extensions

As usual Microsoft has extended the standard somewhat. Though sometimes its extensions are brilliant (innerHTML springs to mind), in the case of the DOM Core they aren't.

Note the difference between W3C and Microsoft methods. The W3C methods are owned by the parent element of the node you want to adjust, the Microsoft methods by the node itself.

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
applyElement()
Something with nodes

Test page
No No No No No No No Yes No
var y = document.createElement('i');
x.applyElement(y)

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

clearAttributes()
Remove all attributes from a node

Test page
No No No No No No No Incomplete No
x.clearAttributes()

Remove all attributes from node x.

  • IE doesn't clear event handlers and inline styles.
mergeAttributes()
Copy all attributes of one node to another node

Test page
No No No No No No No Yes No
x.mergeAttributes(y)

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

removeNode()
Remove a node

Test page
No No No Incomplete No No No No Yes No
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.
replaceNode()
Replace a node by another node

Test page
No No No No No No No Yes No
x.replaceNode(y)

Replace node x by node y.

sourceIndex
The index number of the node in the page source

Test page
No No No Yes No No No No Incorrect No
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.
swapNode()
Swap two nodes

Test page
No No No No No No No Yes No
x.swapNode(y)

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

Selector iOS Android Chrome Opera BlackBerry Nokia UC NetFront Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Tested browsers

Mobile browser test array 1.1; September 2013

iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.3
iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.0
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on Samsung Galaxy Note I, Android 4.0.3
Default browser on Sony Xperia S, Android 4.0.4
Default browser on Xiaomi M2, Android 4.1.1
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy S3, Android 4.1.2
Default browser on HTC One X, Android 4.2.2
Chrome 18
WebKit 535
Default browser on Samsung Galaxy S4, Android 4.2
On Sony Xperia S, Android 4.0.4. This is a downloaded version from Google
It will be interesting to see if Samsung’s purported Chrome 18 is really the real Chrome 18.
Chrome 29
Blink (Chromium 29)
On HTC One X, Android 4.2.2
On Nexus 7, Android 4.3
Opera Mini
Presto
Proxy browser
7.0.5 on iPad 2, iOS 7.0
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia PureView 808, Symbian Belle
7.5 on Samsung Galaxy Note I, Android 4.0.3
Opera Mobile 12
Presto
12.00 on Nokia E7, Symbian Anna
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Opera Mobile 15
Blink (Chromium 28)
On Sony Xperia S, Android 4.0.4
On Nexus 7, Android 4.3
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z10 (BB OS 10.1)
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
3.2 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. Also, rumour has it that Nokia is quietly hiring back ex-MeeGo people, so a Nokia-based restart is not entirely impossible.
Anna
WebKit 533
Default browser (7.3) on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser (8.3) on Nokia PureView 808, Symbian Belle FP2
The most recent Symbian build.
UC
WebKit 534
UC 8.5.1 on Xiaomi M2 (Android 4.1.1)
UC 9.2.3 on Huawei C8813 (Android 4.1.1)
The largest Chinese browser. I’m testing the full variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
NetFront
WebKit 534
Default browser 1.5.0 on Nintendo Wii U 3.1.0
NetFront, by the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine, and to the gaming device and TV markets.
Dolphin
WebKit 534
Beta 1.3.1 on Sony Xperia S, Android 4.0.4.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
QQ One
WebKit 533
4.2.2 on HTC One X, Android 4.2.2
This is the downloadable, international browser TenCent created.
Tizen
WebKit 537
Default browser on Ref.Device-PQ by Samsung; Tizen 2.2
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.0.
Firefox OS
Gecko 18
Geekphone/Telefónica (Peak and/or qcom); Boot2Gecko 1.0.1.0-prerelease
Firefox Android
Gecko 23
23 on HTC One X, Android 4.2.2

Browsers by WebKit version:

533
Android 2
Anna
UC
QQ 2.0
One
534
Android 3 and 4
BB 6 and 7
MeeGo
NetFront
Dolphin
535
Belle
Chrome 18
536
iOS6
BlackBerry PlayBook
537
iOS7
BlackBerry 10
Tizen