A simple document
Breakfast
0
1
Lunch
1
0
Load code [[http://localhost:4567/eg-259/examples/lecture8/dom.html|dom.html]]
===== DOM Structure for Simple Document =====
{{eg-259:l8-dom.png|The DOM for the example document}}
===== The Document Object Model (continued) =====
* A language that supports the DOM must have a binding to the DOM constructs
* In the //JavaScript binding//, HTML elements are represented as //objects// and element attributes are represented as //properties//
===== DOM Element as JavaScript object =====
For example:
would be represented as an ''input'' object with two properties, ''type'' and ''name'', with the values ''%%"text"%%'' and ''%%"address"%%''. E.g:
input = {
type: "text",
name: "address"
};
===== Element Access in JavaScript =====
There are several ways to do it
* [[#element_access_by_array_index|Element access by array index]]
* [[#element_access_by_name|Element access by name]]
* [[#element_access_by_id|Element access by id]]
===== An Example =====
Example (a document with just one form and one widget):
Rendered as:
Load code [[http://localhost:4567/eg-259/examples/lecture8/form.html|form.html]]
===== 1. Element Access by Array Index =====
* DOM address:
var button = document.forms[0].elements[0]
* **Problem**: solution is fragile if document changes, indices may be wrong
----
For example if another form is added //before// this one, or another widget is added //before// the button.
===== 2. Element Access by Name =====
* requires the element and all of its ancestors (except body) to have ''//name//'' attributes
* Button //pushMe// can be accessed by:
var button = document.forms[0].pushMe
----
* **Problem**: XHTML 1.1 specification doesn't allow the ''name'' attribute on form elements!
* HTML5 does allow name and a form can be addressed by name if either //name// or //id// is set (presumably //name// is used if both are present).
===== 3. Element Access by Id =====
* ''getElementById'' method (defined in DOM 1)
* Button now accessed as:
var button = document.getElementById("pushMe")
----
This is the safest method, and is the most widely adopted convention. It does require that each widget be given a unique id.
===== 4. Element Access by CSS selector - jQuery =====
* Using jQuery CSS selector (more later)
* Button now accessed as:
var button = $("#pushMe");
----
As jQuery has become almost a standard part of the developer's toolbox, this way of accessing a DOM element by CSS selector is almost certain to work. You do need to include jQuery as an external library of course.
===== Check Box/Radio Button Access =====
* Check boxes and radio buttons have an implicit array, which has their name
* Rendered:
Load code [[http://localhost:4567/eg-259/examples/lecture8/radiobuttons.html|radiobuttons.html]]
===== Check Box/Radio Button Access (continued) =====
* Check-box items could be accessed by this script:
var numChecked = 0;
var dom = document.getElementById("topGroup");
for (index = 0; index < dom.toppings.length; index++) {
if (dom.toppings[index].checked) {
numChecked++;
}
}
----
**Mini exercise**: Modify the above to generate an array of toppings.
===== Events and Event Handling =====
* An event is a notification that something specific has occurred, either with the browser or an action of the browser user
* An event handler is a script that is implicitly executed in response to the appearance of an event
* The process of connecting an event handler to an event is called //registration//
* Don't use ''document.write'' in an event handler, because the output will probably replace the current DOM
===== The Standard Events and their Handlers =====
^ Event ^ Tag Attribute ^ Event ^ Tag Attribute ^
| ''blur'' | ''onblur'' | ''mouseout'' | ''onmouseout'' |
| ''change'' | ''onchange'' | ''mouseover'' | ''onmouseover'' |
| ''click'' | ''onclick'' | ''mouseup'' | ''onmouseup'' |
| ''focus'' | ''onfocus'' | ''select'' | ''onselect'' |
| ''load'' | ''onload'' | ''submit'' | ''onsumbit'' |
| ''mousedown'' | ''onmousedown'' | ''unload'' | ''onunload'' |
| ''mousemove'' | ''onmousemove'' | | |
===== Events and Event Handling (continued) =====
* The same attribute can appear in several different tags
* e.g., The ''onclick'' attribute can be in '''' and ''''
===== Handling Events from Text Elements =====
A text element gets focus in three ways:
* When the user puts the mouse cursor over it and presses the left button
* When the user //tabs// to the element
* By executing the //focus// method
===== Event Attributes: onblur =====
* The ''//onblur//'' attribute
^ Tag ^ Description ^
| '''' | The link loses focus |
| ''