* The Document Object Model (DOM) is the model that describes how all elements in an HTML page (like input fields, images, paragraphs etc.) are related to the topmost structure: the document itself.
* It defines the logical structure of documents and the way a document is accessed and manipulated.
* Each HTML document loaded into a browser window becomes a Document object. The Document object provides access to all HTML elements in a page, from within a script.
Document :
Represents the entire HTML document and can be used to access all elements in a page
Document object methods :
getElementById()
Returns the element with specified id.
Example :
var x=document.getElementById("main");
Result :
Finds the element with id="main":
getElementsByTagName()
Returns the element with specified id.
Example :
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
Result :
finds the element with id="main"
finds all <p> elements inside "main".
Node methods
The different node methods available through DOM manipulation are as follows:
<script>
var targetDiv = document.getElementById("list").getElementsByTagName("li")[0];
alert(targetDiv.childNodes[0].className);
</script>
</body>
</html>
node.firstChild
The firstChild property returns the first child node of the specified node, as a Node object.
Example :
<html>
<body>
Click the button get the node name of the document's first child node
</body>
</html>
node.lastChild
The lastChild property returns the last child node of the specified node, as a Node object.
Example :
<html>
<body>
Example list:
Coffee
Tea
Click the button get the node name of the list's last child node
Note: Whitespace inside elements is considered as text, and text
is considered as nodes.
Try adding whitespace before the closing UL tag, and the result will be node name=#text.
</body>
</html>
node.parentNode
The parentNode property returns the parent node of the specified node, as a Node object.
Returns null if the the specified node does not have a parent node.
Example :
<html>
<body>
Example list:
Coffee
Tea
Click the button get the node name of the parent node of the first list item in a list
</body>
</html>
node.nextSibling
The nextSibling property returns the node immediately following the specified node, in the same tree level.
The returned node is returned as a Node object.
Note : If there is no nextSibling node, the return value is null.
Example :
<html>
<body>
Example list:
Coffee
Tea
Click the button get the id of the next sibling of the first item
Note: Whitespace inside elements is considered as text, and text
is considered as nodes.
Try adding whitespace between the two <li> elements, and the result will be "undefined".
</body>
</html>
node.previousSibling
The previousSibling property returns the previous node of the specified node, in the same tree level.
TThe returned node is returned as a Node object.
Note : If there is no previousSibling node, the return value is null.
Example :
<html>
<body>
Example list:
Coffee
Tea
Click the button get the id of the previous sibling of the second list item
Note: Whitespace inside elements is considered as text, and text
is considered as nodes.
Try adding whitespace between the two <li> elements, and the result will be "undefined".
</body>
</html>
createElement()
Creates an instance of the element object, which can then added to the document.
Example :
var myNewListItem = document.createElement("li");
var myNewLink = document.createElement("a");
appendChild()
To append the element which have created by createElement() with the document
Example :
var myNewListItem = document.createElement("li");
var myNewLink = document.createElement("a");
var myLinkList = document.getElementById("list");
myLinkList.appendChild(myNewListItem);
myLinkList.lastChild.appendChild(myNewLink);
removeChild()
To remove the element from the document.
Example :
var myLinkList = document.getElementById("list");
var myRemovedLink = myLinkList.lastChild;
myLinkList.removeChild(myRemovedLink);
var myLinkFirst = document.getElementById("first");
var myLinkAttribute = myLinkFirst.setAttribute("class","link_one");
createElement(tagName)
Creates an instance of the element object, which can then added to the document.
createAttribute("attributename")
Creates a new attribute, ready to be inserted somewhere in the document. It returns a reference to the created attribute.
Example :
var textblock=document.createElement("div");
textblock.setAttribute("id", "test");
document.forms
you can access a form or form element directly using getElementById or another method mentioned above, the best way to access any given form is using the document.forms syntax, which is basically acessing the "forms" collection of the document object.
Example :
We could find out the "checked" state of any of the checkboxes with the following code:
Window Object :
The window object represents an open window in a browser. It is the top level object in JavaScript, and contains in itself several other objects, such as "document" etc.
Note : If a document contain frames (<frame> or <iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
we can redirect to another page in javascript through window.location.href.
Example :
<SCRIPT LANGUAGE="JavaScript1.2">
function redirectto() {
window.location.href="http://www.google.com";
}
</SCRIPT>
--------------------------------------------------------------------------
JavaScript Timing Events :
With JavaScript, it is possible to execute some code after a specified time-interval.
setTimeout()
Calls a function or evaluates an expression after a specified number of milliseconds.
clearTimeout()
Clears a timer set with setTimeout().
The setTimeout() method returns a value. If you want to cancel the setTimeout() function, you can refer to it using the variable name which stores the returned value of setTimeout(),in clearTimeOut(). The first parameter of setTimeout() can be a string of executable code, or a call to a function. The second parameter indicates how many milliseconds from now you want to execute the first parameter.
setInterval()
* The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).
* The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.
* The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
clearInterval()
The clearInterval() method clears a timer set with the setInterval() method.
Exercises :
Which one is the root element in the DOM ?
What are the attributes of the form tag ?
Write the code for getting how many div nodes are there in the given structure ?
Write the code to delete all the child node of as below structure
<div>Statement 1
<div>Statement 2</div>
<div>Statement 3
<span>Statement 4</span>
</div>
</div>
<div>
Statement 5.
</div>
Write syntax for link: "http://google.com" in new window and new tab.
Java Script
