Document Object Model

Date posted: 23/05/2019

DOM-Document Object Model

Moreover, when html document is loaded in the browser, it becomes a document object.

Likewise,  How you are structure the web element is call the Document Object Model

Subsequently,  In the DOM, all HTML elements are defined as objects.

Image result for document object model
DOM

<!DOCTYPE html>
<html>
<head>
  <title>DOM</title>
</head>

  function myFunction()
  {
    console.log(document)
  }

<body>
  <h1>Document Object Model</h1>
  <button onclick="myFunction()">Click me to print the DOM</button>
</body>
</html>

For example, 

console.log(document)=> print the whole document in browser.

Way to find HTML Elements:

Meanwhile, here is the way to find HTML elements.

document.getElementById(id) =>get the element by ID

document.getElementsByTagName(name) =>get the element by TAGNAME

document.getElementsByClassName(name) =>get the element by CLASSNAME

For instance, the sample code is

GET ELEMENT BY Id 

<!DOCTYPE html>
<html>
<body>

<h2>  GET ELEMENT BY Id </h2>

<button id="p1" onclick="myFunction()">click me</button>


function myFunction()
{
	document.getElementById("p1").innerHTML = "New text!";
}



<p>The paragraph above was changed by a script.</p>

</body>
</html>

GET ELEMENT BY TAG NAME

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>
<button onclick="myFunction()">click me</button>

<p id="demo"></p>


function myFunction()
{
	var x = document.getElementsByTagName("button");
document.getElementById("demo").innerHTML = 
'onclick event by tag name ' + x.innerHTML;
}


</body>
</html>

Thanks for using pheonix solutions.

You find this tutorial helpful? Share with your friends to keep it alive.

Post Views: 155

Leave a Reply