The Node types in JavaScript DOM

In JavaScript's document object model (DOM) explains HTML elements as nodes. The nodes themselves may be divided into types which class hierarchy given below below:

 

 

 

 

 

 

 

The above node types division is defined as a part of the list of W3C node types. Table below gives data on nodeTypes and node types which can be their children:

Node Types in JavaScript DOM

Node Type	NodeType Constants	Description	Children
Element	ELEMENT_NODE	Represents an element	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
Attr	ATTRIBUTE_NODE	Represents an attribute. (Deprecated)	Text, EntityReference
Text	TEXT_NODE	Represents textual content in an element or attribute	None
CDATASection	CDATA_SECTION_NODE	Represents CDATA section in a document. (Deprecated)	None
EntityReference	ENTITY_REFERENCE_NODE	Represents entity reference. (Deprecated)	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
Entity	ENTITY_NODE	Represents an entity. (Deprecated)	Element, ProcessingInstruction, Comment, Text, CDATASection,EntityReference.
Processing Instruction	PROCESSING_INSTRUCTION_NODE	Represents a processing instruction	None
Comment	COMMENT_NODE	Represents a comment	None
Document	DOCUMENT_NODE	Represents entire document (the root-node of DOM tree)	Element, ProcessingInstruction, Comment, Document Type
Document Type	DOCUMENT_TYPE_NODE	Provides an interface to the entities defined for the document	None
Document Fragment	DOCUMENT_FRAGMENT_NODE	Represents lightweight Document object.	Element, ProcessingInstruction, Comment, Text, CDATASection,EntityReference.
Notation	NOTATION_NODE	Represents notation declared in DTD. (Deprecated)	None

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Each nodeType in table above has Node.nodeType property (representing nodeType Constants) which returns an unsigned short integer representing the node, a nodeName property returning a name of the node and nodeValue  property returning a value of the node. The table below represents the nodeType value, constant, return type of the nodeName and nodeValue properties.

The nodeType value, constant, return type

nodeType	NodeType Constants	nodeName returns	nodeValue returns
1	ELEMENT_NODE	Element name	null
2	ATTRIBUTE_NODE	Attribute name	Attribute value
3	TEXT_NODE	#text	Content of node
4	CDATA_SECTION_NODE	#cdata-section	Content of node
5	ENTITY_REFERENCE_NODE	Entity reference name	null
6	ENTITY_NODE	Entity name	null
7	PROCESSING_INSTRUCTION_NODE	target	Content of node
8	COMMENT_NODE	#comment	Comment text
9	DOCUMENT_NODE	#document	null
10	DOCUMENT_TYPE_NODE	doctype name	null
11	DOCUMENT_FRAGMENT_NODE	#document fragment	null
12	NOTATION_NODE	Notation name	null

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Node to Node relationship and Node properties

The document type represents a HTML document or a XML document. JavaScript programs of client side mostly interact with the elements of HTML to make a webpage interactive, therefore the global variable called document is used to select the elements of the document and manipulate them. The document is root of the document tree and has access to document’s data. When arranged in a tree format, the elements have structurally related parts in the document such as parent, child, siblings, etc. 

The description of the node elements and their relationship is given by below mentioned properties:

• parentNode – Node which is parent to another node. Elements like document object have no parent.
• childNodes[] – Array-like, read only objects which are directly contained by document or element nodes.The space and new line are considered as text and counted as nodes.
• firstChild, lastChild – First and last child of a node. These are the first and the last entries in the collection of child nodes[] respectively.
• nextSibling, previousSibling – The next and previous sibling of a node. Two nodes which have same parent are siblings. They connect nodes in doubly linked list and they appear in the order in which they are written in a document. This is a read only property. The first node has null value for previousSibling property. Last node has null for nextSibling property.
• nodeType – Type of the node. Document nodes return 9, element nodes return 1, text nodes have value 3, comments have value 8, and document fragments are 11.
• nodeValue – Text present in text, attributes or comment nodes.
• nodeName – Tag, attribute, #text name of element converted to uppercase.

Element properties used for document traversal:

• firstElementChild, lastElementChild – Give the first and the last child for elements only.
• nextElementSibling, previousElementSibling – Gives the next and the previous element siblings.
• childElementCount – Count of an element's children.
• children – This is a non-standard property as opposed to all above properties. However it is supported by many browsers. It returns array containing an element objects. It does not count spaces as opposed to childNodes.

To refer to these elements in a document, expressions as below can be used. However expression output given below varies with even a new line character introduced between <html> and  <body> …etc.

Basic example of a document's node types

<html><head><title>Test</title></head><body>Hello World!</body></html>

document.childNodes[0].childNodes[1];

document.firstChild.firstChild.nextSibling;

Example of a sample program which displays child nodes of document body

 

›› go to examples ››