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:
nodeType contains a number that gives the type of the node:
|
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.
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 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" />€ 10 or lower<br />
<input type="radio" name="income" value="100" />€ 11-100<br />
<input type="radio" name="income" value="1000" />€ 101-1000<br />
<input type="radio" name="income" value="10000" />€ 1001-10000<br />
<input type="radio" name="income" value="100" />€ 11-100<br />
<input type="radio" name="income" value="1000" />€ 101-1000<br />
<input type="radio" name="income" value="10000" />€ 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'];
var radios = document.forms[0].elements['income'];
for (var i=0;i<radios.length;i++) {
if (radios[i].checked)
// do something
}
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);
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:
