Scribd
Upload
19 views9 pages

Dompgms

The document contains examples of using DOM methods like getElementById, createElement, appendChild, removeChild, and event handlers like onclick to manipulate the document structure and display alerts. It demonstrates how to add, remove and modify elements, handle events, and display values from inputs on the page.

Uploaded by

Tejashwini Gadag
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views9 pages

Dompgms

The document contains examples of using DOM methods like getElementById, createElement, appendChild, removeChild, and event handlers like onclick to manipulate the document structure and display alerts. It demonstrates how to add, remove and modify elements, handle events, and display values from inputs on the page.

Uploaded by

Tejashwini Gadag
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

1.

Onclick using appro DOM

<!doctype html>
<html>
<title> Demo of onclick Tag Attributes</title>
<script type ="text/javascript">
function my_fun()
{
alert("Hello Welcome all of you");
}
</script>
</head>
<body >
<center>
<form>
<input type="button" value="click" onclick="my_fun()">
</form>
</center>
</body>
</html>

Output
2. Display sum of two number. Make use of appro DOM methods

<!Doctype html>
<html>
<head>
<script type="text/javascript">
function getsum()
{
var number1=document.getElementById("number1").value;
var number2=document.getElementById("number2").value;
var num1=Number(number1);
var num2=Number(number2);
alert(num1+num2);
}
</script>
</head>
<body>
<form>
Enter Num1: <input type="text" id="number1"/><br/> <br/>
Enter Num2: <input type="text" id="number2"/><br/>
<input type ="button" value="SUM" onclick="getsum()"/>
</form>
</body>
</html>

Output

3. Maniplation of DOM.. Create Element


<!DOCTYPE html>
<html>
<head>
<script>
function Function()
{
var btn= document.createElement("BUTTON");
document.body.appendChild(btn);
}
</script>
</head>
<body>
<button onclick="Function()">Create Button </button>
</body>
</html>

OutPut
4.Create Element and AppendObject using appro DOM

<!DOCTYPE html>
<html>
<head>
<script>
function Function()
{
var btn= document.createElement("BUTTON");
var txt= document.createTextNode("click");
btn.appendChild(txt);
document.body.appendChild(btn);
}
</script>
</head>
<body>
<button onclick="Function()">Create Button </button>
</body>
</html>

Output
5. Remove Element using appro DOM

<!DOCTYPE html>
<html>
<head>
<script>
function Function()
{
var list= document.getElementById("colors");
list.removeChild(list.childNodes[1]); // removes the first child from the list
}
</script>
</head>
<body>
<ul id="colors"><li>Red</li><li>Blue</li><li>green</li><li>yellow</li><li> black</li> </ul>
<button onclick="Function()">Remove Element </button>
</body>
</html>
6. Appending the child node using appro DOM

<!DOCTYPE html>
<html>
<head>
<script>
function Function()
{
var node=document.createElement("li");
var txt=document.createTextNode("White");
node.appendChild(txt);
document.getElementById("colors").appendChild(node);

}
</script>
</head>
<body>
<ul id="colors">
<li>Red</li>
<li>Blue</li>
<li>green</li>
<li>yellow</li>
<li> black</li>
</ul>
<button onclick="Function()">Append Element </button>
</body>
</html>

Output
7. Event

Event handling using onload event

<!doctype html>
<html>
<head>
<title> Demo of onload Tag Attributes</title>
<script type ="text/javascript">
function my_fun()
{
alert("welcome");
}
</script>
</head>
<body onload="my_fun()">
</body>
</html>
8. For handling the event button element tag attibuite onClick

<!doctype html>
<html>
<title> Demo of onclick Tag Attributes</title>
<script type ="text/javascript">
function my_fun()
{
alert("Hello Welcome all of you");
}
</script>
</head>
<body >
<center>
<form>
<input type="button" value="click" onclick="my_fun()">
</form>
</center>
</body>
</html>

Output
8.create a javascript which has event handlers for he buttons red,blue,green,yellow,orange and
displaying msg stating fav colour,

<!doctype html>
<html>
<title> Demo of onload Tag Attributes</title>
<script type ="text/javascript">
function fun(form_obj)
{
alert("your favourite color is " + form_obj.value);
}
</script>
</head>
<body>
<form name="form1" method=post>
<div align="left>"> <br/>
<input type="radio" name="group1" value="red" onclick=fun(this)>red <br/>
<input type="radio" name="group1" value="blue" onclick=fun(this)>blue <br/>
<input type="radio" name="group1" value="green" onclick=fun(this)>green <br/>
<input type="radio" name="group1" value="yellow" onclick=fun(this)>yellow<br/>
<input type="radio" name="group1" value="orange" onclick=fun(this)>orange<br/>
<center>
</body>
</html>

Output

You might also like