mail us  |  mail this page

contact us
training  | 
tech stuff  | 

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.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

web zytrax.com

Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to reddit.com

Page Features

Page comment feature Send to a friend feature print this page Decrease font size Increase font size

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS1
W3C CSS2.1

DOM Stuff

W3C DOM
W3C DOM Events
Gecko DOM
MSIE DOM

Usability/Access

usability.gov
W3C -WAI
Web Style Guide
WebAim.org

Jolly Useful

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com
DOCTYPE definitions

Our Stuff

Our DOM Pages
DOM User Guide
DOM Explorer
DOM Navigation
CSS Techniques
CSS Short Cuts
CSS overview
Oh Really!

Javascript

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 21 2015.