JAVASCRIPT DOCUMENT OBJECT

DOCUMENT OBJECT :

Every web page resides inside a browser window which is considered as an object.
A Document object represents the HTML document that is displayed in that window.
The Document object has various properties that refer to other objects which allow access to and modification of document content.
The way the document content is accessed and modified is called the Document Object Model, or DOM.
·         Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
·         Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page.
·         Form object: Everything enclosed in the <form>...</form> tags sets the form object.
·         Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.
It contains these properties:
·         documentElement, body, title: references the <html>, <body> and <title> tags respectively.
·         lastModified, referrer, cookie, domain: information retrieved from the HTTP response header.
·         form[], applets[], images[], embeds[], links[], anchors[]: Arrays containing the respective HTML elements

The document object has the following methods:

·         write(string), writeln(string): Write the specified string to the current document. writeln() (write-line) writes a newline after the string, while write() does not. clear(): Clear the document.
·         open(), close(): Open/close the document stream.

·         getElementById(), getElementsByName(), getElementsByTagName(): Select HTML element(s) by id, name, or tag-name, respectively.

Example: The following example changes the content (the innerHTML) of the <p> element with id="demo":
getElementById is a method,  innerHTML is a property.
<html>
<body>
<h1>My First Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
Output:
My First Page
Hello World!

The getElementById Method

The most common way to access an HTML element is to use the id of the element.
In the example above the getElementById method used id="demo" to find the element.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.


No comments:

Post a Comment