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.
<!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.