JavaScript – Document Object Model


What is a Document Object Model (DOM) in Javascript ?

DOM is the object of the html document.

When a html file is loaded in the browser, it becomes the document object.

Document object have its own properties and methods.

Why do we use DOM ?

Dynamic content can be added by using DOM properties and methods.

DOM comprises of two important parts.

1. Property

Property is a value that you can get or set for the specified HTML element.

2. Method

Method is an action you can do for the specified HTML element

How to access the DOM object ?

DOM object is also a window object, so it can be executed with or without ‘window’ prefix.

Javascript complete course !!!

Click to Learn More about – Javascript online learning

Syntax :

window.document

or


document

What are the methods of DOM ?

There are few methods of DOM are as follows:

1. write(“string”):

write() method writes the given string on the document.

2. writeln(“string”)

writeln() method writes the given string on the document with newline character at the end.

3. getElementById():

getElementById() method returns the element having the given id value.

4. getElementsByName():

getElementsByName() method returns all the elements having the given name value.

5. getElementsByTagName():

getElementsByTagName() method returns all the elements having the given tag name.

6. getElementsByClassName():

getElementsByClassName() method returns all the elements having the given class name.

1. write(“String”) / writeln(“String”)

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Our title</title>
		<script type="text/javascript">
			document.write("This is paragraph 1<br/>");  
			document.write("This is paragraph 2<br/>");  
			document.write("This is paragraph 3<br/>");  
			document.write("This is paragraph 4<br/>");  
			document.write("This is paragraph 5<br/>");  
		</script>
	</head>
	<body></body>
</html>

Output :

Since we have added <br/> tag at the end of the line, the output is printed in the new-line.

This is paragraph 1

This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

Otherwise the output will be

This is paragraph 1 This is paragraph 2 This is paragraph 3 This is paragraph 4 This is paragraph 5

2. writeln(“String”)

Example :

<!DOCTYPE html>
<html>
	<head>
		<title>Our title</title>
		<script type="text/javascript">
			document.writeln("This is paragraph 1");  
			document.writeln("This is paragraph 2");  
			document.writeln("This is paragraph 3");  
			document.writeln("This is paragraph 4");  
			document.writeln("This is paragraph 5");  
		</script>
	</head>
	<body></body>
</html>

Output :

This is paragraph 1


This is paragraph 2

This is paragraph 3

This is paragraph 4

This is paragraph 5

Other methods will be discussed in the next tutorials.

What are the limitations of DOM ?

1. DOM will not define any binary source code in its interfaces, since binary description is not applicable.

2. DOM always HTML/XML documents as objects, and will not describe any objects inside HTML/XML document.

3. DOM is only object representation and not represented by any other terms.