Hello guy! welcome to this tutorial post on IE4 DOM in JavaScript. I will round up everything about my discussion on the JavaScript Object Model in this tutorial and from my next tutorial post, i will be discussing about a more advanced aspect of JavaScript. So without wasting much time, let me get started.
This document object model was introduced in version 4 of the internet Explorer browser. IE 5 and later versions includes support for most of the basic W3C DOM features.
This document object model was introduced in version 4 of the internet Explorer browser. IE 5 and later versions includes support for most of the basic W3C DOM features.
Document Properties in IE4 DOM
The following non standard (and non portable ) properties are defined by Internet Explorer 4 and later versions.
| Sr.No. | Property & Description |
|---|---|
| 1 |
activeElement
A read-only property that refers to the input element that is currently active (i.e., has the input focus).
Ex − document.activeElement
|
| 2 |
all[ ]
An array of all Element objects within the document. This array may be indexed numerically to access elements in source order, or it may be indexed by element id or name.
Ex − document.all[ ]
|
| 3 |
charset
The character set of the document.
Ex − document.charset
|
| 4 |
children[ ]
An array that contains the HTML elements that are the direct children of the document. Note that this is different from the all [ ] array that contains all the elements in the document, regardless of their position in the containment hierarchy.
Ex − document.children[ ]
|
| 5 |
defaultCharset
The default character set of the document.
Ex − document.defaultCharset
|
| 6 |
expando
This property, if set to false, prevents client-side objects from being expanded.
Ex − document.expando
|
| 7 |
parentWindow
The window that contains the document.
Ex − document.parentWindow
|
| 8 |
readyState
Specifies the loading status of a document. It has one of the following four string values −
Ex − document.readyState
|
| 9 |
uninitialized
The document has not started loading.
Ex − document.uninitialized
|
| 10 |
loading
The document is loading.
Ex − document.loading
|
| 11 |
interactive
The document has loaded sufficiently for the user to interact with it.
Ex − document.interactive
|
| 12 |
complete
The document is completely loaded.
Ex − document.complete
|
You also read our tutorial post on: Udanstanding the W3C DOM in JavaScript
Document Methods in IE 4 DOM
This model supports all the methods available in Legacy DOM. Additionaly, below is the list of all methods supported by IE4 DOM.
| Sr.No. | Property & Description |
|---|---|
| 1 |
elementFromPoint(x,y)
Returns the Element located at a specified point.
Example: document.elementFromPoint(x,y)
|
Example
The IE 4 DOM does not support the JavaScript getElementById method. Instead, it allows you to look up arbitrary document elements by the id attribute within the all [ ] array of the document object.
Below is how you find all <li> tags within the first <ul> tag. Note that you must specify the desired HTML tag name in uppercase with the all.tags() method.
Below is how you find all <li> tags within the first <ul> tag. Note that you must specify the desired HTML tag name in uppercase with the all.tags() method.
var lists = document.all.tags( "UL" );
var items = lists[ 0 ].all.tags( "LI" );
var items = lists[ 0 ].all.tags( "LI" );
Below is another example used to access the document properties using IE4 method.
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.all["heading"];
alert("Document Heading : " + ret.innerHTML );
var ret = document.all.tags("p");
alert("First Paragraph : " + ret[ 0 ].innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following below 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 id = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe" />
</form>
</body>
</html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.all["heading"];
alert("Document Heading : " + ret.innerHTML );
var ret = document.all.tags("p");
alert("First Paragraph : " + ret[ 0 ].innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following below 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 id = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe" />
</form>
</body>
</html>
Output
Below is the output of the above example.
This is main title
Click the following below to see the result
Note - The above example returns the object for forms and elements and we would have to access their values by using those object properties which are not discussed in this post.
Alright guys! we have come to the end of this tutorial on the IE4 DOM. In my next tutorial, i will be discussing about the various way by which Errors and Exceptions can be properly handled in JavaScript.
Feel free to ask your questions where it is very necessary and i will assist in making them for clearer. Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Alright guys! we have come to the end of this tutorial on the IE4 DOM. In my next tutorial, i will be discussing about the various way by which Errors and Exceptions can be properly handled in JavaScript.
Feel free to ask your questions where it is very necessary and i will assist in making them for clearer. Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.