The World Wide Web Consortium created and released the (DOM) Document Object Model, which is a web interface. This organization was established to set the standards for the World Wide Web.
The DOM is a language-independent web API. This implies that it may be implemented and used in any programming language.
The DOM objects represent the structural elements of web content that can be accessed and edited. In other terms, the DOM enables you to achieve the following as a software developer:
- Construct and Create web documents.
- Navigate web document structures.
- In web documents, you may add, change, or remove parts and information.
Why is the Document Object Model (DOM) Useful?
HTML is used to organize web pages, whereas Javascript is useful for adding functionality to web pages. When HTML files are loaded into a browser, javascript cannot directly interpret the HTML content. As a result, a relevant document is produced (DOM).
DOM is essentially a depiction of the same HTML content in a new manner using objects. Javascript readily interprets DOM, for example, javascript can’t comprehend tags (h1>H/h1>) in an HTML doc. but it can understand h1 in DOM.
Javascript can now use various functions to access each of the objects (p, h1, etc.).
Document Object Model Structure
DOM can be compared to a forest or tree. The phrase – structural model, is occasionally used to characterize a document’s tree-like structure. Each of the tree’s branches terminates in a node, so each node includes objects. Event listeners may be attached to nodes and activated when a specified event occurs.
The structural isomorphism of DOM structure models is an essential property: if two DOM implementations are used to construct a depiction of the same document, they will produce the very same structure model with exactly the same objects.
Here’s the HTML doc. for the DOM tree shown above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is the Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h1>Hi HubToLearn</h1>
</div>
<a href="link text">Document Object Model</a>
</body>
</html>Properties of Javascript Document Object
An object’s property, as we understand it, is the value assigned to it. The following notation is used to access the property:
objectName.propertyName
Where objectName is the object’s name & propertyName is the property’s name
Now, in the table below, we’ll show the attributes of the document object:
| Properties | Description |
| domain | returns the server’s domain name from which the document came. |
| cookie | produces a report including all unexpired and visible cookies linked with the document. |
| documentMode | returns the mode in which the browser processed the document. |
| lastModified | returns the last modification date of a document |
| readyState | returns the document’s loading status. |
| title | returns the HTML document’s name defined between the TITLE element’s beginning and closing tags. |
| referrer | returns the URLs of the documents that are mentioned in an HTML document. |
| URL | returns the HTML document’s entire URL. |
Example
<!doctype html>
<head>
<style>
/* CSS will be here */
</style>
<title>Properties of the Document</title>
</head>
<body>
<h3>Example</h3>
<script>
document.write(document.lastModified +"<br>")
document.write(document.domain +"<br>")
document.write(document.title +"<br>")
document.write(document.documentMode +"<br>")
document.write(document.url +"<br>")
</script>
</body>
</html>Object Methods of Javascript Documents
The JavaScript Document object also has several methods for accessing HTML elements.
| Methods | Description |
| open() | displays the output in an HTML document. |
| close() | closes HTML documents |
| write() | a function that inserts a JS code or HTML expressions into a HTML doc. |
| writeln() | After every JS code or HTML expression, it adds a new line character. |
| getElementById() | The element with the specified id value is returned. |
| getElementByName() | The elements with specified name values are returned. |
| getElementsByTagName() | All items with the supplied tagname are returned |
Read More about javascript
