Tech Stuff - W3C DOM Overview

Our reference manual on the DOM. We started putting it together in 2003 when we needed to understand the, then new, DOM. We keep it up-to-date only when we need to do something exotic with Javascript. Which is rare, very rare. While the DOM is language independent all these pages use Javascript as the method of access (the API). W3C DOM Documents.

You need to understand how pages are constructed and how to navigate nodes before you dive into the details - or you will drown in a mass of detail - jolly quickly.

Interfaces

It's pretty scary when you need a map just to navigate the documentation but we did. The DOM consists of a number of separate specifications each of which describes one or more Interfaces each of which has a number of methods and attributes (properties). The following is a guide to documents/interfaces and the things they contain. The pages referenced document the usage and implementation (in various browsers) of a method or attribute and do not try to reproduce the existing - perfectly adequate - W3C documentation, which is always referenced on each page. This guide contains DOM-2 Core, DOM-2 HTML, DOM-2 Views, DOM-2 Traversal and Range, DOM-2 Style, DOM-2 CSS interfaces.

We update this stuff as we need to which is infrequently (we are not big javascript fans). The last modified date is always available at the bottom of each page.

DOM-2 Core
Interface	Methods	Attributes	Notes
DOMImplementation	createDocument createDocumentType hasFeature
DocumentFragment			creates a light-weight document
Document	createAttribute createAttributeNS createCDATASection createComment createDocumentFragment createElement createElementNS createEntityReference createProcessingInstruction createTextNode getElementById getElementsByTagName getElementsByTagNameNS importNode	docType documentElement implementation	Highest level of the DOM. The document comprises a collection of Nodes whose characteristics are defined by their nodeType. The document is also a Node of nodeType = 9.
Interface	Methods	Attributes	Notes
Node	appendChild cloneNode hasAttributes hasChildNodes insertBefore isSupported normalize removeChild replaceChild	attributes childNodes firstChild lastChild localName namespaceURI nextSibling nodeName nodeType nodeValue ownerDocument parentNode prefix previousSibling	These methods and attributes are common to all Nodes. By testing the nodeType additional interfaces may apply. Thus, if the nodeType is 1 (ELEMENT_NODE) then all the methods and properties of HTMLElement become available to this Node. Additionally, if the Node has a nodeType of 1 (ELEMENT_NODE) then nodeName will return the tag name, for example, "div". In many cases the nodeType is implicit in the method being used. For example, in the document method getElementsByTagName it will return a NodeList (array) of HTMLElements which, clearly, also have Node methods and attributes.
NodeList	item	length	An array of nodes created by various methods such as getElementsByTagName, length attribute is the number of items in the NodeList array.
Interface	Methods	Attributes	Notes
NamedNodeMap	getNamedItem getNamedItemNS item removeNamedItem removeNamedItemNS setNamedItem setNamedItemNS	length	Unordered array of Nodes, items may returned by using the name of the entity contained in the array.
CharacterData	appendData deleteData insertData replaceData substringData	data length
Attr		name ownerElement specified value
Interface	Methods	Attributes	Notes
Element	getAttribute getAttributeNS getAttributeNode getAttributeNodeNS getElementsByTagName getElementsByTagNameNS hasAttribute hasAttributeNS removeAttribute removeAttributeNS removeAttributeNode setAttribute setAttributeNS setAttributeNS setAttributeNodeNS	tagName	always UPPER CASE
Text	splitText		attributes from CharacterData nodeName=#text
Comment	--		attributes from CharacterData nodeName=#comment
Core Extended Interfaces
CDATASection	--
DocumentType	--	entities internalSubset name (of DTD) notations publicId systemId	the attributes of the DOCTYPE declaration
Notation	--	publicId systemId
Entity	--	notationName publicId systemId
EntityReference	--
ProcessingInstruction	--
DOM-2 HTML
Exposes all the HTML elements in the document
Interface	Methods	Attributes	Notes
HTMLCollection	item namedItem	length	get a node by its ordinal number (see Traversal and Range)
HTMLOptionsCollection	item namedItem	length
HTMLDocument	getElementsByName close open write writeLn	URL anchors(C) applets(C) body cookie domain forms(C) images(C) links(C) referrer title	Items marked (C) return HTMLCollections all others return single values getelementbyname method returns all elements created with a 'name=' attribute open method = opens and clears write method writes line of text, needs open() writeLn writes line of text + NL, needs open()
Interface	Methods	Attributes	Notes
HTMLElement	reset submit	className dir id lang title	All HTML elements provide these attributes, the common attribute set. All HTMLElements are also Nodes. So even elements that do not have their own methods/attributes will inherit both these sets.
HTMLHtmlElement		version	Returns "HTML" to nodeName, maps to <html> tag
HTMLHeadElement		profile	returns "HEAD" to nodeName, maps to <head> tag
HTMLLinkElement		charset disabled href hreflang media rel target type	return "LINK" to nodeName, maps to <link> tag
HTMLTitleElement		text	returns "TITLE" to nodeName, maps to <title> tag
HTMLMetaElement		content httpEquiv name scheme	returns "META" to nodeName, maps to <meta> tag
HTMLBaseElement		href target
HTMLIsIndexElement		form prompt
HTMLStyleElement		disabled media type	returns "STYLE" to nodeName, maps to <style> tag
Interface	Methods	Attributes	Notes
HTMLBodyElement		aLink background bgColor link text vlink	returns "BODY" to nodeName, maps to <body> tag
HTMLFormElement		acceptCharset action elements enctype length method name target	returns "FORM" to nodeName, maps to <form> tag
HTMLSelectElement	add blur focus remove	disabled form length multiple name options selectedIndex size tabIndex type value	returns "SELECT" to nodeName, maps to <select> tag. The <option> elements under this in this element are accessed as an array using the options attribute
Interface	Methods	Attributes	Notes
HTMLOptGroupElement		disabled label
HTMLOptionElement		defaultSelected disabled form index label selected text value	returns "OPTION" to nodeName, maps to <option> tag. The <option> elements listed in this tag are accessed as an array using the options attribute
HTMLInputElement	blur click focus select	accept accessKey align alt checked defaultChecked defaultValue disabled form maxLength name readOnly size src tabIndex type useMap value	returns "INPUT" to nodeName, maps to <input> tag
HTMLTextAreaElement	blur focus select	accessKey cols defaultValue disabled form name readOnly rows tabindex type value	returns "TEXTAREA" to nodeName, maps to <textarea> tag
Interface	Methods	Attributes	Notes
HTMLButtonElement		accessKey disabled form name tabindex type value	returns "BUTTON" to nodeName, maps to <button> tag
HTMLLabelElement		accessKey form htmlFor	returns "LABEL" to nodeName, maps to <label> tag
HTMLFieldSetElement		form	returns "FIELDSET" to nodeName, maps to <fieldset> tag
HTMLLegendElement		accessKey align form	returns "LEGEND" to nodeName, maps to <legend> tag
HTMLUListElement		compact type	returns "UL" to nodeName, maps to <ul> tag
HTMLOListElement		compact start type	returns "OL" to nodeName, maps to <ol> tag
HTMLDListElement		compact	returns "DL" to nodeName, maps to <dl> tag
Interface	Methods	Attributes	Notes
HTMLDirectoryElement		compact	returns "DIR" to nodeName, maps to <dir> tag. Tag deprecated use UL instead.
HTMLMenuElement		compact	returns "MENU" to nodeName, maps to <menu> tag. Tag deprecated use UL instead.
HTMLLIElement		type value	returns "LI" to nodeName, maps to <li> tag.
HTMLDivElement		align	returns "DIV" to nodeName, maps to <div> tag.
HTMLParagraphElement		align	returns "P" to nodeName, maps to <p> tag. 'align' is deprecated in HTML 4.01 use CSS style instead.
HTMLHeadingElement		align	returns "H1", "H2" etc to nodeName, maps to <h1> etc. tags. 'align' is deprecated in HTML 4.01 use CSS style instead.
HTMLQuoteElement		cite	returns "Q", "BLOCKQUOTE" etc to nodeName, maps to <q> or <blockquote> tags.
Interface	Methods	Attributes	Notes
HTMLPreElement		width	returns "PRE" to nodeName, maps to <pre> tag. 'width' is deprecated in HTML 4.01 use CSS attribute instead.
HTMLBrElement		clear	returns "BR" to nodeName, maps to <br> tag. 'clear' is deprecated in HTML 4.01 use CSS attribute instead.
HTMLBaseFontElement		color face size	returns "BASEFONT" to nodeName, maps to <basefont> tag. Deprecated in HTML 4.01 use CSS attribute instead.
HTMLFontElement		color font size	returns "FONT" to nodeName, maps to <font> tag. Deprecated in HTML 4.01 use CSS attribute instead.
HTMLHRElement		align noshade size width	returns "HR" to nodeName, maps to <hr> tag. All attributes are deprecated in HTML 4.01 use CSS attributes instead.
HTMLModElement		cite datetime	returns either "INS" or "DEL" to nodeName, maps to <ins> or <del> tags.
Interface	Methods	Attributes	Notes
HTMLAnchorElement	blur focus	accessKey charset coords href hreflang name rel rev shape tabindex target type	returns "A" to nodeName, maps to <a> tag
HTMLImageElement		align alt border height hspace isMap longDesc name src useMap vspace width	returns "IMG" to nodeName, maps to <img> tag
Interface	Methods	Attributes	Notes
HTMLObjectElement		align archive border code codeBase contentDocument data declare form height hspace name standby tabIndex type useMap height vspace width	returns "OBJECT" to nodeName, maps to <object> tag
HTMLParamElement		name type value valueType	returns "PARAM" to nodeName, maps to <param> tag
HTMLAppletElement		align alt archive code codeBase height hspace name object vspace width	returns "APPLET" to nodeName, maps to <applet> tag
Interface	Methods	Attributes	Notes
HTMLMapElement		areas name	returns "MAP" to nodeName, maps to <map> tag
HTMLAreaElement		accessKey alt coords code href noHref shape tabIndex target	returns "AREA" to nodeName, maps to <area> tag
HTMLScriptElement		charset defer event htmlFor src text type	returns "SCRIPT" to nodeName, maps to <script> tag
Interface	Methods	Attributes	Notes
HTMLTableElement	createCaption createTFoot createTHead deleteCaption deleteRow deleteTFoot deleteTHead insertRow	align bgColor border caption cellPadding cellSpacing frame rows rules summary tBodies tFoot tHead width	returns "TABLE" to nodeName, maps to <table> tag
HTMLTableCaptionElement		align	returns "CAPTION" to nodeName, maps to <caption> tag
HTMLTableColElement		align ch chOff span vAlign width	returns "COL" to nodeName, maps to <col> tag
Interface	Methods	Attributes	Notes
HTMLTableSectionElement	deleteRow insertRow	align ch chOff rows vAlign	returns "?" to nodeName, maps to <tfoot>, <thead> and <tbody> tags
HTMLTableRowElement	deleteCell inserCell	align bgColor cells ch chOff rowIndex sectionRowIndex vAlign	returns "ROW" to nodeName, maps to <row> tag
HTMLTableCellElement		abbr align axis bgColor cellIndex ch chOff colSpan headers height noWrap rowSpan scope vAlign width	returns "TD" to nodeName, maps to <td> tag
Interface	Methods	Attributes	Notes
HTMLFrameSetElement		cols rows	returns "FRAMESET" to nodeName, maps to <frameset> tag
HTMLFrameElement		contentDocument frameBorder longDesc marginHeight marginWidth name noResize scrolling src	returns "FRAME" to nodeName, maps to <frame> tag
HTMLIFrameElement		align contentDocument frameBorder height longDesc marginHeight marginWidth name scrolling src width	returns "IFRAME" to nodeName, maps to <iframe> tag
DOM-2 Views
Interface	Methods	Attributes	Notes
AbstractView	--
DocumentView	--
DOM-2 Traversal & Range
Interface	Methods	Attributes	Notes
NodeIterator	detach nextNode previousNode
NodeFilter	acceptNode
TreeWalker	firstChild lastChild nextNode nextSibling parentNode previousNode previousSibling
DocumentTraversal	createNodeIterator createTreeWalker
DOM-2 Style
Interface	Methods	Attributes	Notes
StyleSheet	--		Includes Style and CSS
StyleSheetList	item
MediaList	appendMedium deleteMedium item
LinkStyle	--
DocumentStyle	--
DOM-2 CSS
Interface	Methods	Attributes	Notes
CSSStyleSheet	deleteRule insertRule		CSS
CSSRuleList	item
CSSRule	--
CSSStyleRule	--
CSSMediaRule	deleteRule insertRule
CSSFontFaceRule	--
CSSPageRule	--
CSSImportRule	--
CSSCharsetRule	item
CSSUnkownRule	--
CSSStyleDeclaration	getPropertyCSSValue getPropertyPriority getPropertyValue item removeProperty setProperty
CSSValue	--
CSSPrimitiveValue	getCounterValue getFloatValue getRGBColorValue getRectValue getStringValue setFloatValue setStringValue
CSSValueList	item
RGBColor	--
Rect	--
Counter	--
ViewCSS	getComputedStyle
DocumentCSS	getOverrideStyle
DOMImplementationCSS	createCSSStyleSheet
ElementCSSInLineStyle	--
CSS2 Properties
CSS2Properties	--
DOM-2 Events
Interface	Methods	Attributes	Notes
EventTarget	addEventListener dispatchEvent removeEventListener
EventListener	handleEvent
Event	initEvent preventDefault stopPropagation
EventException	--
DocumentEvent	createEvent
UIEvent	initUIEvent
MouseEvent	initMouseEvent
MutationEvent	initMutationEvent

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.