Document Object Model

(DOM)
Document Object Model

• the web browser creates a DOM of the webpage when the page is
loaded.
• The backbone of an HTML document are tags.
• According to Document Object Model (DOM), every HTML-tag is an
object. Nested tags are called “children” of the enclosing one.
• JavaScript can access all the elements in a webpage making use of
Document Object Model (DOM).
• The DOM model is created as a tree of objects like this:
The DOM is often referred to as the DOM tree, and consists of a tree of
objects called nodes.
• The DOM creates a hierarcy corresponding to the structure of each web
document. This hierarchy is made up of nodes. There are several
different types of DOM nodes, the most important are 'Element', 'Text'
and 'Document’.

• An 'Element' node represents an element within a page. So if you have a

paragraph element ('<p>') then it can be accessed through the DOM as a
node.

• A 'Text' node represents all text (within elements) within a page. So if

your paragraph has a bit of text in it can be directly accessed through the
DOM.
• The 'Document' node represents the entire document. (it's the root-
node of the DOM hierarchy/tree).

• Also note that element attributes are DOM nodes themselves.

To begin, let's take a look at this HTML element.

<a href="index.html">Home</a>

Here we have an anchor element, which is a link to index.html.

•a is the tag
•href is the attribute
•index.html is the attribute value
•Home is the text.

Everything between the opening and closing tag combined make the entire HTML element.
Any alone text outside of an element is a text node, and an HTML comment is a comment
node.
• HTML DOM methods are actions you can perform (on HTML
Elements).

• HTML DOM properties are values (of HTML Elements) that you can
set or change.
The Document Object Model (DOM) is essential in web development for several reasons:

Dynamic Web Pages: It allows you to create dynamic web pages. It enables the JavaScript to
access and manipulate page content, structure, and style dynamically which gives
interactive and responsive web experiences, such as updating content without reloading
the entire page or responding to user actions instantly.

Interactivity: With the DOM, you can respond to user actions (like clicks, inputs, or scrolls)
and modify the web page accordingly.

Content Updates: When you want to update the content without refreshing the entire page,
the DOM enables targeted changes making the web applications more efficient and user-
friendly.

Cross-Browser Compatibility: Different browsers may render HTML and CSS in different
ways. The DOM provides a standardized way to interact with page elements.
With the object model, JavaScript gets all the power it needs to create
dynamic HTML:

• JavaScript can change all the HTML elements in the page

• JavaScript can change all the HTML attributes in the page
• JavaScript can change all the CSS styles in the page
• JavaScript can remove existing HTML elements and attributes
• JavaScript can add new HTML elements and attributes
• JavaScript can react to all existing HTML events in the page
• JavaScript can create new HTML events in the page
 Methods of document object

Method Description
write("string") writes the given string on the doucment.

returns the element having the given id

getElementById() value.
returns all the elements having the given
getElementsByName() name value.
returns all the elements having the given
getElementsByTagName() tag name.
returns all the elements having the given
getElementsByClassName() class name.
Accessing field value by document object
document.form1.name.value
• document is the root element that represents the html document.
• form1 is the name of the form.
• name is the attribute name of the input text.
• value is the property, that returns the value of the input text.
Example
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome: "+name);
}
</script>

<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
document.getElementById() method

<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form
document.getElementsByName() method
The getElementsByName() method is use to get the element by name. However be
aware of the getElementsByName() method always return an array as output. Since
same name can belongs to multiple elements.
<script type="text/javascript">
function getcube(){
var number=document.getElementsByName("number")[0].value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
Document.getElementsByTagName()
<head>
<script>
function cntpara() {
var allParas = document.getElementsByTagName('p');
var num = allParas.length;
alert('There are ' + num + ' paragraph in this document');
}
</script>
</head>
<body>
<p>B.Tech IV Sem </p>
<p>Last Date of submitting Project is 15 April 2024.</p>
<button onclick="cntpara();">
Click to Count</button><br />
</body>
</html>
Javascript - innerHTML

• The innerHTML property can be used to write the dynamic html on

the html document.
• It is used mostly in the web pages to generate the dynamic html such
as registration form, comment form, links etc.
<html>
<head>
<script>
function fun1() {
var data = document.myForm.txt1.value;
document.getElementById('mylocation').innerHTML=data;
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="txt1">
<input type="button" value="comment" onclick=“fun1()">
<p id="mylocation"> </p>
</form>
</body>
</html>
 Getting Active Element on the Webpage
<html>
<head>
<script>
function activectrl() {
var x = document.activeElement.tagName;
document.getElementById(“result").innerHTML = x;
}
</script>
</head>
<body onclick="activectrl()">

<input type="text" name="txtuname">

<button >Submit</button>
<p id=“result"></p>
</body>

</html>
 Changing CSS Properties with DOM
function showtext()
<html>
{
<head>
var x =document.getElementById("p1");
<script>
x.style.visibility='visible';
function changepos()
{
}
var x =document.getElementById("p1");
</script>
x.style.color='red';
</head>
<body >
}
<p id="p1"> Hi All !! </p>
<input type="button" onclick="changepos()">
function showhide()
<input type="button" value="Hide" onclick="showhide()">
{
<input type="button" value="show" onclick="showtext()">
var x =document.getElementById("p1");
x.style.visibility='hidden';
</body>
</html>
}
 DOM Events

<html> <form name="frm1">

<head> <input type=text name="txt1" onfocus="txtcol(this)"
<script> onblur="orig(this)">
function txtcol(x) {
x.style.background = "yellow"; <input type=text name="txt1" onfocus="txtcol(this)"
} onblur="orig(this)">

function orig(x) { <input type=text name="txt1" onfocus="txtcol(this)"

x.style.background = "white"; onblur="orig(this)">
}
</script> </form>
</head> </body>
<body> </html>
 DOM Events
Sno Event Description
1 Onblur When user leaves an input field
2 Onchange When user change the content of input field.
3 Onfocus When the input field gets a focus
4 Onselect When input text is selected.
5 Onkeydown When a user pressing down the key
6 Onkeyup When user releases a key
7 Onmousedown When mouse button is pressed
8 Onmouseover When the mouse passes over the element
9 Onmouseout When mouse moves out of the element
10 onload When the page is loaded
 JavaScript Arrays
Arrays are a type of object that are ordered by the index of each item it contains. It
allows us to store and organize multiple values within a single variable.

The index starts at zero and extends to however many items have been added, which is a
property of the array known as the "length" of the array.

There are 3 ways to construct array in JavaScript

• By array literal
• By creating instance of Array directly (using new keyword)
• By using an Array constructor (using new keyword)
1. By Array Literal

var arrayname=[value1,value2.....valueN];

<script>
var a = ["emp1", "emp2", "emp3"];

for (i=0; i<a.length; i++)

{
document.write(a[i] + "<br/>");
}
</script>
2. By creating instance of Array directly (using new keyword)

var arrayname = new Array();

New is used to create the instance of an array.

<script>
var i;
var a = new Array();
a[0] = "emp1";
a[1] = "emp2";

for (i=0; i<a.length; i++)

{
document.write(a[i] + "<br>");
}
</script>
3. By using an Array constructor

In this method we need to create instance of array by passing arguments in constructor

so that we don't have to provide value explicitly.

<script>
var a = new Array("emp1", "emp2", "emp3");
for (i=0; I < a.length; i++)
{
document.write(a[i] + "<br>");
}
</script>
Types of values in array elements
In most high-level programming languages arrays are typed. This means that when an array is
created the programmer must specify the type of the value to be stored in the array.
With such languages, all elements of an array store values of a single type.
However, JavaScript is not a strongly typed programming language, and a feature of JavaScript
arrays is that a single array can store values of different types.
<html>
<body>
<script>
var a = [12,"Hello", 34.2];
for(i=0 ; i<a.length; i++)
{
document.write(a[i]);
}
</script>
</body>
</html>
 Array Methods
concat()
The concat() method is represented by the following syntax:
array.concat (arr1,arr2,....,arrn)

<script>
var a = ["red", "blue"];
var b = ["circle", "square", "triangle"];
var result = a.concat(b);
document.write(result);
</script>
entries()

The entries() method creates a new iterator object of an array, holding the key/value
pairs for every value in the array. A key represents the index number carrying an item as
its value. It does not affect the original array.

<script>
var a = ['BCA','MCA','B.Tech','M.Tech','Ph.D'];
var newarr = a.entries();

for(var x of newarr)
{
document.write(x +"</br>");
}
</script>
array fill()

array fill() method fills the elements of the given array with the specified static values.
This method modifies the original array.

<script> <script>
var a = ["red", "blue", "yellow"]; var a = ["red", "blue", "yellow"];
var result = a.fill(“Orange"); var result = a.fill(“Orange“, 1);
document.write(a); document.write(a);
</script> </script>
find()
The JavaScript array find() method returns the first element of the given array that
satisfies the provided function condition.

<script>
var a = [5,22,19,25,34];
var result=a.find (x=>x>20);
document.write(result)
</script>
 indexOf()
The JavaScript array indexOf() method is used to search the position of a particular
element in a given array.

<script>
var a = ["red", "blue", "yellow", "green"];
var result= a.indexOf("blue");
document.write(result);
</script>
<html> Passing an Array to a function
<head>
<script>
function fn1(num)
{
var x = num.length;
document.write(num);
}
</script>
</head>

<body>
<script>
var Mynum = [1, 2, 2, 4, 5, 4, 7, 8, 7, 3, 6];
var result = fn1(Mynum);
</script>
</body>
</html>