HTML, CSS, JavaScript Tutorial

The JavaScript XML DOM

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)

Desktop view | Switch to Mobile