DOM stands for Document Object Model. An HTML page is rendered in a browser. The browser assembles all the elements contained in the page, downloaded from the webserver, in its memory. Once this is done, the browser then displays these objects in the browser window and once that is done, the browser can no longer recognize individual HTML elements. JavaScript enabled browsers are capable of recognizing individual objects in an HTML page after the page has been rendered in the browser because JavaScript enabled browser recognizes and uses DOM. Thus, allowing the functionality of the object to be controlled at will.
Advantages of DOM:
- Helps create an interactive web page since it allows the browser to recognize individual HTML objects even after they are rendered in the browser window.
- Allows the functionality of the objects to be controlled at will
- Helps update or modify data
Structure
- Navigator: The browser. Eg: Netscape Navigator, Internet Explorer, Opera, Mosaic etc.
- Window: The browser’s window.
- Document: The document is displayed in the browser’s window. This further has multiple elements of its own. We are talking solely about forms here.
- Form: The DOM hierarchy continues downward to encompass individual elements of the form.
DOM Categories: There are three types of DOM supported by JavaScript but we will only discuss those that are applicable with ES6.
1. Legacy DOM: This was the model used by early versions of JavaScript. This model provides read-only properties such as title, URL, etc. It also provides with lastModified information about the document as a whole. This model has a lot of methods that can be used to set and get the document property value.
Document properties of Legacy DOM:
- alinkColor: This property defines the color of the activated links.
Eg. document.alinkColor
- anchors[]: It is the array of each anchor object, one for each anchor as it appears in the document.
Eg. document.anchors[0],document.anchors[1],...
- applets[]: It is the array of applet objects one for each applet as it appears in the document.
Eg. document.applets[0],document.applets[1],..
- bgColor: This property defines the background color of the document.
Eg. document.bgColor
- Cookie: This property defines valued property with special behavior which allows the cookies associated with the document to be queried to set.
Eg. document.cookie
- Domain: This property defines the domain that a document belongs to it has been used for security purpose.
Eg. document.domain
- embeds[]: Synonym for plugins[]. It is the array of objects that represent data embedded in the document
Eg. document.embeds[0],document.embeds[1],...
- fgColor: This property defines the default text color for the document.
Eg. document.fgColor
- forms[]: It is the array of forms object one for each, as it appears in the form.
Eg. document.forms[0],document.forms[1],...
- images[]: It is the array of form objects, one for each element with <img> tag as it appears in the form.
Eg. document.images[0[,document.images[1],...
- lastModified: This property defines date of the most recent update.
Eg. document.lastModified
- linkColor: This property defines the color of unvisited links it is the opposite of the vlinkColor.
Eg. document.linkColor
- links[]: Document link array.
Eg. document.links[0],document.links[1],...
- Location: This property holds the URL of the document.
Eg. document.location
- plugins[]: This property is the synonym for embeds[].
Eg. document.plugins[0],document.plugins[1],...
- Referrer: String that contains the URL of the document if it is linked with any.
Eg. document.referrer
- Title: Contents of the <title> tag.
Eg. document.title
- URL: This property defines the URL.
Eg. document.URL
- vlinkColor: This property defines the color of the visited links(not-activated).
Eg. document.vlinkColor
Document methods in Legacy DOM:
- clear(): Erases the contents of the document and returns nothing.
Eg. document.clear()
- close(): Closes the document opened with open().
Eg. document.close()
- open(): Deletes the existing document content and opens a stream to which the new document contents may be written. Returns nothing.
Eg. document.open()
- write(): Inserts the specified string in the document.
Eg. document.write()
- writeln(): Same as write() but inserts a new line after it is done appending.
Eg. document.writeln()
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>Legacy DOM example</title>
<script type="text/javascript">
function func1() {
var a = document.title;
alert("Document title: " + a);
}
function func2() {
var b = document.URL;
var c = document.lastModified;
var d = document.location;
document.write("Document URL: " + b);
document.write("Document last modified: " + c);
document.write("Document location: " + d);
}
function func3() {
var n = document.forms[1];
document.write("Second form elements: " + n);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<b>Document to try Legacy DOM elements.</b>
<form name="form1">
<p>Section 1:</p>
<button name="b1" id="1"
value="title" onclick="func1()">
Title
</button>
<button name="b2" id="2"
value="INFO" onclick="func2()">
URL
</button>
</form>
<br>
<form name="form2">
Section 2:
<br>
<br>
<button name="bt1" id="1"
value="submit" onclick="func3()">
Elements
</button>
</form>
</center>
</body>
</html>
|
Output:
2. W3C DOM: This DOM follows the standard World Wide Web Consortium which says:
“The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents.”
This model focuses mostly on language neutrality so that scripting and styling documents can be made easy.
Document properties in W3C DOM:
- body: Contents of the tag.
Eg. document.body
- defaultView: Represents the window in which the document is displayed.
Eg. document.defaultView
- documentElement: Reference to the tag of the document.
Eg. document.documentElement
- implementation: Represents the DOMImplementation object that represents the implementation that created this document.
Eg. document.implementation
Documents methods in W3C DOM:
- createAttribute(name_of_attr): Returns a newly-created Attr node with the specified name.
Eg. document.createAttribute(name_of_attr)
- createComment(text): Creates and returns a new Comment node containing the specified text.
Eg. document.createComment(some_text)
- createDocumentFragment(): Creates and returns an empty DocumentFragment node.
Eg. document.createDocumentFragment()
- createElement(tagname_of_new_ele): creates and returns a new Element node with a specified tagname.
Eg. document.createElement(tagname_of_new_ele)
- createTextNode(text): Creates and returns a new Text node that contains the specified text.
Eg. document.createTextNode(text)
- getElementById(Id): Returns the value from the document of the element with the mentioned Id.
Eg. document.getElementById(Id)
- getElementsByName(name): Returns an array of nodes with the specified name from the document.
Eg. document.getElementsByName(name)
- getElementsByTagName(tagname): Returns an array of all element nodes in the document that have a specified tagname.
Eg. document.getElementsByTagName(tagname)
- importNode(importedNode, deep): Creates and returns a copy of a node from some other document that is suitable for insertion into this document. If the deep argument is true, it recursively copies the children of the node too.
Eg. document.importNode(importedNode, deep)
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>W3c example</title>
<script type="text/javascript">
function hello() {
var n = document.getElementById('2').value;
document.write("Hello " + n);
var a = document.body;
document.write("</br>Document body:" + a);
var b = document.defaultView;
document.write("</br>Document default view: " + b);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>
Hello from GeeksforGeeks, this is
an example representation.
</p>
<form name="myform">
<b>Name:</b>
<input type="text" name="name" id="2">
<input type="submit" name="submit"
value="submit" onclick="hello()">
</form>
</center>
</body>
</html>
|
Output:
3. IE4 DOM: This DOM was introduced in version 4 of Internet Explorer. Later versions expanded and went on to include features from W3C DOM.
Document properties in IE4 DOM:
- activeElement: Refers to the currently active input element.
Eg. document.activeElement
- all[]: An indexable array of all element objects within the document.
Eg. document.all[] Note This function was used to check for the presence of specific elements in a web page, but it is now considered deprecated because it only works in Internet Explorer and is not supported in other browsers.
- charset: Character set of the document.
Eg. document.charset
- children[]: Array that contains the HTML elements that are the direct children of the document.
Eg. document.children[]
- defaultCharset: Default charset of the document.
Eg. document.defaultCharset
- expando: When this property is set to false, it prevents client side objects from getting expanded.
Eg. document.expando
- parentWindow: Document containing window.
Eg. document.parentWindow
- readyState: Specifies the loading status of the document.
Eg. document.readyState
- uninitialized: Document has not yet started loading.
Eg. document.uninitialized
- loading: Document is loading
Eg. document.loading
- interactive: Document has loaded sufficiently for the user to interact.
Eg. document.interactive
- complete: Document has loaded.
Eg. document.complete
Document methods in IE4 DOM:
- elementFromPoint(x,y): Returns the element located at the specified point.
Eg. document.elementFromPoint(x,y)
Example:
HTML
<!DOCTYPE html><html>
<head>
<title>IE4 DOM example</title>
<script type="text/javascript">
function func1() {
var a = document.all["greetings"];
alert("Hey, " + a.innerHTML);
}
function func2() {
var b = document.activeElement;
document.write("Active element: " + b);
}
</script>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h4 id="greetings">
Hello from GeeksforGeeks, this is
an example representation.
</h4>
<form name="myform">
<input type="submit" name="b1"
value="Greet" onclick="func1()">
<input type="text" name="text1">
<input type="submit" name="b2"
onclick="func2()">
</form>
</center>
</body>
</html>
|
Output: