Document: Document is an object providing number of property’s and methods. We can access the document method by using object name.
The Window and Document initially loads into ram. But date object first we need to load into ram, before use the functionality of date object.
The below Script is to display the Username and Password text and as well as submit button boxes on the web page.
<script>
function show()
{
var t=document.getElementByid("txt1").value alert(t)
var t1=document.getElementByid("txt2").id value alert(t1)
}
</script>
<input type="text" id="txt1">
<br>
<input type="text" id="txt2">
<br>
<input type="button" value="click" onclick="show">
function show()
{
var t=document.getElementByid("txt1").value alert(t)
var t1=document.getElementByid("txt2").id value alert(t1)
}
</script>
<input type="text" id="txt1">
<br>
<input type="text" id="txt2">
<br>
<input type="button" value="click" onclick="show">
Sample Script :
<script>
function show()
{
var x=document.getElementByid('sp1').InnerHTML
alert(x)
}
</script>
<span id="sp1" style="color:red"; font-size='50'>
HEllo Dan
</span>
function show()
{
var x=document.getElementByid('sp1').InnerHTML
alert(x)
}
</script>
<span id="sp1" style="color:red"; font-size='50'>
HEllo Dan
</span>
Document.write: By using this function we can write some content on the webpage.
Sample Script :
<script>
document.write("PHP Tutorial")
</script>
document.write("PHP Tutorial")
</script>
Document.Title: By using this property we can change the title text bar of the page.
Sample Script :
<html>
<title>danphp.com (JavaScript: Write Title Anywhere)</title>
The title of this document is
<script language="JavaScript">
document.write (document.title)
</script>
</html>
<title>danphp.com (JavaScript: Write Title Anywhere)</title>
The title of this document is
<script language="JavaScript">
document.write (document.title)
</script>
</html>
Document.URL : This function returns the URL address of the current document.
Sample Script :
<html>
<body>
The full URL of this page is:
<script type="text/javascript">
document.write(document.URL);
</script>
</body>
</html>
<body>
The full URL of this page is:
<script type="text/javascript">
document.write(document.URL);
</script>
</body>
</html>
Document.CreateElement: By using this function we can create the new element in the current document.
Sample Script :
<script>
function fun1()
{
txt=document.createElement("input")
txt.type='text'
txt.value='Enter Name'
document.body.appendChild(txt)
div1=document.createElement("div");
div1.innerHTML="This is Div"
div1.style.color="red"
document.body.appendChild(div1)
btn=document.createElement("input")
btn.value="login"
document.body.appendChild(btn)
btn.onclick=fun2
}
function fun2()
{
alert("Excel")
}
</script>
<input type="button" value="Click" onClick="fun1()">
function fun1()
{
txt=document.createElement("input")
txt.type='text'
txt.value='Enter Name'
document.body.appendChild(txt)
div1=document.createElement("div");
div1.innerHTML="This is Div"
div1.style.color="red"
document.body.appendChild(div1)
btn=document.createElement("input")
btn.value="login"
document.body.appendChild(btn)
btn.onclick=fun2
}
function fun2()
{
alert("Excel")
}
</script>
<input type="button" value="Click" onClick="fun1()">
Save the above script in notepad with .html extension and see, how many time you click on the button that many text boxes will come.
Sample Script :
<script>
function fun1()
{
con=document.getElementByid('txt1')
document.body.removeChild(con)
}
</script>
<input type='button' value='Click' onclick='fun1()'>
<input type='text' id='txt1' value='Hi'>
function fun1()
{
con=document.getElementByid('txt1')
document.body.removeChild(con)
}
</script>
<input type='button' value='Click' onclick='fun1()'>
<input type='text' id='txt1' value='Hi'>
Document.body.scrollTop: By using this Javascript function we can go to the top position of the webpage(when we are in bottom.)
Document.body.ScrollLeft: By using this Javascript function we can go to the left position of the webpage(when we are in right.)
Sample Script :
<script>
function fun1()
{
toppos=document.body.scrollTop
document.getElementByid("img1").style.top=toppos+10
}
</script>
<body onscroll='fun1()'>
<img src="file:///C|/xampp/htdocs/2.JPG" width="150" id="img1" style="position:absolute">
Past Huge Content Here
</body>
function fun1()
{
toppos=document.body.scrollTop
document.getElementByid("img1").style.top=toppos+10
}
</script>
<body onscroll='fun1()'>
<img src="file:///C|/xampp/htdocs/2.JPG" width="150" id="img1" style="position:absolute">
Past Huge Content Here
</body>
At the place of Past Huge Content Here, in the javascript past some content and save the file in notepad with .html extension and open the file with browser.
Document.getElementsByTagName: This function is used to get the all elements of a type based n the elements tag name and returns the output in the form of array.
Sample Script :
<script>
function fun1()
{
arr=document.getElementsByTagname("div")
alert(arr.length)
}
</script>
<div id="div1">
DIV 1
</div>
<div>
ABCD
</div>
<input type="button" value="Click" onclick="fun1()">
function fun1()
{
arr=document.getElementsByTagname("div")
alert(arr.length)
}
</script>
<div id="div1">
DIV 1
</div>
<div>
ABCD
</div>
<input type="button" value="Click" onclick="fun1()">
0 comments:
Post a Comment