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