DOM Majorly supports 10 types of objects
1. Document
- It is a parent of all the objects it can create dynamic content are elements within the webpage
- Total body content is called document of the webpage and also known as document node
- HTML elements are called element node
- Text in between the element is called text node
- Parent element are called parent node every element can have only one parent
- Child element are called child node
- Every parent element can have one or more child
2. Window
<html>
<head>
<script
language="javascript">
function
test1(){
win1
=
window.open("dom1.html","","height=300px,width=300px,left=0px,top=0px,scrollbars=yes");
win2
=
window.open("1.jpg","","height=300px,width=300px,left=300px,top=300px,menubar=yes,toolbar=yes,scrollbars=yes,titlebar=yes");
}
function
test2(){
win1.close();
win2.close();
}
</script>
</head>
<body>
<input
type='button' value='Create Popup' onclick="test1()"/>
<input
type='button' value='Close Popup' onclick="test2()"/>
<input
type='button' value='print' onclick="javascript:window.print()"/>
</body>
</html>
3. Navigator
<html>
<head>
<script
language="javascript">
document.write(navigator.appName+"<br>");
</script>
</head>
<body>
</body>
</html>
4. Image
<html>
<head>
<script
language="javascript">
function
test1(){
document.getElementById('x').height='300';
document.getElementById('x').width='300';
document.getElementById('x').style.border='3px
solid red';
document.getElementById('x').align='right';
document.getElementById('x').title='Image
Object';
document.getElementById('x').alt='Preview
Not Found';
document.getElementById('x').src='2.jpg';
}
</script>
</head>
<body>
<input
type='button' value='Image' onclick="test1()"/><br>
<img
src='1.jpg' id='x' height='100px' width='100px'/>
</body>
</html>
5. Screen
<html>
<head>
<script
language="javascript">
document.write(screen.height+"<br>");
document.write(screen.width+"<br>");
document.write(screen.availHeight+"<br>");
document.write(screen.availWidth+"<br>");
</script>
</head>
<body>
</body>
</html>
6. Location
<html>
<head>
<script
language="javascript">
document.write(location.host+"<br>");
function
test1(){
window.location.reload();
}
function
test2(){
win1
= window.open("location2.html","","height=300px,width=300px,left=0px,top=0px,scrollbars=yes");
}
</script>
</head>
<body>
<input
type='button' value='Refresh' onclick="test1()"/>
</body>
</html>
7. Link
<html>
<head>
<script
language="javascript">
function
test1(){
document.getElementById('x').innerHTML='Facebook'; document.getElementById('x').href='http://www.facebook.com'; document.getElementById('x').target="_blank";
document.getElementById('x').title='go
to Facebook';
}
</script>
</head>
<body>
<input
type='button' value='Facebook' onclick="test1()"/><br>
<a
href='http://www.google.com' id='x'> Google </a>
</body>
</html>
8. History
<html>
<head>
<script
language="javascript">
document.write(history.length+"<br>");
</script>
</head>
<body>
<a
href="history2.html"> History2 </a>
<input
type='button' value='Forward'
onclick="javascript:history.forward()"/>
</body>
</html>
9. Form
<html>
<head>
<script
language="javascript">
function
test1(){
var
elt=document.getElementById("testform");
var
form=document.testform.elements;
elt.method='post';
elt.action='insert.html';
elt.enctype='multipart/form-data';
for(i=0;i<form.length;i++){
if(form[i].type=='text'){
form[i].value='enter
your input';
}
}
}
</script>
</head>
<body>
<form
id='testform' name='testform'>
Name
: <input type='text' name='name'/><br>
email
: <input type='text' name='email'/><br>
mobile
: <input type='text' name='mobile'/><br>
gender
: <input type='radio' name='gender'/><br>
course
: <input type='checkbox' name='course'/><br>
Address:
<textarea></textarea><br>
<input
type='submit' value='Submit'/>
<input
type='button' value='Form' onclick='test1()'/>
</form>
</body>
</html>
10. Select
<html>
<head>
<script
language="javascript">
function
test1(){
var
elt=document.getElementById("x");
elt.size='10';
//elt.value='22';
alert(elt.selectedIndex);
elt.multiple=true;
}
</script>
</head>
<body>
<select
id='x' style='width:200px;'>
<option
value=''> None </option>
<option
value='11'> India </option> <option
value='22'> Us </option>
<option
value='33'> Uk </option> <option
value='44'> China </option> <option
value='55'> Nepal </option> <option
value='66'> Bhutan </option>
</select>
<input
type='button' value='Select' onclick='test1()'/>
</body>
</html>
No comments:
Post a Comment