« Home | Javascript. » | Loading scripts asynchronously. » | Chess rules » | A good recent game that I won. » | Detecting php duplicate and unused code. » | javascript functions. » | Create tunnel via the ssh command in linux. » | Find tables which are empty in database. » | Svn branching strategies. » | Excellent tutorial on linux usermanagement and sud... » 

Monday, November 14, 2011 

Javascript dom

BOM:
Browser object model.
Window object: Its the global object that javascript core needs to function. 
It is preferred to wrap your code inside a self-executing anonymous function, which you stop your code from clobbering its variables with the global namespace.

Window.open - for opening windows (popups) - window.open('somepage.html','ppk',[arguments]);  - ppk is the window name.
Window.location - to change the current window location and access, the host, protocol properties.
Window.navigator:

Property
Description
Returns the code name of the browser
Returns the name of the browser
Returns the version information of the browser
Determines whether cookies are enabled in the browser
Returns for which platform the browser is compiled
Returns the user-agent header sent by the browser to the server



Window.opener - gives a reference to the parent window that has created this document.
window.history object.
setInterval - call a function every x  milli seconds (setInterval(func, 100))
setTimeout - call a function after x milli seconds

History Object Properties
Property
Description
Returns the number of URLs in the history list

History Object Methods

Method
Description
Loads the previous URL in the history list
Loads the next URL in the history list
Loads a specific URL from the history list

Example:
history.back(); // equivalent to clicking back button
history.go(-1); // equivalent to history.back();


DOM:

Node interface:
To the W3C DOM, everything in an HTML document is a node. The entire document is a document node; every HTML tag element node and the texts contained in these elements are text nodes. Furthermore, HTML attributes like ID are attribute nodes, and even comments are comment nodes.

Every node in the document has five properties and two nodeLists that allow you easy short-distance travel. The five properties are parentNode, firstChild, lastChild, previousSibling, and nextSibling. chileNodes[] array

nodeName: The name of an element node is always the tag name, the name of an attribute node is always the attribute name, the name of a text node is always #text, and the name of the document node is always #document.

NodeType:
nodeType contains a number that gives the type of the node:
Element type
nodeType
Element
1
Attribute
2
Text
3
Comment
8
Document
9

Node Methods:
There are four methods offered by node interface for changing the node tree. AppendChild(), insertBefore(), removeChild(), replaceChild(), cloneNode(). We would understand them along with the document object methods in the sections to follow.
Document object:

Other Document Object properties

Property
Description
W3C
Returns all name/value pairs of cookies in the document
Yes
Returns the mode used by the browser to render the document
No
Returns the domain name of the server that loaded the document
Yes
Returns the date and time the document was last modified
No
Returns the (loading) status of the document
No
Returns the URL of the document that loaded the current document
Yes
Sets or returns the title of the document
Yes
Returns the full URL of the document
Yes


Other Document Object Methods

Method
Description
W3C
Closes the output stream previously opened with document.open()
Yes
getElementById()
Accesses the first element with the specified id
Yes
Accesses all elements with a specified name
Yes
Accesses all elements with a specified tagname
Yes
Opens an output stream to collect the output from document.write() or document.writeln()
Yes
Writes HTML expressions or JavaScript code to a document
Yes
Same as write(), but adds a newline character after each statement
Yes


Document objects collection from the old dom0

document.forms[]
document.links[]
document.images[]

Handling forms:
var sel = [the select box];
var value = sel.options[sel.selectedIndex].value;

var text = [text box]
text.value (will provide the value inside the text box)

var checkbox = [check box]
checkbox.checked - would return if the checkbox is checked or not. (and they too have value property).


<input type="radio" name="income" value="10" />&euro; 10 or lower<br />
<input type="radio" name="income" value="100" />&euro; 11-100<br />
<input type="radio" name="income" value="1000" />&euro; 101-1000<br />
<input type="radio" name="income" value="10000" />&euro; 1001-10000<br />

The above radio buttons are accessible through this DOM call:
var radios = document.forms[0].elements['income'];

var radios = document.forms[0].elements['income'];
for (var i=0;i<radios.length;i++) {
if (radios[i].checked)
// do something
}


var x = document.createElement('p');
var y = document.createTextNode('This is a created element');
x refers to the newly created <p> element, while y refers to the newly created text node. These nodes aren't inserted in the document yet. You would now use appendChild() or insertBefore() to add them to the document tree.

Example:
x.appendChild(y);
document.body.appendChild(x);

Element interface:

element interface properties: InnerHTML (set / get html content on an element), scroll, offset,client (width, height,top)
element methods: getAttribute, setAttribute, hasAttribute, removeAttribute


Event handling:

Dom Events:

Event bubbling:
Css modifications using javascript: