Updated April 14, 2023
Introduction to JavaScript Document Object Model
Document object represents the HTML document in JavaScript that gets displayed in the window which resides inside the web page of the browser of the window that overall is considered as a document object. The document object model is a kind of prototype that displays and simplifies the above-described scenario for the Document Object model. This is a type of prototype which includes the document object, allows to access and modify the data residing inside the web page of the current web browser of the HTML JavaScript Document Object model.
Syntax:
<script type = "text/javascript">
<!--
window.print("some text");
//-->
</script>There might be a chance that the syntax for this may create a runtime error or compile-time error due to the exceptions that are needed to be caught. The current window with the web browser should be compatible with the current script snippet.
Properties of JavaScript Document Object Model
JavaScript has many document object and document object model with properties and methods associated.
Data Object Model is a kind of programming interface that includes documents and objects. Documents in the programming interface are written using HTML (Hypertext Markup Language) or XML (Extensible Markup language). Also, it defines some structure or function of documents and its objects within the web browser which will have the ability to access and modify the data within the web page.
The structure and the hierarchy maintained is always called as a logical structure because chances of experiencing the runtime or compile-time error are less. Moreover, the Data object model does not specify any relationship between objects. The only beauty of using DOM is that it gives programmers a vision to create and enhance the objects within the window and the structure in a better way by creating a structured document object and then access or manipulate the data accordingly. the structured hierarchy helps a lot in arranging the elements, attributes, and methods with the document object easily.
Objects play a very crucial and important role in defining a document in the sense without object a document is incomplete. Models include the structure and behavior of the document using an object which is composed of tag elements with attributes in the HTML or XML oriented web page.
Following are related to the properties of the document object which is related to this which can be accessed and modified accordingly by the object of the document using logical structure format:
| Objects | Properties |
| Window Object | The window object is used to get provisioning at the top of the hierarchy or logical structure. |
| Document Object | A document object gets provoked or created when the HTML or the MXL web page within the web browser gets loaded initially. |
| Form Object | It is represented by the form tags which are present in a form or a web page of a form. Examples of form tags include a checkbox, radio, select, etc. |
| Link Object | Link objects are the objects or the attributed which get represented using link tags. |
| Anchor Object | Anchor objects are the objects which get represented using a href tag for reference of links. |
| Form Control Elements | Form control elements are part of the form which are used to provide and fill the forms using the elements such as text field, buttons, radio buttons, and checkboxes. |
Top 5 Methods of JavaScript Document Object Model
Following are some methods of javascript document object models:
1. write(“string”)
This JavaScript Document Object Model method is used to write the given and passed a string of the function on the document.
Example:
This program illustrates the string “Hello JavaScript” being passed as an DOM to the function as shown in the output.
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to Educba Portal </h2>
<p id="demo5"></p>
<script>
document.getElementById("demo5").innerHTML = "Hello JavaScript";
</script>
</body>
</html>Output:
2. getElementById()
This JavaScript Document Object model method is used to return the element having a given id value.
Example:
This program illustrates the DOM model method of getElementbyId() for displaying the following output.
<!DOCTYPE html>
<html>
<body>
<h2>Finding DOM Elements by Id</h2>
<p id="intro">Welcome Educba!</p>
<p> Example demonstrates the <b>getElementsById</b>method.</p>
<p id="demo"></p>
<script>
var Element1 = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"Text from the intro paragraph " + Element1.innerHTML;
</script>
</body>
</html>Output:
3. getElementsByName()
This JavaScript Document Object model method is used to return all the elements having the given name values.
Example:
This program is used to illustrate the getElementsByName method of DOM object which will be used and provide the following output.
<!DOCTYPE html>
<html>
<body>
<h2> HTML Elements using method as Name</h2>
<p>Welcome Educba!</p>
<p> Example illustrates the <b>getElementsByName</b>method.</p>
<p id="demo"></p>
<script>
var p = document.getElementsByName("p");
document.getElementById("demo").innerHTML =
'Text in first paragraph (index 0) is: ' + p[0].innerHTML;
</script>
</body>
</html>Output:
4. getElementsByTagName()
This JavaScript Document Object model method is used to return all the elements possessing the attribute name.
Example:
This program is used to illustrate the getElementsByTagName method of DOM object which will be used and provide the following output.
<!DOCTYPE html>
<html>
<body>
<h2>Elements using Tag Name as Method</h2>
<p>Hello Educba!</p>
<p>Example illustrates the <b>getElementsByTagName</b>method.</p>
<p id="demo1"></p>
<script>
var z = document.getElementsByTagName("z");
document.getElementById("demo1").innerHTML =
'Text of first paragraph (index 0) is: ' + z[0].innerHTML;
</script>
</body>
</html>Output:
5. getElementsByClassName()
This JavaScript Document Object model method is used to return all the elements with a given class name.
Example:
This program is used to illustrate the getElementsByClassName method of DOM object which will be used and provide the following output.
<!DOCTYPE html>
<html>
<body>
<h2> Search DOM HTML Elements using Class Name</h2>
<p>Welcome to Educba!</p>
<p class="intro">Creating DOM is good for enhancement</p>
<p class="intro">Present example illustrates the <b>getElementsByClassName</b>method.</p>
<p id="demo4"></p>
<script>
var p = document.getElementsByClassName("intro");
document.getElementById("demo4").innerHTML =
'First paragraph uses (index 0) with class="intro": ' + p[0].innerHTML;
</script>
</body>
</html>Output:
Conclusion
Document Object Model is used to provide flexibility to the programmers and is a good model to provide hierarchy and logical structures for the attributes and the elements present in the web page of the web browser. It is a good hierarchical model that provides both the user and developers a good programmable interface for interaction.
Recommended Articles
This is a guide to the JavaScript Document Object Model. Here we discuss the important properties of the JavaScript Document Object Model with its top 5 methods. You may also have a look at the following articles to learn more –
