The following are the different types of DOM available to access and modify content in JavaScript −
- The Legacy DOM − This is the model that was introduced in early versions of JavaScript language. It is well supported by all browsers but allows access only to certain key portions of documents, such as forms, form elements, and images.
- The W3C DOM − The document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all modern browsers.
- The IE4 DOM – The document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.
Example
Let’s see an example to access document properties using the W3C DOM method.
<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret = document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id = "form1" name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form d = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>