Dom--Document object
<html>
<head>
<script type="text/javascript">
document.write("Hello World!")
document.write("<h1>Hello World!</h1>")
document.write(document.title)
document.write(document.URL)
document.write(document.referrer)
document.write(document.domain)
function getElement()
{
var x=document.getElementById("myHeader")
alert("I am a " + x.tagName + " element")
}
function getElements()
{
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
function createNewDoc()
{
var newDoc=document.open("text/html","replace")
var txt="<html><body>Learning about the DOM is FUN!</body></html>"
newDoc.write(txt)
newDoc.close()
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1>
<br>
-----------------------------------------------------
<br>
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<br />
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?">
<br>
______________________________________________________
<br>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
-----------------------------------------------------
<br/>
<input type="button" value="Open and write to a new document" onclick="createNewDoc()">
<br/>
------------------------------------------------------------------------
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
<br/>
------------------------------------------------------------------------
<form id="Form1" name="Form1">
Your name: <input type="text">
</form>
<form id="Form2" name="Form2">
Your car: <input type="text">
</form>
<script type="text/javascript">
document.write("This document contains: " + document.forms.length + " forms.")
</script>
<p>
To access an item in a collection you can either use the number or the name of the item:</b>
</p>
<script type="text/javascript">
document.write("<p>The first form's name is: " + document.forms[0].name + "</p>")
document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>")
</script>
<br/>
------------------------------------------------------------------------
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
<br />
InnerHTML of the first anchor in this document:
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
<head>
<script type="text/javascript">
document.write("Hello World!")
document.write("<h1>Hello World!</h1>")
document.write(document.title)
document.write(document.URL)
document.write(document.referrer)
document.write(document.domain)
function getElement()
{
var x=document.getElementById("myHeader")
alert("I am a " + x.tagName + " element")
}
function getElements()
{
var x=document.getElementsByName("myInput")
alert(x.length + " elements!")
}
function createNewDoc()
{
var newDoc=document.open("text/html","replace")
var txt="<html><body>Learning about the DOM is FUN!</body></html>"
newDoc.write(txt)
newDoc.close()
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1>
<br>
-----------------------------------------------------
<br>
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<input name="myInput" type="text" size="20"><br />
<br />
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?">
<br>
______________________________________________________
<br>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
-----------------------------------------------------
<br/>
<input type="button" value="Open and write to a new document" onclick="createNewDoc()">
<br/>
------------------------------------------------------------------------
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
<br/>
------------------------------------------------------------------------
<form id="Form1" name="Form1">
Your name: <input type="text">
</form>
<form id="Form2" name="Form2">
Your car: <input type="text">
</form>
<script type="text/javascript">
document.write("This document contains: " + document.forms.length + " forms.")
</script>
<p>
To access an item in a collection you can either use the number or the name of the item:</b>
</p>
<script type="text/javascript">
document.write("<p>The first form's name is: " + document.forms[0].name + "</p>")
document.write("<p>The first form's name is: " + document.getElementById("Form1").name + "</p>")
</script>
<br/>
------------------------------------------------------------------------
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
<br />
InnerHTML of the first anchor in this document:
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>
</body>
</html>
