JavaScript is a loosely-typed scripting language with support for object-oriented and functional programming styles. Although it looks like Java and C-family languages, it's quite different under the hood. Here are a few survival tips to get you through your first serious encounter with this language:
- Objects can be extended at runtime with new properties. Think of Javascript objects as associative arrays.
- Functions are first-class objects, and can be passed as arguments into other functions (see the numerous callback functions earlier).
- JavaScript functions support closures. That is, variables that are in scope when a function is defined can still be referenced inside the function, even if it is invoked later.
Ajax User Interfaces
Before Ajax, the UI was nearly always delivered as declarative HTML, and the Document Object Model, or DOM, was only used in moderation. With Ajax'especially single-page applications' the DOM can play a much bigger role.
Working with the DOM is a two-stage process:
- Finding the elements we want to work with
- Modifying their contents or reorganizing them
Finding DOM Elements
The DOM standard itself gives us a few basic tools to work with. Enterprising JavaScript library developers have built on top of these to provide a much richer set of functionality.
Function |
arguments |
returns |
notes |
document. getElementById() |
string |
DOM Element |
find single element on page. Id attribute must be unique in page |
document. getElementsByTagName() element. getElementsByTagName() |
string |
collection of DOM elements |
find all elements on page of a particular HTML tag type e.g. H1, IMG, LI. Use as a method of element to search a subtree of the document |
element.childNodes |
none |
collection of DOM elements |
find node's immediate children |
element.parentNode |
none |
DOM Element |
find node's immediate parent |
element.nextSibling element.previousSibling |
none |
DOM Element |
allow traversal of sibling nodes |
The id attribute is often too specific'adding one to each element we may need to locate becomes tedious, and clutters the markup. Tag names, on the other hand, are not specific enough to be useful in many cases. The most common solution is to use CSS classes to locate elements. We can make these as specific or general as we need.
Finding DOM Elements Using Prototype
Function |
arguments |
returns |
notes |
$() |
string, many strings, or elements |
DOM element, or array of elements |
powerful and concise superset of getElementById() |
document. getElementsByClassName() element. getElementsByClassName() |
string (a CSS class) |
array of DOM elements |
version 1.5+ simple analogue to getElementsByTagName() |
$$() |
string (selector rule) |
array of DOM elements |
version 1.5+ accepts CSS selector rules, and xpath queries |
element.select() |
string (selector rule) |
array of DOM elements |
version 1.6 analogue to $$(), syntactically neater |
element.up() element.down() element.next() element.previous() |
selector rules, counts (both optional) |
DOM Element |
powerful positional navigation methods, that can work with selectors |
Examples
$("myList") |
![](png/thumb-5.png) |
selects the element with id=myList |
.select("li.new") |
![](png/thumb-6.png) |
selects all DOM elements of type <LI> with CSS class new within subtree beneath myList |
$("widget") |
![](png/thumb-7.png) |
selects element with id="widget" |
.down("img div.handle",2) |
![](png/thumb-8.png) |
internally returns list of all tags that are children of a DIV with CSS class handle, and returns the second one |
Finding DOM Elements Using jQuery
Function |
arguments |
returns |
notes |
$() |
string (selector rule) |
jQuery object wrapping array of elements |
although only one method is listed here, jQuery is exceptionally powerful in this regard. The selector rules encompass CSS3, xpath (optional) and a range of custom selectors too! |
Examples
$("div") |
![](png/thumb-9.png) |
select all nodes by tag type |
$("#myList") |
![](png/thumb-10.png) |
select by unique id |
$("ul#myList li.new") |
![](png/thumb-11.png) |
complex CSS selector |
![Hot Tip](png/thumb-12.png)
DOM elements can be assigned to multiple CSS classes. When finding elements using a selector mechanism, you may use the same CSS classes that determine the look of your page, or you may assign separate marker classes, i.e. CSS classes that have no visual effect on the page.
Modifying the DOM
Again, the DOM standard gives us a basic set of tools to work with, and browser vendors have effectively standardized a few more.
Function |
arguments |
returns |
notes |
document. createElement() |
string (tag name) |
DOM Element |
create new content slowly and painfully! |
document. createTextNode() |
string (content of node) |
DOM text node |
create new content slowly and painfully! |
element. innerHTML |
n/a |
n/a |
use the browser's built-in HTML parser to shortcut the creation of new content |
element. appendChild() |
DOM element |
null |
add a DOM node as child of another node |
element. removeChild() |
DOM element |
null |
remove a child DOM node from the parent |
element. insertBefore() |
DOM element |
null |
add a DOM node in relation to other siblings, not just at the end |
Modifying the DOM with Prototype
Prototype favors the use of innerHTML to modify the DOM. It enhances this with the Insertion namespace, and, more recently, an insert method on the DOM element class itself.
Function |
arguments |
notes |
Insertion.Top Insertion.Bottom Insertion.Before Insertion.After |
DOM element, string (HTML content) |
version 1.5: Object that inserts HTML content into element alongside existing content. |
Element.update() |
string (HTML content) |
version 1.6: overwrites content in element |
Element.insert() |
HTML content or hash of content |
version 1.6: Can insert a single piece of content, or multiple pieces in one go |
Element.remove() |
none |
all versions: removes the calling element (and its children) from the page |
Prototype provides no support for building DOM elements programmatically, but the Scriptaculous library adds a DOMBuilder object to the mix.
Modifying the DOM with jQuery
jQuery is based around selecting sets of DOM elements, and it provides methods for manipulating sets of DOM elements in bulk. (These can be used on sets of one element too!) The methods here all operate on a set of DOM nodes returned from a selector.
Function |
arguments |
notes |
$.html() |
string (HTML content) |
simple wrapper around innerHTML, will duplicate content for each element in the set |
$.append() $.prepend() $.before() $.after() |
string (HTML content) |
insert content into node(s) alongside existing content |
$.appendTo() $.prependTo() $.insertBefore() $.insertAfter() |
string (selector rule) or DOM element |
argument is the target element or elements, to which the current node will be moved to. If multiple targets are present, the nodes being appended will be copied to each one |
$.remove() |
none |
remove all elements in set from the page |
$.empty() |
none |
empty all elements in the set of their content |
$.wrap() |
string (HTML) or DOM element |
wrap each element in set individually with a copy of the content provided in argument |
$.wrapAll() |
string (HTML) or DOM element |
wrap all elements in the set as a single unit with the content provided in argument |
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}