Understanding The Power of JavaScript DOM with Examples

Understanding The Power of JavaScript DOM with Examples

JavaScript DOM Manipulation
JavaScript DOM Manipulation

In simple words, JavaScript DOM is an internal representation of an HTML web page. As the name specifies,  the DOM (Document Object Model) represents an HTML or XML document with a logical tree. The Document Object Model (DOM) is language-independent and a cross-platform application programming interface that represents an HTML or XML document as a tree structure. There each node is an object representing a part of the document. JavaScript DOM provides a set of associated properties and methods to access and manipulate individual elements (nodes) of the DOM structure.

Lets first grip the basic concept.

How HTML Page loaded into the browser?

When a user opens a new web page in your web browser, the browser retrieves the web page’s HTML code and parses it. This is like C compiler parses C programs. Then, the browser builds up a model of the document’s structure in standard form and uses this model to draw the page on the screen. 

This pictorial representation of the web-page (HTML document) is can be accessed and manipulated at run time using JavaScript DOM methods.

Also, read below interesting articles:

Powerful Features of JavaScript That Every Developer Should Know!!

Top 10 Best Online JavaScript Editor for Web Developers

Debugging JavaScript code using JavaScript Debugger in Chrome

 

What is DOM (Document Object Model) in JavaScript?

DOM (Document Object Model) is an object that is created by the browser for each new HTML page. Every web page in HTML website is an object of browser which resides under the browser window. This browser object further contains a set of HTML sub-objects.

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

The Document Object Model is a W3C (World Wide Web Consortium) standard which defines the logical structure of web pages in a unified representation. DOM provides a standard way in which HTML document is accessed and manipulated using JavaScript DOM methods.

From the developers perspective, DOM is an API (Application Programming Interface) which provides a mechanism to navigate objects in the document.

HTML JavaScript DOM Hierarchy Example

Let’s visualize the JavaScript DOM structure through a very simple example. 

JavaScript DOM Tree
JavaScript DOM Tree

What JavaScript can do with DOM?

JavaScript has all the capability to access and manipulate the document object model. With the power of JavaScript DOM, the following actions can be achieved at runtime:

  • JavaScript can add new HTML elements and attributes
  • JavaScript can change all the HTML elements in the page
  • JavaScript can create new HTML events on the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes

What does the HTML DOM contain?

  • DOM contains the HTML elements as objects
  • The properties of all HTML elements
  • The methods to access all HTML elements
  • The events for all HTML elements
  • JavaScript DOM is API to access, modify, delete, insert HTML elements into the web page at runtime.

Properties of JavaScript DOM (Document Object Model)

JavaScript DOM has a set of properties associated with an object that can be accessed and modified through JavaScript. The following are common DOM properties:

id – Returns the value of the id of the specified node
innerHTML – Returns the HTML code (text, image code, tags, etc.) within the specified node, such as all of the HTML code within a div element

lang – Returns the language value of the specified node
lastChild – Returns the last child node of the specified node
nextSibling – Returns the node following the specified node
nodeName – Returns the name of the specified node (such as div for a div element)
nodeType   – Returns the type of the specified node
nodeValue – Returns the value of the specified node (such as the text within a div element or the value of an attribute)

attributes An array of all of the attributes in the specified node; the name and value properties of this property can be used to access the attribute name or attribute value for each member of the array
childNodes An array of all the child nodes of the specified node
className Returns the value of the class attribute of the specified node
clientHeight Returns the height, in pixels, of the specified node
clientWidth Returns the width, in pixels, of the specified node
dir Returns the value of the direction of the text in the specified node (ltr or rtl)
firstChild Returns the first child node of the specified node

offsetHeight Returns the offset height of the specified node
offsetWidth Returns the offset width of the specified node
ownerDocument Returns the document object that contains the specified node
parentNode Returns the parent node of the specified node
previousSibling Returns the node before the specified node
scrollLeft Returns the difference between the left edge and the left edge in view of the specified node
scrollTop Returns the difference between the top edge and the top edge in view of the specified node
scrollHeight Returns the entire height (including anything hidden and viewable via a scroll bar) of the specified node
scrollWidth Returns the entire width (including anything hidden and viewable via a scroll bar) of the specified node
style Returns the style object of the specified node
tabIndex Returns the tab index of the specified node
tagName Returns the tag name (in uppercase) of the specified node
title Returns the value of the title attribute of the specified node

H2 – List of JavaScript DOM methods

JavaScript DOM Methods are used to access and manipulate DOM elements. Like to get and set values of HTML elements getElementByID() is most popular. The following is the complete list of JavaScript DOM methods:

blur() Removes focus from the specified node
click() Executes the click event on the specified node
cloneNode() Creates a clone of the specified node
detachEvent() Detaches an event from the specified node
dispatchEvent() Executes an event on the specified node
focus() Gives focus to the specified node
getAttribute() Returns the value of the attribute name sent to it as a parameter on the specified node

addEventListener() Adds an event listener to the specified node to run a function on the event sent to it as a parameter
appendChild() Appends a node as the last child of the specified node
attachEvent() Attaches an event to the specified node to run a function on the event sent to it as a parameter

getAttributeNS() Returns the value of the attribute name and namespace sent to it as a parameter on the specified node
getAttributeNode() Returns the attribute node of the attribute name sent to it as a parameter for the specified node

getAttributeNodeNS() Returns the attribute node of the attribute name and namespace sent to it as parameters for the specified node

getElementsByTagName() An array of all the child element nodes with the tag name sent to it as a parameter in the specified node
getElementsByTagNameNS() An array of all the child element nodes with the tag name and namespace sent to it as parameters in the specified node
hasAttribute() Returns true if the attribute name sent to it as a parameter exists on the specified node, or false if not
hasAttributeNS() Returns true if the attribute name and namespace sent to it as parameters exist on the specified node, or false if not.
hasAttributes() Returns true if the specified node has any attribute nodes defined, or false if not
hasChildNodes() Returns true if the specified node has any child nodes. or false if not
insertBefore() Inserts a node sent to it as a parameter before the node sent to it as a second parameter inside the specified node
normalize() Normalizes the specified node

removeAttribute() Removes the attribute node for the attribute name sent to it as a parameter from the specified node
removeAttributeNode() Removes the attribute node for the attribute node object reference sent to it as a parameter from the specified node
removeAttributeNS() Removes the attribute node for the attribute name sent to it as a parameter with the namespace sent to it as a parameter from the specified node
removeChild() Removes the child node sent to it as a parameter from the specified node
removeEventListener() Removes an event listener from the specified node
replaceChild() Replaces the child node sent to it as the second parameter with the child node sent to it as the first parameter in the specified node
scrollIntoView() Scrolls the specified node into view in the browser window
setAttribute() Sets an attribute node’s name (first parameter) and value (second parameter) for the specified node
setAttributeNode() Sets an attribute node as the attribute node object sent to it as a parameter for the specified node
setAttributeNodeNS() Sets an attribute node as the attribute node object sent to it as a parameter with the namespace sent to it as a parameter for the specified node
setAttributeNS() Sets an attribute node’s namespace (first parameter), name (second parameter), and value (third parameter) for the specified node

Defining and Using the JavaScript DOM

When an HTML tag is defined in the HTML source code, the browser creates a slot for that object (HTML element) in memory as the page loads. The purpose of an object is to represent some “thing.” in the browser and its Document Object Model. 

Learn Debugging JavaScript code using JavaScript Debugger in Chrome

The Document Object Model (DOM) allows JavaScript to access the structure of the document in the browser.

Each document in DOM is a collection of different HTML elements called as nodes.

JavaScript getElementById() example

<!DOCTYPE html>
<html>
<body>

<p id=”domTest”>This JavaScript DOM method test.</p>

<button onclick=”funTest()”>Check It</button>

<script>
function myFunction() {
document.getElementById(“domTest”).innerHTML = “Hello World”;
}
</script>

</body>
</html>

 

Final Words

We have learned the basics of JavaScript DOM (Document Object Model) and how an HTML source code is internally represented as a DOM by the web browser. Then, we listed out the most common JavaScript DOM properties and methods to access and manipulate HTML elements (tags).

Leave a Reply

Your email address will not be published. Required fields are marked *