2.java script dom

Arulkumar V
Asst.Professor- CSE
SECE
JavaScript DOM

DOM Document Object Model
 Every web page resides inside a browser window which
can be considered as an object.
 It represents the HTML document that is
displayed in that window.
 It has various properties that refer to other objects which
allow access to and modification of document content.
 This way is accessed and modified is called
the Document Object Model, or DOM.
 Hierarchical structure to the organization of objects in a
Web document. =>

objects in a Web document.
 Window object
 Document object
 Form object
 Form control elements

Property & Description
 Body - document.body
 defaultView - document.defaultView
 documentElement -
document.documentElement8/31/2008
 getElementById( id) - document.getElementById( id)
 getElementsByName( name) -
document.getElementsByName( name)
 getElementsByTagName( tagname)-
document.getElementsByTagName( tagname)


DOMs in existence
<head>
<title> Document Title </title>
<script type="text/javascript">

</script> </head>

<body>
<h1 id="heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id="form1" name="FirstForm">
<input type="button" value="Click Me"
onclick="myFunc();" />
<input type="button" value="Cancel">
</form>
<form d="form2" name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>
</body>

JavaScript - The Date Object
 Date object is a datatype built into the JavaScript
 Created with the new Date( )
 new Date( )
 new Date(milliseconds)
 new Date(datestring)
 new Date(year,month,date[,
hour,minute,second,millisecond ])

JavaScript - The Date Object
<html> <head>
<title>JavaScript Date Method</title> </head>
<body>
<script type="text/javascript">
var dt = Date();
document.write("Date and Time : " + dt );
</script>
</body>
</html>
Output:
Date and Time : Tue Aug 08 2017 17:15:06 GMT+0530
(India Standard Time)

JavaScript – Domain example
<html>
<body>
<p>Click the button to display the domain name of the server that
loaded this document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
document.domain;
}
</script></body></html>
Click the try button to display the domain name of the server that
loaded this document.
o/p: www.google.com

JavaScript - Cookie
<html>
<body>
<p id="demo">Click the button to display the cookies associated with
this document.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
"Cookies associated with this document: " + document.cookie;
}
</script></body></html>
Cookies associated with this document:
__gads=ID=66b36630d70e3ac5:T=1502354049:S=ALNI_Mawf4e62DiZ3EEzs_-NPMoLpCUO2Q;
_gat=1; _ga=GA1.2.148245611.1502354051; _gid=GA1.2.144215362.1502354051

JavaScript – Count Input tag
<html><head>
<script>
function getElements() {
var x = document.getElementsByTagName("input");
document.getElementById("demo").innerHTML = x.length;
}
</script></head><body>
<input type="text" size="20"><br>
<p> <input type="button" onclick="getElements()" value="How many
input elements?“> </p>
<p id="demo">Prints here:</p>
</body> </html>
Click How many input elements? Button
o/p: 4

JavaScript – CSS Manipulation
<html>
<body>
<p id="p1">
This is a text.
This is a text.
This is a text.
</p>
<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">
</body> </html>

2.java script dom

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2.java script dom

Similar to 2.java script dom (20)

More from PhD Research Scholar

More from PhD Research Scholar (20)

Recently uploaded

Recently uploaded (20)

2.java script dom