Sunday, March 1, 2020

DOM JavaScript

Document Object Model(DOM)


DOM


Document Object Model is an API(Application Programming Interface) for HTML and Well-Formed XML Documents. Whenever a page is requested, the HTML and CSS are parsed to construct the DOM (Document Object Model), which is then rendered and loaded.

The DOM represents the document's data in a logical tree format. The DOM fetches the data from the web page in a tree-structured format making nodes and objects to depict various elements and their respective values. JavaScript can navigate through the document structure, access, retrieve and manipulate all the elements of an HTML document with the HTML DOM. The document can be organized and structured as a tree.



Document object model(DOM)



In an HTML document, there can be several elements having some values; These values can be manipulated with JavaScript methods.

  • We can modify all the HTML elements in the page
  • We can modify all the HTML attributes in the page
  • We can modify all the CSS styles in the page
  • We can remove, replace and add HTML elements and attributes
  • JavaScript can respond to all the events in the HTML page
  • New HTML events can be added in the HTML page

Example,

<html>
  <head>
    <script>
    function fun()
    {
      document.getElementById('message').innerHTML="Welcome to JavaScript";
    }
    </script>
  </head>
  <body>
    <div id='message'></div>
    <button onclick='fun()'>Show</button>
  </body>
</html>

getElementById() is a method and innerHTML is a property.

The "document" is an object containing all the objects of the document. All the elements on the web page can be navigated and accessed by document object.

We can access any of the element on the web page using any of the methods described below,

Methods to retrieve document items


The following methods are used to retrieve the document items.

Method

Application

document.getElementById(id) accessing an element by element id
document.getElementsByTagName(name) accessing an element by tag name
document.getElementsByClassName(name) accessing an element by class name


Methods to manipulate the elements in the document


The following methods are used to manipulate the elements in a document object.

Method

Application

document.createElement(el) Create an HTML element
document.removeChild(el) Remove an HTML element
document.appendChild(el) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(message) Write into the HTML output stream


For Example, adding a new Button to the web page,


<html>
  <head>
    <script>
    function fun()//ADD NEW ELEMENT TO THE DOCUMENT
    {
     var p= document.createElement('BUTTON');
      p.innerHTML='new button';
      document.body.appendChild(p);

    }
    </script>
  </head>
  <body>
    <button onclick='fun()'>Show</button>
  </body>
</html>

Changing the style of an element


We can change the style of an element by element.style property,

<html>
  <head>
    <script>
    function fun()
    {
     document.getElementById('demo').style.color='red';
    }
    </script>
  </head>
  <body>
    <div id='demo'>Welcome to JavaScript</div>
    <button onclick='fun()'>Show</button>
  </body>

</html>

We can change the attribute of an element by element.attribute property.


Adding an event handler to an Element


<html>
  <head>
    <script>
    function fun()
    {
     document.getElementById('demo').innerHTML='JavaScript';
    }
    </script>
  </head>
  <body>
    <div onclick='fun()'>Click me</div>
    <div id='demo'></div>
  </body>
</html>