HTML DOM:-

• The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

• All HTML elements, along with their containing text and attributes, can be accessed through the DOM.

The contents can be modified or deleted, and new elements can be created.

• The HTML DOM is platform and language independent.

It can be used by any programming language like Java,JavaScript, and VBScript.


HTML DOM Objects:-_

• Anchor object

• Document object

• Event object

• Form and Form Input object

• Frame, Frameset, and IFrame objects

• Image object

• Location object

• Navigator object


HTML DOM Objects:-

• Option and Select objects

• Screen object

• Table, TableHeader, Tableriou, TableData objects

• Window object


Document Object :-

Document Object: Write text to the output:-

<html>

<body>

<script type="text/javascript">

document.write("Hello World!")

</script>

</body>

</html>

Document Object: Write text with Formatting to the output:-

<html>

<body>

<script type="text/javascript">

document.write("<h1>Hello World!</h1>")

</script>

</body>

</html>


Document Object: Use getElementById() :-

<html>

<head>

<script type="text/javascript">

function getElement() {

var x=document.getElementById("myHeader")

alert("I am a " + x.tagName + " element")

}
</script>

</head>

<body>

<h1 id="myHeader" onclick="getElement()">Click to see what element I am!</h1>

</body>

</html>


Document Object: Use getElementsByName():-

<html>

<head>

<script type="text/javascript">

function getElements() {

var x=document.getElementsByName("myInput")

alert(x.length + " elements!")

}
</script>

</head>

<body>

<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'?">

</body>

</html>


Document Object: Return the innerHTML of the first anchor in a document:-

<html>

<body>

<a name="first">First anchor</a><br />

<a name="second">Second anchor</a><br />

<a name="third">Third anchor</a><br />

<br />

InnerHTML of the first anchor in this document:

<script type="text/javascript">

document.write(document.anchors[0].innerHTML)

</script>

</body>

</html>

Document Object: Access an item in a collection:-

<html>

<body>

<form id="Form1" name="Form1">

Your name: <input type="text">

</form>

<form id="Form2" name="Form2">

Your car: <input type="text">

</form>

<p>

To access an item in a collection you can either use the number or the name of the item:

</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>

</body>

</html>


Event Object:-



Event Object: coordinates of the cursor:-


<html>

<head>

<script type="text/javascript">

function show_coords(event) {

x=event.clientX

y=event.clientY

alert("X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

<p>Click in the document. An alert box will alert the x and y coordinates of the cursor.</p>

</body>

</html>


Event Object: Unicode of the key pressed :-

<html>

<head>

<script type="text/javascript">

function whichButton(event) {

alert(event.keyCode)

}

</script>

</head>

<body onkeyup="whichButton(event)">

<p><b>Note:</b> Make sure the right frame has focus when trying this example!</p>

<p>Press a key on your keyboard. An alert box will alert the unicode of the key pressed.</p>

</body>

</html>

Event Object: element clicked:-

<html>

<head>

<script type="text/javascript">

function whichElement(e) {

var targ

if (!e) var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3) // defeat Safari bug

targ = targ.parentNode

var tname

tname=targ.tagName

alert("You clicked on a " + tname + " element.")

}

</script>

</head>

<body onmousedown="whichElement(event)">

<p>Click somewhere in the document. An alert box will alert the tag name of the element you clicked on.</p>

<h3>This is a header</h3>

<p>This is a paragraph</p>

<img border="0" src="ball16.gif" width="29" height="28" alt="Ball">

</body>

</html>


Event Object: Type of event occurred:-

<html>

<head>

<script type="text/javascript">

function whichType(event) {

alert(event.type)

}

</script>

</head>

<body onmousedown="whichType(event)">

<p>

Click on the document. An alert box will alert which type of event occurred.

</p>

</body>

</html>