The JavaScript XML DOM
[this page | pdf | back links]
The JavaScript
DOM data
structure has a form akin to an XML document, with a tree-like structure that
includes nodes at different branching points. This means that some additional
methods and properties are available to certain of its components.
Different NodeTypes in an XML DOM
NodeType
|
Provides /
represents
|
Children
|
nodeName returns
|
nodeValue returns
|
Attr
|
An attribute
|
Text,EntityReference
|
Attribute name
|
Attribute value
|
CDATASection
|
A CDATA section in a
document
|
N/A
|
#cdata-section
|
Content of node
|
Comment
|
A comment
|
N/A
|
#comment
|
Comment text
|
Document
|
Entire document
|
Element (at most 1), ProcessingInstruction, Comment,
DocumentType
|
#document
|
null
|
DocumentFragment
|
A portion of a document
|
Element, ProcessingInstruction, Comment, Text,
CDATASection, EntityReference
|
#document fragment
|
null
|
DocumentType
|
An interface to
entities defined for document
|
None
|
Doctype name
|
null
|
Element
|
An element
|
Element, ProcessingInstruction, Comment, Text, CDATASection,
EntityReference
|
Element name
|
null
|
Entity
|
Entity
|
Element, ProcessingInstruction, Comment, Text,
CDATASection, EntityReference
|
Entity name
|
null
|
EntityReference
|
|
|
Entity reference name
|
null
|
Notation
|
Notation declared in
the DTD
|
|
Notation name
|
null
|
ProcessingInstruction
|
|
|
target
|
Content of node
|
Text
|
Textual content in an
element or attribute
|
N/A
|
#text
|
Content of node
|
Each NodeType has a
specific name constant and number used for some purposes within the DOM:
NodeType
|
As number
|
Named Constant
|
Attr
|
2
|
ATTRIBUTE_NODE
|
CDATASection
|
4
|
CDATA_SECTION_NODE
|
Comment
|
8
|
COMMENT_NODE
|
Document
|
9
|
DOCUMENT_NODE
|
DocumentFragment
|
11
|
DOCUMENT_FRAGMENT_NODE
|
DocumentType
|
10
|
DOCUMENT_TYPE_NODE
|
Element
|
1
|
ELEMENT_NODE
|
Entity
|
6
|
ENTITY_NODE
|
EntityReference
|
5
|
ENTITY_REFERENCE_NODE
|
Notation
|
12
|
NOTATION_NODE
|
ProcessingInstruction
|
7
|
PROCESSING_INSTRUCTION_NODE
|
Text
|
3
|
TEXT_NODE
|
Node objects
Nodes have the following
properties and methods. In the two tables below, we generally illustrate these
properties by reference either to the document
object or by reference to the DOM object equivalents of HTML
elements.
Property
|
Description
|
More
|
attributes
|
Returns NamedNodeMap
of attributes
|
Here
|
baseURI
|
Returns absolute base URI
|
Here
|
childNodes
|
Returns collection of the child elements (including text and
comment nodes)
|
Here
|
firstChild
|
Returns first child node
|
Here
|
lastChild
|
Returns last child node
|
Here
|
nextSibling
|
Returns next node at same node tree level
|
Here
|
nodeName
|
Returns node name
|
Here
|
nodeType
|
Returns node type
|
Here
|
nodeValue
|
Sets/returns node value
|
Here
|
ownerDocument
|
Returns root element (i.e. document
object) within which element resides
|
Here
|
parentNode
|
Returns parent node
|
Here
|
prefix
|
Sets / returns the
namespace prefix of a node
|
|
previousSibling
|
Returns previous node
at same node tree level
|
Here
|
textContent
|
Sets
/ returns the text content of a node and its descendants
|
Here
|
Method
|
Description
|
More
|
appendChild()
|
Adds
a new child after last existing one
|
Here
|
cloneNode()
|
Clones
an element
|
Here
|
compareDocumentPosition()
|
Compares
position in document of two elements
|
Here
|
contains()
|
Returns
true if node is a
descendant of other node, otherwise returns false
|
Here
|
focus()
|
Gives focus to element
|
Here
|
getFeature
|
|
|
getUserData
|
|
|
hasAttributes()
|
Returns true if element has any attributes,
otherwise returns false
|
Here
|
hasChildNodes()
|
Returns true if element has any child nodes,
otherwise returns false
|
Here
|
insertBefore()
|
Inserts
new child node before specific existing child node
|
Here
|
isDefaultNamespace()
|
Returns
true if a specified
namespace URI is the default namespace, otherwise returns false
|
Here
|
isEqualNode()
|
Returns
true if two elements /
nodes are ‘equal’ (but not necessarily exactly the same), otherwise returns false
|
Here
|
isSameNode()
|
Returns true
if two elements / nodes are the same (i.e. equal but also computationally
refer to the same node), otherwise returns false
|
Here
|
lookupNamespaceURI()
|
|
|
normalize()
|
Removes empty text
nodes and joins adjacent notes
|
Here
|
removeChild()
|
Removes specified child node
|
Here
|
replaceChild()
|
Replaces specified
child node
|
Here
|
setUserData
|
|
|
NodeList objects
The NodeList object is
the collection of child nodes within a node. It has the following properties
and methods:
Property
|
Description
|
More
|
length
|
Returns number of nodes
in a NodeList
|
Here
|
Method
|
Description
|
More
|
item()
|
Returns node at specified index position in a NodeList
|
Here
|
NamedNodeMap objects
These are covered here.
XML Document objects
Many of the properties
applicable to XML DOM objects are applicable to the DOM document object more
generally and are given here (or
here,
in relation to the document being itself a DOM element). XML specific
properties and methods are set out below.
Property
|
Description
|
More
|
documentURI
|
Sets / returns URI of
document
|
|
xmlEncoding
|
Returns XML encoding of
document
|
|
xmlStandalone
|
Sets / returns whether
document standalone
|
|
xmlVersion
|
Sets / returns XML
version of document
|
|
Method
|
Description
|
More
|
createCDATASection()
|
Creates a CDATA section
node
|
|
createEntityReference()
|
Clones an element
|
|
createProcessingInstruction()
|
Compares position in
document of two elements
|
|
DocumentType objects
Each Document has a
DOCTYPE attribute, which is either null or a DocumentType object. It has the
following properties and methods:
Property
|
Description
|
More
|
name
|
Returns DTD’s name
|
|
publicId
|
Returns DTD’s public
identifier
|
|
systemId
|
Returns DTD’s system
identifier
|
|
DOMImplementation objects
The DOMImplementation
object performs operations that are independent of any specific instance of the
DOM, i.e. it generally tells the code something about the system surrounding
the specific document. It has the following properties and methods:
Method
|
Description
|
More
|
createDocument()
|
Creates a new DOM
Document object of the specified doctype
|
|
createDocumentType()
|
Creates an empty
DocumentType node
|
|
getFeature()
|
Returns an object that
implements the API’s of the specified feature and version, if there is such
an API
|
|
hasFeature()
|
Checks whether the DOM
implementation implements a specific feature
|
|
The hasFeature() method ought in principle
to be very useful for browser feature
detection. However, apparently it was inconsistently implemented in
different browsers, so its use is no longer recommended.
ProcessingInstruction objects
The ProcessingInstruction
object represents a processing instruction. This is a way of keeping
processor-specific information in the text of the XML document. It has the
following properties:
Property
|
Description
|
More
|
data
|
Sets / returns content
of ProcessingInstruction
|
|
publicId
|
Returns target of
processing instruction
|
|
DOM element objects
DOM elements have
properties and methods shown here.
DOM attribute objects
The Attr object
representing DOM attributes has properties and methods shown here.
However, it is worth noting that an XML attribute does not have a parent node
and is not considered to be a child node of an element. As a result, it returns
null for many Node properties.
DOM text objects
Text objects represent
textual nodes. They have the following properties and methods:
Property
|
Description
|
More
|
data
|
Sets / returns text of
element or attribute
|
|
isElementContentWhitespace
|
Returns true if content
is whitespace, otherwise false
|
|
length
|
Length of text of
element or attribute
|
|
wholeText
|
Returns all text of
text nodes adjacent to this node, concatenated together
|
|
Method
|
Description
|
More
|
appendData()
|
Appends data to node
|
|
deleteData()
|
Deletes data from node
|
|
insertData()
|
Inserts data into node
|
|
replaceData()
|
Replaces data in node
|
|
replaceWholeText()
|
Replaces text in this
node and adjacent text nodes with specified text
|
|
splitText
|
Splits node into two at
specified offset, and returns new node containing text after offset
|
|
substringData()
|
Extracts data from node
|
|
CDATASection objects
The CDATASection object
represents a CDATA section in a document. This contains text that will not be
parsed by the parser (i.e. is not treated as markup. The only delimiter
recognised in such a section is “]]>” which indicates the end of the
section. CDATA sections cannot be nested. They have the following properties
and methods:
Property
|
Description
|
More
|
data
|
Sets / returns text of
node
|
|
length
|
Length of text of node
|
|
Method
|
Description
|
More
|
appendData()
|
Appends data to node
|
|
deleteData()
|
Deletes data from node
|
|
insertData()
|
Inserts data into node
|
|
replaceData()
|
Replaces data in node
|
|
splitText
|
Splits node into two at
specified offset, and returns new node containing text after offset
|
|
substringData()
|
Extracts data from node
|
|
Comment objects
The Comment object
represents the content of comment nodes. It has the following properties and
methods:
Property
|
Description
|
More
|
data
|
Sets / returns text of
node
|
|
length
|
Length of text of node
|
|
Method
|
Description
|
More
|
appendData()
|
Appends data to node
|
|
deleteData()
|
Deletes data from node
|
|
insertData()
|
Inserts data into node
|
|
replaceData()
|
Replaces data in node
|
|
splitText
|
Splits node into two at
specified offset, and returns new node containing text after offset
|
|
substringData()
|
Extracts data from node
|
|
XMLHttpRequest objects
The XMLHttpRequest object
allows JavaScript to update parts of a web page without reloading the whole
page. It also allows the developer to arrange:
-
Request data from a server after the page has loaded
-
Receive data from a server after the page has loaded
-
Send data to a server in the background
It has the following
properties and methods:
Property
|
Description
|
More
|
onreadystatechange
|
Function to be called
automatically each time the readyState property changes
|
|
readyState
|
Holds status of
XMLHttpRequest. Changes from 0 to 4:
0: request not
initialised
1: server connection
established
2: request received
3: processing request
4: request finished and
response ready
|
|
responseText
|
Returns response data
as string
|
|
responseXML
|
Returns response data
as XML data
|
|
status
|
Returns status number
(e.g. “200” for OK, “404” for “Not found”
|
|
statusText
|
Returns status text
(e.g. “OK” or “Not found”
|
|
Method
|
Description
|
More
|
appendData()
|
Appends data to node
|
|
deleteData()
|
Deletes data from node
|
|
insertData()
|
Inserts data into node
|
|
replaceData()
|
Replaces data in node
|
|
splitText
|
Splits node into two at
specified offset, and returns new node containing text after offset
|
|
substringData()
|
Extracts data from node
|
|
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)