Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://quirksmode.org/dom/core/ below:

DOM Core

Back to the index.

DOM methods and properties that are for all implementations, and not just for the JavaScript one. In theory almost all of them should work in any programming language that supports the DOM.

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

Last major update on 3 September 2013.

createElement()

Test page

var x = document.createElement('P')

• IE8 and below also support ('<P>').
• IE8 and below return a lower-case nodeName for custom elements such as ppk.

createTextNode()

Test page

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.

• IE8 and lower cannot add a text node to a <style> tag.

Text() constructor

Test page

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

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

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

You must know these methods by heart.

getElementById()

Test page Lower case 'd'!!

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 lower also return the element with name="test".

getElementsByClassName()

Test page

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

Test page

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.

querySelector()

Test page

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.

• IE8 seems to support only simple selectors. Descendant selectors (div.className p) are not supported.

querySelectorAll()

Test page

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.

• IE8 seems to support only simple selectors. Descendant selectors (div.className p) are not supported.

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.

nodeName

Test page

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 !.
• 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

Test page

x.nodeType

The type of node x. The correct types are:

• IE 5.5: attributes and document not defined; comment has nodeType 1

nodeValue

Test page

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.

tagName

Test page Don't use

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 IE8 and lower the tagName of a comment node is !

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.

childNodes[]

Test page

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.

• IE8 and lower do not count empty text nodes. Thus, childNodes really contains the nodeList that children should give.

firstChild

Test page

x.firstChild

Get the first child node of node x.

• IE8 and lower do not count empty text nodes.

hasChildNodes()

Test page

x.hasChildNodes()

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

lastChild

Test page

x.lastChild

Get the last child of node x.

• IE8 and lower do not count empty text nodes.

nextSibling

Test page

x.nextSibling

Get the next child of the parent of x.

• IE8 and lower do not count empty text nodes.

parentNode

Test page

x.parentNode

Get the parent node of x.

previousSibling

Test page

x.previousSibling

Get the previous child of the parent of x.

• IE8 and lower do not count empty text nodes.

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

childElementCount

Test page

x.childElementCount

children[]

Test page

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

Test page

x.firstElementChild

lastElementChild

Test page

x.lastElementChild

nextElementSibling

Test page

x.nextElementSibling

previousElementSibling

Test page

x.previousElementSibling

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.

appendChild()

Test page

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

Test page

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

Test page

x.insertBefore(y,z)

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

removeChild()

Test page

x.removeChild(y)

Remove child y of node x.

replaceChild()

Test page

x.replaceChild(y,z)

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

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

after()

Test page

x.after(y)

Insert node y just after node x.

append()

Test page

x.append(y)

Insert node y as the last child of node x.

(This is exactly the same as appendChild())

before()

Test page

x.before(y)

Insert node y just before node x.

prepend()

Test page

x.prepend(y)

Insert node y as the first child of node x.

remove()

Test page

x.remove()

Remove node x from the document.

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

replace()

Test page

x.replace(y)

Replace node x by node y.

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

appendData()

Test page

x.appendData(' some extra text')

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

data

Test page

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

Test page

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

Test page

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

Test page

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.

replaceData()

Test page

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

Test page

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 bug: up to 9 it handles the first splitText() fine, but after you’ve normalized the text IE doesn’t split it any more.
  This is an old bug, but curiously my IE7 doesn’t show it any more, though IE8 and IE9 do. I’m going to assume wild IE7s do have this bug. But you might get lucky.

substringData()

Test page

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

Test page

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.

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.

attributes[index]

Test page Do not use Use getAttribute() instead

x.attributes[1]

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

• Firefox and IE try to create a list in source code order, but the order is off.
• IE 5.5 initially gives the value of the attribute; not the attribute object.

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

attributes[key]

Test page

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

• IE7 and lower don't return the value of a style attribute.
• IE8 and above do, but where the test would expect color: green, IE8 returns COLOR: green, and IE9 and up color: green; (with semicolon).
• IE7 and lower do not accept UPPER CASE attribute names.
• IE 5.5 doesn't return custom attributes, and initially gives the attribute value instead of an attribute object.

createAttribute()

Test page

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.

getAttribute()

Test page

x.getAttribute('align')

Gives the value of the align attribute of node x. Upper case attribute names are also allowed.

• In IE5-7, accessing the style attribute gives an object, and accessing the onclick attribute gives an anonymous function wrapped around the actual content.
• IE8 and above return the inline styles, but where the test would expect color: green, IE8 returns COLOR: green, and IE9 and up color: green; (with semicolon).

getAttributeNode()

Test page

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').
• IE8 and above return the inline styles, but where the test would expect color: green, IE8 returns COLOR: green, and IE9 and up color: green; (with semicolon).

hasAttribute()

Test page

x.hasAttribute('align')

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

hasAttributes()

Test page

x.hasAttributes()

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

name

Test page

x.name

The name of attribute node x.

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

removeAttribute()

Test page

x.removeAttribute('align')

Remove the align attribute from node x.

• IE5-7 don't remove event handlers.
• IE8 does remove event handlers, as does IE10.
• IE11 doesn’t.
• Some IE9s remove event handlers, others don’t.
• This is weird.
• Fortunately, no one in his right mind will use removeAttribute to remove event handlers.

removeAttributeNode()

Test page

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.

• IE 6 does't remove anything, but doesn't give an error message either.
• IE 7 doesn't remove styles and event handlers.
• See removeAttribute() for event handlers in IE. Exception: they are not removed in IE10, either.

setAttribute()

Test page

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.

setAttributeNode()

Test page

x.setAttributeNode(node)

Add attribute node node to the element.

• IE7 and lower don't set styles and events.

value

Test page

x.value

The value of attribute x.

• IE7 and lower give null for style values.
• IE8 and above return the inline styles, but where the test would expect color: green, IE8 returns COLOR: green, and IE9 and up color: green; (with semicolon).

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

compareDocumentPosition()

Test page

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

Test page

x.contains(y)

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

createDocumentFragment()

Test page

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

Test page

document.documentElement

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

getElementsByName()

Test page

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.

• IE9 and lower ignore the <p> and <ppk> tags with name="test", but counts the <div> with id="test"

isEqualNode()

Test page

x.isEqualNode(y)

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

ownerDocument

Test page

x.ownerDocument

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

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.

applyElement()

Test page

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

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

clearAttributes()

Test page

x.clearAttributes()

Remove all attributes from node x.

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

mergeAttributes()

Test page

x.mergeAttributes(y)

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

removeNode()

Test page

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.

replaceNode()

Test page

x.replaceNode(y)

Replace node x by node y.

sourceIndex

Test page

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.

swapNode()

Test page

x.swapNode(y)

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

Desktop browser test array 1.0; September 2013

IE5.5 and 6

I do not test on IE5.5 and 6 any more, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.

IE7

On Windows Vista virtualization

IE 8, 9, and 11

On separate Windows 7 virtualizations

IE10

On Windows RT (Windows 8)

Firefox

23 on Linux; 23.0.1 on Windows 7 and Mac

Safari

6.0.5 on Mac

Opera 12

12.16 Win7, Mac, and Linux

Opera 16

16.0 Win7 and Mac

Chrome

29 Win7, Mac, and Linux

Mac

MacBook Pro 17'' with OS 10.7.5

This is my main test station. It also runs all virtual Windows systems.

Windows Vista and 7

All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE7, which runs on Vista.

The non-IE Windows browsers all run on the IE9/Win7 virtualization.

Windows RT

Microsoft Surface with Windows RT

Linux

Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4