Document
Object Model(DOM)
html document is loaded in the browser, it becomes a document
object. It is the root
element that represents the html document.
window.document
Methods of document object
|
Method |
Description |
|
write("string") |
writes the given string on the document. |
|
writeln("string") |
writes the given string on the document with newline character at the
end. |
|
getElementById() |
returns the element having the given id value. |
|
getElementsByName() |
returns all the elements having the given name value. |
|
getElementsByTagName() |
returns all the elements having the given tag name. |
|
getElementsByClassName() |
returns all the elements having the given class name. |
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">Object</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script type="text/javascript">
function printvalue(){
var name=document.form1.name.value;
alert("Welcome:
"+name);
}
</script>
</head>
<body>
<form name="form1">
Enter Name:<input type="text" name="name"/>
<input type="button" onclick="printvalue()" value="print name"/>
</form>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
}
</style>
<script>
function test()
{
if(document.getElementById("pwdcb").checked)
{
document.getElementById("pwd").type="text";
}
else
{
document.getElementById("pwd").type="password";
}
}
</script>
</head>
<body>
<h2>User Login</h2>
<div>
Username
</div>
<div>
<input type="text">
</div>
<div>
Password
</div>
<div>
<input type="password" id="pwd">
<input type="checkbox" id="pwdcb" onclick="test()">Show Password
</div>
<h2 id="price"></h2>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function test()
{
var myage=document.getElementById("age");
alert(myage.value);
}
</script>
<style>
input, button,label
{
font-size: 2em;
padding:5px;
}
</style>
</head>
<body>
<h1>JAVAScript</h1>
<label for="age">Age</label>
<input type="text" name="age" id="age">
<button onclick="test()">Call Me</button>
</body>
</html>
Output
Cube Program using DOM
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script type="text/javascript">
function getcube(){
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
</head>
<body>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
</body>
</html>
Output
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script type="text/javascript">
function totalelements()
{
var allgenders=document.getElementsByName("gender");
alert("Total
Genders:"+allgenders.length);
}
</script>
</head>
<body>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="totalelements()" value="Total Genders" style="background-color:orange
;color:rgb(255, 0, 149)">
</form>
</body>
</html>
Output
Javascript-
document.getElementsByTagName()
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
<script type="text/javascript">
function countparagraph(){
var totalpara=document.getElementsByTagName("p");
alert("total
p tags are: "+totalpara.length);
}
</script>
</head>
<body>
<p>This is a pragraph</p>
<p>Welcome to the world</p>
<p>Hi hello</p>
<button onclick="countparagraph()" style="background-color:
green;">count paragraph</button>
</body>
</html>
Output
Javascript -
innerHTML
The innerHTML property can be used to write the dynamic
html on the html document.
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script type="text/javascript" >
function showcommentform() {
var data="Name:<br><input type='text'
name='name'><br>Comment:<br><textarea rows='5'
cols='50'></textarea><br><input type='submit'
value='comment'>";
document.getElementById('mylocation').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="showcommentform()">
<div id="mylocation"></div>
</form>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mybox
{
width:25vw;
height: 10vh;
line-height: 10vh;
text-align: center;
font-size: 2em;
background-color: red;
}
</style>
<script>
var total=0;
function shop1()
{
var s1=document.getElementById("snack1").checked;
if(s1)
total+=10;
else
total-=10;
document.getElementById("mybox").innerHTML=total;
}
function shop2()
{
var s2=document.getElementById("snack2").checked;
if(s2)
total+=20;
else
total-=20;
document.getElementById("mybox").innerHTML=total;
}
function shop3()
{
var s3=document.getElementById("snack3").checked;
if(s3)
total+=20;
else
total-=20;
document.getElementById("mybox").innerHTML=total;
}
</script>
</head>
<body>
<h2>Products</h2>
<div>
<input type="checkbox" id="snack1" onclick="shop1()" >Samosa Rs.10
<input type="checkbox" id="snack2" onclick="shop2()">Biscuits Rs.20
<input type="checkbox" id="snack3" onclick="shop3()">Lemon Juice Rs.20
</div>
<div id="mybox">
</div>
</body>
</html>
Output
Javascript -
innerText
The innerText property can be
used to write the dynamic text on the html document. Here, text will not be
interpreted as html text but a normal text.
It is used mostly in the web pages to
generate the dynamic content such as writing the validation message, password
strength etc.
Password Protection Checking
<!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>Document</title>
<h2 style="background-color:
rgb(9, 238, 9);color:rgb(255, 0, 0);font-weight: bolder;font-family: Georgia,
'Times New Roman', Times, serif;">DOM</h2>
<h5 style="color:
rgb(231, 15, 166);">Output</h5>
</head>
<body>
<script type="text/javascript" >
function validate() {
var msg;
if(document.myForm.userPass.value.length>7){
msg="Excellent";
}
else if(document.myForm.userPass.value.length>5){
msg="Good";
}
else{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}
</script>
<form name="myForm">
<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>
</form>
</body>
</html>
Output
Exercise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function test()
{
var myage=parseInt(document.getElementById("age").value);
myage=myage+5;
alert(myage);
}
</script>
<style>
input, button,label
{
font-size: 2em;
padding:5px;
}
</style>
</head>
<body>
<h1>JAVAScript</h1>
<label for="age">Age</label>
<input type="text" name="age" id="age">
<button onclick="test()">Call Me</button>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function test()
{
var user=document.getElementById("username").value;
//alert(user.trim().length);
document.getElementById("msg").innerHTML=user;
}
</script>
<style>
input, button,label
{
font-size: 2em;
padding:5px;
}
.error
{
color:red;
font-weight: bold;
}
.success
{
color:green;
font-weight: bold;
}
.default
{
color:blue;
}
span
{
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>JAVAScript</h1>
<label for="username">username</label>
<input type="text" name="username" id="username"><span class="default" id="errtxt">*</span>
<button onclick="test()">Call Me</button>
<div>
<h2 id="msg" class="success"></h2>
</div>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function test()
{
var user=document.getElementById("username").value;
//alert(user.trim().length);
if(document.getElementById("mgender").checked)
document.getElementById("msg").innerHTML="Mr. "+user;
else
document.getElementById("msg").innerHTML="Mrs. "+user;
}
</script>
<style>
input, button,label
{
font-size: 2em;
padding:5px;
}
.error
{
color:red;
font-weight: bold;
}
.success
{
color:green;
font-weight: bold;
}
.default
{
color:blue;
}
span
{
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>JAVAScript</h1>
<label for="username">username</label>
<input type="text" name="username" id="username"><span class="default" id="errtxt">*</span>
<input type="radio" name="gender" id="mgender">Male
<input type="radio" name="gender" id="fgender">Female
<button onclick="test()">Call Me</button>
<div>
<h2 id="msg" class="success"></h2>
</div>
</body>
</html>
Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var myname;
function test()
{
myname="kiran";
alert(myname);
}
function check()
{
alert(myname);
}
</script>
<style>
input, button
{
font-size: 2em;
padding:5px;
}
</style>
</head>
<body>
<h1>JAVAScript</h1>
<input type="text">
<button onclick="test()">Call Me</button>
<button onclick="check()">Checking</button>
</body>
</html>
Output
Append data using Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var myarray=[];
let test=function()
{
var txt='';
for(x in myarray)
{
txt+=': '+myarray[x];
}
document.getElementById("outmsg").innerHTML=txt;
};
function additem()
{
let element=document.getElementById("data").value;
let pos=myarray.indexOf(element);
if(pos==-1)
//-1 indicates element
does not exists in array
myarray.push(element);
}
</script>
</head>
<body>
<button onclick="test()">Click Me</button>
<input type="text" id="data">
<button onclick="additem()">ADD</button>
<h2 id="outmsg">
</h2>
</body>
</html>
Output
0 comments:
Post a Comment