Javascript For Beginners

JavaScript DOM

JavaScript DOM

DOM stands for Document Object Model. It is defined as the standard object model and a programming interface for both HTML and XML.

By Using DOM, JavaScript can modify, create or even remove the existing elements, attributes, style of a document. It mainly changes the structure of the document.

JavaScript mainly manipulates the HTML document and perform dynamic changes.

 

Consider a basic HTML Code

<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

 

The DOM represents a HTML code as a tree structure as follows:

 

 

Here, the document root is represented as <html> node. Further HTML elements are interrelated nodes in the tree. These nodes mainly define the relationship between each other. As, <html> defined as the root node, further <head> and <body> nodes defined as the child nodes of <html>.Further <body> node is defined as parent node for <h1> and <p> node.

 

 

JavaScript DOM Document

In JavaScript, a document object is a built-in object which further has its properties and methods which are used in order to access or modify web pages or websites.

When an HTML page is loaded into the browser, it instantly makes its document object which further has its methods and properties. But with the help of DOM, we can easily make changes in the structure on our webpage.

Here, Method is used in order to access the elements and attributes of a document object. Property is used in order to access the content of an element.

 

For example,

document.getElementById(“Id”).innerHTML= “Some Text”;

 

Here, we can access it by using the document object, where getElementById is defined as a method and in order to change the content we use innerHTML property.