Introduction to the HTML DOM
This document is Copyright (c) Information Technology Group, |
<html> |
<html> |
<html> |
============= |
<html> |
<html> |
<html> |
<html> |
HTML Code Browser Objects |
// a JavaScript function which, given an element's ID, |
HTML document Browser Objects |
<html> |
window |
The 'window' object is the "parent" object of
all the browser objects in the HTML DOM containment hierarchy. This
means that all other browser objects are its child objects. All child
objects are said to be properties of their parent object. Some of the
child objects like the 'document' object are also parent or container
objects for other objects that are lower down in the browser object
containment hierarchy.
The 'window' object is said to be the top-level object for each
'document', 'location', and 'history' objects; it has object references
associated with it as properties ('navigator', 'screen', 'location',
'history' and 'document' objects).
For each HTML document loaded in a browser client or an
'window.open()' method call, an 'window' object is created.
// Gets a 'location' object referece for a window object |
Property | Description | Example |
href | The entire URL. Note: the port number, if present, may or may nor be included in the 'href' string, depending on the browser. |
http://www.google.com/search?q=demo#test |
protocol | The protocol. | http: |
hostname | The host name. Note: the port number, if present, may or may nor be included in the 'href' string, depending on the browser. |
www.google.com |
port | The port number. | 80 |
search | If there is no '#' before the '?' character in the URL, then the part of the RUL following the first '?' character in the URL, including the '?' character, and up to the first '#' character; else empty string. | ?q=demo |
hash | The part of the RUL following the first '#' character, including the '#' character, all the way to the end of the URL string. | #test |
Method | Description |
assign("url") | Load the document at the provided URL. Returns nothing. |
reload([forceget]) | Reload the document from the current URL. The 'forceget' is a boolean value; when it is 'true', causes the page to always be reloaded from the server. If it is 'false' or not specified, the browser may reload the page from its cache |
replace("url") | Replace the current document with the one at the provided URL. The difference from the assign( ) method is that after using replace( ) the current page will not be saved in session history, meaning the user won't be able to use the 'Back button' to navigate to it. Returns nothing. |
toString() | Returns the string representation of the Location object's URL. |
historyObject = window.history; |
navigatorObject = window.navigator; |
screenObject = window.screen; |
Property | Description |
height | Returns the monitor device Y axis resolution in pixels |
width | Returns the monitor device X axis resolution in pixels |
availHeight | Returns the amount of vertical space available to the window on the screen. This amount represents the monitor device Y axis resolution minus the amount of pixels that represents the heigth's OS horizontal menu/task bar. |
availWidth | Returns the amount of horizontal space in pixels available to the window. This amount represents the monitor device X axis resolution minus the amount of pixels that represents the width's OS vertical menu/task bar. If the OS doesn't have any vertical menu/task bar, the 'availWidth' is identically with 'width'. |
availTop | Returns the pixel value that measures where the available space of the Y axis screen begins. If the returned value is non-zero, the value represents the height's OS horisontal menu/task bar. |
availLeft | Returns the pixel value that measures where the available space of the X axis screen begins. |
// Syntax : |
<script type="text/javascript"> |
// window.resizeBy( ) adjusts the window's width and heigth with deltaX and deltaY |
// coordX and coordY represents the horizontal/vertical coordinate to be moved to |
newWindow = window.open('some_local_file.html'); |
// Syntax : |
// Syntax : |
// Syntax : |
// Syntax : |
// Syntax : |
elementObjectReference = document.getElementById("id"); |
listOfElementObjectReferences = document.getElementsByName("name"); |
listOfElementObjectReferences = document.getElementsByTagName("tagName"); |
objectReference = document.createElement("tagName"); |
textObjectReference = document.createTextNode("text content of the object"); |
document.write("stringValue" [+"stringValue1" [+"stringValue2"] ...]); |
<head> |
<body> |
document.open(); |
document.close(); |
<body> |
// Example 1: |
An HTML document can embed other HTML documents using 'iframe' or 'frame' elements
window.top.document |
all 'Element' object types |
anchor, applet, map, iframe, image, input, form, |
body, anchor, paragraph, div, span, list, |
all element objects |
<html> |
body, anchor, paragraph, div, span, list, |
<html> |
all browser objects. |
<html> |
all browser objects. |
<html> |
anchor, area, button, input, textarea . |
<a id="myAnchor" accesskey="A" href="http://www.w3.org" > W3 </a> |
anchor, area, textarea, all interactive objects . |
image, area, [input, applet] . |
all 'Element' object types except frame, iframe, frameset, form, link |
all 'Element' object types |
<head> |
<script> |
all 'Element' object types |
<html> |
area, anchor, link . |
anchor, area, link, form. |
anchor, div and span, iframe, image, input, list, |
// given the following HTML code : |
// accessing a property with a knonw name, e.g. the property named 'myCustomProp' |
<html> |
all element objects. |
<html> |
all element objects. |
<html> |
all element objects. |
<html> |
<p myAtt="myValue" > ... </p> |
all element objects. |
<html> |
all element objects. |
// Syntax |
|
'text', 'file', 'password', 'button', 'hidden', 'submit', 'reset', 'image', 'checkbox' or 'radio': for these interactive object types, the 'value' property corresponds to the 'value' attribute of correponding interactive HTML element.
'textarea' : for this interactive
object type, the 'value' property represents the "content" of the
correponding HTML 'textarea' element. The "content" is the
string between "start tag" and "end tag" of an HTML element. In
the 'textarea' case, the "content" is the string displayed inside the
'textarea' box.
Note: the HTML 'textarea' element does not have a 'value'
attribute.
'select' : for this interactive object type, the 'value' property correponds to the 'value' attribute of the currently selected option, if multiple options are selected this is the value of the first selected option.
all interactive objects. |
file, password, text. |
all interactive objects |
all interactive objects |
password, text, textarea. |
all text-input objects except 'textarea'. |
all element objects. |
all element objects. |
all element objects. |
all element objects. |
// Syntax : |
all element objects. |
// Syntax: |
all element objects that can have childern. |
<html> |
all element objects that can have childern. |
<html> |
all element objects that can have children. |
<html> |
all element objects |
<html> |
all interactive objects . |
document.getElementById("myTextEntry").focus(); |
all interactive objects . |
document.getElementById("myTextEntry").blur(); |
id, name, className, alt, complete, src, style. |
id, name, className, accesskey, href, target . |
id, className, align. |
id, className, align. |
id, className. |
<link rel="stylesheet" type="text/css" href="mystyle.css" /> |
id, className, disabled, href, rel, rev, target, type. |
id, className, caption, cellPadding, cellSpacing, rows, width, style. |
createCaption(), deleteCaption(), insertRow(), deleteRow() |
id, className, cells, style . |
id, className, align, vAlign, width. |
insertCell(), deleteCell() |
// the HTML page contains the follow table with 2 rows and 2 collumns. |
frame, iframe |
frame, iframe |
frame |
frame |
iframe |
iframe |
frame |
frame, iframe |
frame, iframe |
// get the reference to the 'frame' element object with a given 'id' embedded in an HTML document |
id, name, contentDocument, frameBorder, noResize, |
id, className, name, align, contentDocument, frameBorder, height, width, |
// get a reference to the 'frameset' object whose 'id' is "myFramesetID" from the current document |
id, className, cols, rows. |
id, name, className, action, elements, length, method, target. |
// Given an HTML document that contains 2 form elements, |
// Given an HTML document that contains 2 form elements, |
name, id, className, accessKey, disabled, form, |
name, id, className, accessKey, checked, defaultChecked, disabled, form, |
name, id, className, accessKey, defaultValue, disabled, form, |
name, id, className, accesskey, disabled, form, type, value, size, style. |
name, id, className, disabled, form, length, multiple, options, |
add(), remove(). |
add(insertElementObj , keyElementObj)
:
Add a new object to the collection of 'option' objects for this
'select' object. This method may have no effect if the new object is
not an 'option' or an 'optgroup' object.
Note that both parameters are option objects, not strings or
index(integer).
The insertElement is the object to add(must be created with document.createElement()
method), the keyElement is the object to insert before on
'options' array, or "null" for the tail of the array.
//the following code add an 'option' object to the 'select' object whose 'id' is 'myselect' |
remove(index) :
Remove an 'option' object from the collection of 'option' objects for
this 'select' object. Does nothing if no object has the given index.
// the following code deletes the selected 'option' object from the given 'select' object : |
id, className, defaultSelected, disabled, index, selected, text, value. |
name, id, className, accesskey, disabled, form, type, value, style. |
name, id, className, accessKey, cols, rows, disabled, defaultValue, form, type, readOnly, value. |
<html> |
<html> |
document.selection.createRange().text |
window.getSelection().toString() |
document.cookie='first_month=January'; |
document.cookie='random_number='+Math.random(); // set a first random value |
var days = 7; //expire after 7 days |
var expiryDate = new Date(); // expiryDate is 'now' |
function readCookie(name) { |
document.cookie='myPI=3.14; domain=some-domain.com; path=/myFolder' |
<html> |
Response Caching
A common problem that may occur with documents that are received via
XMLHttpRequest is related to the way in which a particular browser
caches said response; specifically, while a "regular" document that is
loaded by a web browser can be forced to reload from the server (and
thus refresh the browser cache) by using the broswer's 'reload' function
(the reload/refresh button), the documents that are received via
XMLHttpRequest are not necessarily refreshed, i.e. the cached version might
still be used instead of the newest version from the server (this
behavior depends on the browser). In order to force a document to actually be reloaded
when it is received via XMLHttpRequest, two special properties
"Cache-control" and "Pragma" in the AJAX request header can be set to
the value "no-cache".
// instruct the browser to NOT use caching for AJAX document load |