Chapter 4 Java Script and the Document Object

Chapter 4 Java. Script and the Document Object Model

Chapter Objectives • Describe the basic features of the Java. Script programming language. • Introduce the Browser Object Model and how to manipulate it using Java. Script. • Introduce the Document Object Model and how to modify it using Java. Script. • Describe how to manipulate Web page styles using Java. Script. • Describe how to handle Web browser events in Java. Script.

Java. Script – the J in Ajax • Java. Script is an interpreted programming language that is predominantly used to add dynamic behavior to Web pages. All modern Web browsers include an interpreter that is capable of executing Java. Script code. • Ecma International standardized the language as ECMA-262, which is a vendor-neutral language specification called ECMAScript. Mozilla’s Java. Script and Microsoft’s JScript (mostly) now conform to ECMA-262 Edition 3. Despite the name of the standard the name Java. Script is commonly used. • Java. Script is a full-featured language that is loosely-typed and includes object-oriented capabilities. Java. Script has support for different datatypes, various statements including if/else, switch, and different kinds of loops, notation for defining functions that will accept arguments and return a value, exception-handling, notation for defining and creating objects, and support for inheritance. • In Java. Script you do not specify a type when declaring variables, objects map property names to arbitrary property values, and inheritance is prototype-based – there is no formal notion of a class in Java. Script

Identifiers and Comments • Identifiers are used to name variables, functions, and labels. The first character of an identifier must be a letter, underscore (_), or dollar sign ($). Subsequent characters can be a letter, a digit, an underscore, or a dollar sign. You can’t use any of the Java. Script reserved words as identifiers. • Single-line comments begin with two forward slashes (//). Multiline comments are opened with a forward-slash followed by an asterisk (/*) and closed with an asterisk followed by a forwardslash (*/). // This comment is restricted to one. /* This comment can span multiple lines. */ /* This comment ends here */ causing an error here */

Datatypes and Values • Java. Script supports the datatypes Null, Undefined, Number, Boolean, String, and Object. They can be divided into two categories, primitive types and reference types. Object is the only reference type, the rest are primitive types. The primitive types Number, Boolean, and String have associated global wrapper objects. • Because Java. Script is loosely typed, any datatype can be used in place of any other datatype and Java. Script will automatically perform a conversion.

• Null – Represents a null, empty, or non-existent reference. • Undefined – Returned when you use a variable that has been declared but never assigned a value or you use an object property that does not exist. Values null and undefined are not identical because they are two distinct values, however they do evaluate to equal because they both indicate an absence of value. • Number – The set of values defined by the double-precision 64 -bit format of the IEEE 754 standard, and the special Na. N ("Not-a-Number") and Infinity (positive and negative) values. This single datatype encompasses both integer and floating-point values. Supports hexadecimal (0 x 1 F), octal (037), and exponential notation (5. 43 e 12 or 5. 43 E 12).

• Boolean – Has exactly two values true and false, and can be converted to and from other datatypes. • String – The datatype for all string values. String values can be defined usingle quotes ('hello') or double quotes ("hello"). Java. Script supports escape syntax ('that's cool'), and Unicode (e. g. , u. XXXX). Strings are not of type Object yet you can use object notation. For example: "hello". length "hello". char. At(0) Strings can be concatenated using the + operator. For example: "Hello " + 5 + " times. “ Strings in Java. Script are immutable and compared by value.

• Object – Unordered collections of values, called properties, where each property may contain a primitive value, object, or function. Everything in a Java. Script object is a property. When a function is assigned to a property of an object it is called a method. To create an object you either use a constructor function or literal notation. o = new Object(); // Creates an empty object. o = {}; // Also creates an empty object. Object literal notation is simply a set of comma-separated name/value pairs inside curly braces. my. Obj = { name: "Richard Allen", address: { city: "Atlanta", state: "GA" }, get. Name: function() { return this. name; } } You can dynamically add and delete properties of an object.

Primitive versus Reference Types: Java. Script primitive types are manipulated by value and reference types are manipulated by reference. “By value” means that the value is copied when passed as a function argument or assigned as a variable. “By reference” means that a new reference is made to the value instead of copying the value. The only reference type in Java. Script is Object, which means that all objects including built-in objects, user defined objects, and special types of objects like arrays and functions are manipulated by reference.

Primitive Datatype Wrapper Objects: Java. Script defines objects for the primitive types Boolean, Number, and String that wrap the primitive value and provide properties and methods to manipulate the value. They are automatically created for you by Java. Script when necessary – when you use a primitive value in an Object context. For example, when you have code like "12, 51, 31". split(", "), Java. Script creates an instance of the String object to handle the split() method call and then discards the object when done. You use the new operator to create an explicit instance of a wrapper object. b = new Boolean(false); // Construct a Boolean object. if (b) { // Object references evaluate to true. … }

Built-In Objects and Host Objects: The Java. Script interpreter creates a unique global object before executing any Java. Script code. Creating a top-level variable in Java. Script creates a property of the global object. The global object contains several properties including built-in objects and host objects supplied by the host environment. The host environment for client-side Java. Script is the Web browser. ECMAScript standardizes several built-in objects, which are collectively called the Java. Script core – the wrapper objects (Number, Boolean, and String), the Object object, Array, Date, and Math objects, a regular expression object (Reg. Exp), a Function object, an Error object (and several derivatives), and many built-in functions like parse. Int() and parse. Float(). In top-level code you can refer to the global object using the this keyword, or the global window or self properties.

Variables: Use the var keyword to associate a name with a value. Datatypes are not specified. The initial value, if not specified, is undefined. Variables declared outside a function using the var keyword become properties of the global object. If the var keyword is not used the variable is created as a property of the global object. Notice in the examples that variables can be reassigned any datatype. var my. Var = 0; // Declares my. Var and assigns it a Number my. Var = "hello"; // my. Var is assigned a String var my. Var = true; // my. Var is assigned a Boolean my. Var = { index: 0, count: 2 }; // my. Var is assigned an Object Statements: Statements in Java. Script can optionally end in a semicolon or a line break. Eliminating semicolons is considered sloppy programming and can lead to bugs. a = 1 b = 2;

Scope: Variables in Java. Script are only visible from within the object in which they were declared. Variables with global scope (called global variables) are variables that were declared as properties of the global object (either implicitly or explicitly) and are visible anywhere in your Java. Script program. Variables with local scope (called local variables) are declared within a function or as properties of some object other than the global object and are only visible within that object. If you declare a local variable in a function with the same name as an existing global variable, the local variable takes precedence over the global variable. You should always use the var keyword to declare variables. Java. Script does not have blocklevel scope, so all variables declared anywhere in a function are defined throughout the function, even before the function is executed.

Functions: Defines a block of code that can be invoked any number of times; are first class objects that can be assigned to variables and passed around; can optionally specify any number of parameters and return a single value. The following example essentially defines the global variable say. Hello and assigns it a function object. function say. Hello() { return "hello"; } Or define an anonymous function using a function literal: var say. Hello = function say. Hello() { return "hello"; }

Optional and variable-length arguments: Functions can be passed any number of parameters even if not declared in the function definition. Parameters declared but not passed are assigned the value undefined. Functions have a built-in arguments property that references an array-like Arguments object. function add() { var result = 0; for (var i = 0; i < arguments. length; i++) { result += arguments[i]; } return result; } The arguments object also provides the property callee that refers to the function currently being executed. function(x) { return x * arguments. callee(x – 1); }

Lexical Scoping and Closures: Functions use the scope in which they are defined, not the scope in which they are executed – lexical scoping. When a function is defined the current scope chain is saved and becomes part of the internal state of the function. The scope chain includes, in order, the function's Arguments object, parameters, local variables, and then any containing objects from inside out in order of containment. The last item in the scope chain is the global object. Java. Script functions are closures – the combination of the code to be executed and the scope to be executed in. function create. Function(x) { return function() { return x; }; } var five. Function = create. Function(5); var ten. Function = create. Function(10); alert(five. Function()); // Displays 5 alert(ten. Function()); // Displays 10

apply() and call(): When a function is a property of an object it is called a method. All Java. Script functions have builtin methods, apply() and call(), that allow a function to be invoked as if it were a method of another object, in other words, they change a function’s scope chain. The method parameters are: the object on which the function should be invoked – becomes the value of this; and the parameters that should be passed to the function – call() accepts a variable list of parameters, while apply() accepts an array. var Richard = { first. Name: "Richard" }; var Kelly = { first. Name: "Kelly" }; var display. Name = function(last. Name) { alert(this. first. Name + " " + last. Name); }; display. Name. call(Richard, "Allen"); // "Richard Allen" display. Name. call(Kelly, "Allen"); // "Kelly Allen"

Arrays: A special form of object that provides the ability to reference its properties using a zero based nonnegative integer index and a special length property. The length property holds the current length of the array and can be set to a different value to increase or shorten the length of the array. Arrays can contain any combination of datatypes, and dynamically grow to hold new elements that are added to them. Can use the Array() constructor: var my. Array = new Array(50); // Length of 50 my. Array. length = 0; // Length is now 0 my. Array[0] = 0; // Dynamically grows my. Array[1] = 1; my. Array[3] = 3; // Length is now 4 with 1 undefined Otherwise, the array literal notation is much more concise: var empty. Array = []; // Create empty array var multitype. Array = [true, 5, "hi", { x: 1 }, [1, 2]]; var sparse. Array = [1, , 5]; // Length of 5 with 3 undef

Regular Expressions: Can be created using the Reg. Exp() constructor or a regular expression literal notation. The following examples create and use a regular expression object that matches the word "ajax", case insensitive. var reg. Exp 1 = /bajaxb/i; var reg. Exp 2 = new Reg. Exp("\bajax\b", "i"); // Displays "com. hello. common" alert("com. ajax. common". replace(reg. Exp 1, "hello"); // Displays "com. blah. common" alert("com. AJAX. common". replace(reg. Exp 1, "blah"); // Displays "com. hello. common" alert("com. ajax. common". replace(reg. Exp 2, "hello"); // Displays "com. blah. common“ alert("com. AJAX. common". replace(reg. Exp 2, "blah");

Error Handling and Error Objects: Error objects are thrown by the Java. Script interpreter when a runtime error occurs – examples include Error, Eval. Error, Range. Error, Reference. Error, Syntax. Error, Type. Error, and URIError objects contain a message property. You can throw exceptions by using the throw keyword followed by an expression that evaluates to any type. throw new Error("My error message"); throw "An error message"; You can define an exception handler using the try/catch/finally statement. try { return (pts. y 2 - pts. y 1) / (pts. x 2 - pts. x 1); } catch (e) { alert("Error: " + e. message); }

Constructor Functions and Simulated Classes • Java. Script doesn't yet support true classes, however, you can simulate classes using constructor functions and prototype objects. • A constructor function looks like any other function in Java. Script except it typically adds properties to this and has no return statement. Example: function Person(id, first. Name, last. Name) { this. id = id; this. first. Name = first. Name; this. last. Name = last. Name; } • In Java. Script, this always refers to the “owner” of the function being executed. When used in a top-level function, this refers to the global object.

• To create an instance of a class in Java. Script you must use the new operator. The new operator creates a new object with no properties and then invokes the specified function, passing the new object as the value of the this keyword. The constructor function can then use this keyword to initialize the new object. var john = new Person(1, "John", "Doe"); • If the constructor function returns a value, that value becomes the result of the new operator and the newly created object is discarded. • The new operator also sets the prototype of the object, which is the value of the prototype property of the constructor function. Every function in Java. Script automatically gets a prototype property when the function is defined.

• The prototype property is initially assigned an object with a single constructor property that refers to the associated constructor function. Every property of the prototype object can be accessed as if it is a property of the object created by the new operator. Example: Person. prototype. compare. By. Last. Name = function(other) { if (!other || !(other instanceof Person)) { throw new Error( "Invalid argument passed to compare. By. Last. Name(): " + other); } if (this. last. Name > other. last. Name) { return 1; } if (other. last. Name == this. last. Name) { return 0; } return -1; } var john = new Person(1, "John", "Doe"); var jane = new Person(2, "Jane", "Doe"); alert(john. compare. By. Last. Name(jane)); // Displays 0.

Instance Properties and Methods: In Java. Script you can say that the properties assigned to this in a constructor function are instance properties of the class defined by the constructor function. These properties are assigned to the object created by the new operator, which you can think of as the instance of the class. The “class” is defined by the constructor function (the term “class” is used loosely here). You can define instance methods in Java. Script by assigning a method to the prototype property of a constructor function (see compare. By. Last. Name() in previous slide). However, in Java. Script, functions are objects, so a function can also be assigned to an instance property in a constructor function, thereby creating an instance method of the class defined by the constructor function (see next slide).

Class Properties and Methods: To create class properties and methods in Java. Script you assign properties directly to the constructor function (again, “class” is used loosely here). function Pwd. Utils() { } Pwd. Utils. SPECIAL_CHARS = "~`!@#$%^&*()_-+={}[]|\: "; '<>, . ? /"; Pwd. Utils. validate. Password = function(pwd) { for (var i = 0; i < Pwd. Utils. SPECIAL_CHARS. length; i++) { if (pwd. index. Of(Pwd. Utils. SPECIAL_CHARS. char. At(i)) > -1) { return; } } alert("Passwords must contain one character from “ + Pwd. Utils. SPECIAL_CHARS); }; Pwd. Utils. validate. Password("hello"); // Displays error message.

Private Members: Java. Script does not have visibility modifiers that allow you to make members of a class private. But you can achieve private members with a technique using closures. function Person(first. Name, last. Name) { // Private instance members. var first. Name = first. Name; var last. Name = last. Name; // Priviledged methods that have access to private instance members. this. get. First. Name = function() { return first. Name; } this. set. First. Name = function(name) { first. Name = name; } this. get. Last. Name = function() { return last. Name; } this. set. Last. Name = function(name) { last. Name = name; } } var john = new Person("John", "Doe"); alert(john. first. Name); // Displays alert(john. get. First. Name()); // Displays alert(john. get. Last. Name()); // Displays john. set. First. Name("Jane"); alert(john. get. First. Name()); // Displays undefined. John. Doe. Jane.

• Inheritance: The constructor property of the prototype object references the constructor function with which the prototype is associated. Objects created from a constructor function using the new operator inherit all properties from the prototype object of that constructor function – even if the properties were added after the instance was created. When a property of an object is referenced, Java. Script checks to see if that property is a member of the object. If not, then the prototype object is checked for the property. Because the prototype is an object, it too can have an associated prototype, forming a chain of prototypes, which is the inheritance hierarchy. Each prototype in the chain is checked. If the property is not found, undefined is returned.

function User(id, first. Name, last. Name, user. Name) { // Invoke the Person constructor function, but use the // new object assigned to User's this keyword. Hence, // the use of the call() function. This is called // constructor chaining. Person. call(this, id, first. Name, last. Name); // Initialize User properties. this. user. Name = user. Name; } // We must assign the User prototype an instance of Person // to subclass Person. Otherwise we will subclass Object. User. prototype = new Person(); // We must reassign the constructor property to the User // function otherwise the constructor for User objects // will be the Person function. User. prototype. constructor = User; var john = new User(1, "John", "Doe", "john. doe"); alert(john instanceof Person); // Displays true. alert(john instanceof User); // Displays true. alert(john. first. Name); // Displays John.

Embedding Java. Script in HTML • Put Java. Script code between opening and closing <script> tags. The Web browser processes an HTML page from top to bottom, executing any Java. Script it finds between <script> tags along the way. You can put as many <script> tags as you like anywhere between the opening and closing <head> or <body> tags. <html> <body> <script> window. alert("I'm here because of Java. Script. "); </script> </body> </html>

• Import an external Java. Script file using the src attribute of the <script> tag. The src attribute specifies the URL of the file containing Java. Script code. Java. Script files typically have a. js extension and only contain Java. Script code. Inside the Java. Script file you do not need (and cannot have) <script> tags or any other HTML tags. <script src="javascript/form. Util. js"></script> • Assign Java. Script to the event handler attribute of an HTML tag. <button onclick="window. alert('I have been clicked!'); "> Click me!</button> • Assign a single line of Java. Script code to a URL prefixed by the javascript: pseudoprotocol. <a href="javascript: window. open('my. Page. html'); void 0; "> Click me!</a>

• The best practice is to import your Java. Script code using the src attribute of the <script> tag. This technique has several benefits over the others. It completely separates your Java. Script from the HTML code, which makes understanding, reading, and maintaining the code much easier. The Java. Script code can be easily reused across different Web pages. The Java. Script file can be cached by the Web browser, which makes future page loads, and loads of other pages that use the same file faster. • The rest of the techniques for embedding Java. Script in HTML are discouraged, particularly the technique of assigning Java. Script code to an HTML event handler attribute and the use of the javascript: pseudoprotocol. You can accomplish everything you need with external Java. Script files.

The Browser Object Model (BOM) window navigator screen history location document frames[] • BOM defines a set of host objects and their relationships, which are used to manipulate or obtain information about the browser • BOM is a de-facto standard that you can rely on all modern browsers providing, however, it is not exactly the same in each browser – only a core set of objects are the same • The document object contains the Document Object Model (DOM) • The frames[] array contains references to all the frames loaded in the browser window

window: The global object in client-side Java. Script. Properties of the window object can be referenced with or without qualifying them with “window. ”. Some properties and methods of the window object are given below. • document – The document object (DOM). • frames – An array of all the frames loaded in the window. • history – The history object. • location – The location object. • alert() – Displays a dialog box with a message and an OK button. • open() – Opens a new browser window. • set. Timeout() – Evaluates an expression after a specified number of milliseconds.

• The following is an example using the window object, and the result when executed in Firebug. Selecting the OK button will navigate the browser to the Web site http: //ajaxian. com. Or you could enter a different address. window. location. href = window. prompt("To where would you like to navigate? ", "http: //ajaxian. com/");

navigator: Provides information about the browser including the browser vendor, version, platform, language, and supported MIME types. The following are commonly used properties. • app. Code. Name – The internal code name of the browser. • app. Name – The official name of the browser. • app. Version – The version of the browser as a string. • mime. Types – A list of the MIME types supported by the browser. • platform – The hardware platform on which the browser is running. • user. Agent – The string the browser sends in its USERAGENT HTTP header.

• The following is an example that displays the value of the navigator properties listed above. var props = "app. Code. Name: " + window. navigator. app. Code. Name + "n" + "app. Name: " + window. navigator. app. Name + "n" + "app. Version: " + window. navigator. app. Version + "n" + "mime. Types: " + window. navigator. mime. Types + "n" + "platform: " + window. navigator. platform + "n" + "user. Agent: " + window. navigator. user. Agent; window. alert(props);

screen: encapsulates information about the display on which the window is being rendered, including the size of the screen and the number of colors it can display. Some properties of the screen object are listed below. • avail. Height, avail. Width – The height and width of the screen in pixels, minus the space required by operating system features, like a desktop taskbar. • height, width – The height and width of the screen in pixels. • color. Depth – The bit depth of the color palette of the screen. The following example displays the width of the screen in pixels. window. alert(window. screen. width());

history: maintains a list of the browser window’s recently visited URLs. Scripts cannot directly access this list; however, scripts can call methods of the history object to move forward or backward in the list, similar to using the browser’s Back and Forward buttons. The history object methods are listed below. • back() – Move backward in a window’s (or frame’s) browsing history. • forward() – Move forward in a window’s (or frame’s) browsing history. • go() – Takes an integer argument and will move any number forward (for positive arguments) or backward(for negative arguments) in the browsing history. window. history. go(-3);

location: encapsulates information about the document currently loaded in the browser window (or frame). You can use the location object to change the document loaded by the browser window by assigning a URL to window. location. href. Some properties of the location object are listed below. • host – The host name and port number (www. w 3. org: 80). • hostname – The host name without the port number (www. w 3. org). • href – The entire URL (http: //www. w 3. org: 80/TR/html 401/) • pathname – The path, relative to the host (/TR/html 401). • port – The port number of the URL (80). • protocol – The protocol of the URL (http: ).

frames[]: If the page being viewed has frames (<frameset> or <iframe>), then if contains a window object for the page, as well as one window object for each frame. The window object for the page containing the frames has a built -in frames[] array with references to the window object for each of its frames. Hench, window. frames[0] refers to the window object of the first frame. The window object of the top-level document (the page being viewed that containing all the frames) can be referenced from anywhere using the built-in top property. Because frames can be nested to any arbitrary depth there’s also a built-in parent property that refers to the containing window of the current frame. In the top-level window, the properties self, window, parent, and top are all self references.

Document Object Model (DOM) • A standard platform- and language-neutral programming interface for building, accessing, and manipulating valid HTML and well-formed XML documents. • An interface that must be implemented in an actual programming language to be useful. • Ultimate goal is to make it possible for programmers to write applications that work properly on all browsers and servers, and on all platforms. • A tree-based model in which the entire document is parsed and cached in memory as a tree structure of objects called nodes.

Node Document HTMLHtml. Element HTMLHead. Element Document. Fragment Element HTMLTitle. Element Character. Data Text HTMLBody. Element Attr Comment HTMLHeading. Element Entity HTMLParagraph. Element Notation HTMLInput. Element HTMLTable. Element Core DOM HTML DOM

• When a Web browser parses an HTML document, it creates an instance of HTMLDocument, which encapsulates the entire document – it becomes the root of the tree structure. The Web browser’s DOM parser creates objects for every part of the document, all of which implement the Node interface. An HTML document is mostly parsed into three basic nodes: Element nodes, Text nodes, and Attr nodes. For example, the following HTML parses into the following tree. <html xmlns="http: //www. w 3. org/1999/xhtml"> <head><title>XHTML Test</title></head> <body> <h 1>Heading Content</h 1> <p>First Paragraph Content</p> <p id="p 2">Second Paragraph Content</p> </body> </html>

HTMLDocument HTMLHtml. Element <html> HTMLHead. Element <head> Attr xmlns=”http: //www. w 3. org/1999/xhtml” HTMLBody. Element <body> Attr id=”p 2” HTMLTitle. Element <title> HTMLHeading. Element <h 1> HTMLParagraph. Element <p> Text XHTML Test Text Heading Content Text First Paragraph Content Text Second Paragraph Content

• The terminology for the relationships between the nodes is the same as that used for family trees. The node directly above a node in the hierarchy is the parent of that node (e. g. , <html> is the parent of <body>). All nodes have exactly one parent, except the root node, which has no parent (HTMLDocument in the figure above is the root of the HTML hierarchy; however, <html> is considered the root of the document that was parsed). The nodes directly below a node are the children of that node (e. g. , <head> and <html> are both children of <html>). Nodes with no children are called leaves. Nodes at the same level and with the same parent are siblings (e. g. , <head> and <body> are siblings). All nodes below a node in the hierarchy are the descendants of that node. All nodes above a node in the hierarchy are ancestors of that node.

DOM Accessors Document interface Element document. Element: The document that was parsed, which is always <html> for an HTML document. There is only one document element in an instance of Document. The document. Element property of the Document interface is a convenient reference to the document element. Example: document. Element. get. Attribute("xmlns"); Element get. Element. By. Id(DOMString element. Id): Returns the element with an id attribute equal to the given ID or null if no object with that ID exists. You can assign an id attribute to any element in an HTML document. The ID you choose must be unique within the HTML document. Example: var second. Paragraph = document. get. Element. By. Id("p 2");

Node. List get. Elements. By. Tag. Name(DOMString tagname): Returns a Node. List of all elements with the given tag name or an empty list if no tags have the given name. The method also accepts an asterisk ("*") as a wildcard to return all elements. var paragraphs = document. get. Elements. By. Tag. Name("p"); for (var i = 0; i < paragraphs. length; i++) { alert(paragraphs. item(i). first. Child. node. Value); // Or use array notation: paragraphs[i]. first. Child. node. Value } Element interface DOMString get. Attribute(DOMString name): Returns the value for the attribute with the given name. Node. List get. Elements. By. Tag. Name(DOMString name): Similar to the method with the same name in the Document interface, except only searches below the Element.

Node interface DOMString node. Name DOMString node. Value: Returns the name of the node and the value of the node. The name of the node is the tag name for nodes representing HTML tags, such as “HEAD” for the <head> tag. For other nodes, it’s a value representative of the node as defined by the DOM (e. g. , “#text” for Text nodes). The value of the node is really only useful for nodes that contain text, like the Text node, because for most other nodes the value is null. Node. List child. Nodes: Returns a Node. List containing all of the nodes immediate children. The child. Nodes property does not return grandchildren, i. e. , a child of a child. Only Element nodes have children.

Node parent. Node first. Child last. Child previous. Sibling Node next. Sibling: parent. Node returns the parent node (only Element nodes are capable of being parents, but all nodes, except for Document, have a parent). first. Child returns the first node in the Node. List returned by child. Nodes, while last. Child returns the last node in the list. When two nodes have the same parent they are called siblings, which means both the nodes appear in the Node. List returned by the parent’s child. Nodes property. previous. Sibling returns the sibling node that comes before it in the child. Nodes list, while next. Sibling returns the node that comes after it.

DOM Modifiers Document interface Element create. Element(DOMString tag. Name): Creates an Element of the given type. The given tag. Name is the name of the element you wish to create. The new node must be added to an document using the Node methods. Example: var hr. Element = document. create. Element("hr"); Text create. Text. Node(DOMString data): Creates a new Text node containing the given text. The new node must be added to an document using the Node methods. Example: var paragraph. Text = document. create. Text. Node("Third Paragraph Content"); Node import. Node(Node imported. Node, boolean deep): Imports a node from another document to this document without modifying the other document.

import. Node() example: var other. Paragraph = window. parent. frames[1]. get. Elements. By. Tag. Name("p")[0]; var new. Paragraph = document. import. Node(other. Paragraph, true); Element interface void set. Attribute(DOMString name, DOMString value): Adds an attribute to the Element or, if the attribute already exists, sets the attribute to the given value. Example: document. get. Elements. By. Tag. Name("p")[0]. set. Attribute("id", "p 1"); void remove. Attribute(DOMString name): Removes the attribute with the given name. If the attribute doesn’t exist, then the method has no effect.

Node interface Node insert. Before(Node new. Child, Node ref. Child): Inserts the new child in the child. Nodes list before the given existing child and returns the inserted node. Example: var new. Paragraph = document. create. Element("p"); var first. Paragraph = document. get. Elements. By. Tag. Name("p")[0]; document. body. insert. Before(new. Paragraph, first. Paragraph); Node replace. Child(Node new. Child, Node old. Child): Replaces an existing child with a new child and returns the old child node. Example: var h. Rule = document. create. Element("hr"); var first. Paragraph = document. get. Elements. By. Tag. Name("p")[0]; document. body. replace. Child(h. Rule, first. Paragraph);

Node remove. Child(Node old. Child): Removes the specified child and returns it. Example: var first. Paragraph = document. get. Elements. By. Tag. Name("p")[0]; document. body. remove. Child(first. Paragraph); Node append. Child(Node new. Child): Adds the given new child to the end of the child. Nodes list and returns the newly added node. Example: var new. Paragraph = document. create. Element("p"); document. body. append. Child(new. Paragarph);

Manipulating Styles • The DOM exposes imported style sheets as instances of the CSSStyle. Sheet interface. Each style sheet object exposes the style rules, which you can inspect and modify. You access the style sheet objects via the document. style. Sheets array. • However, the more common method of dynamically modifying style is via the Element interface. The DOM exposes the styles for each Element via the Element’s style and class. Name properties. • The style property returns an instance of the CSSStyle. Declaration interface, which contains properties of all the style attributes supported by the browser’s DOM

• For example, the following code sets the color of the document’s first paragraph to red. var first. Paragraph = document. get. Elements. By. Tag. Name("p")[0]; first. Paragraph. style. set. Property("color", "#FF 0000", ""); • The common way to access and set the style properties of an Element is via the CSS 2 Properties interface, which contains a publicly accessible property for every style attribute defined by the DOM. In most modern browsers the object returned by the style property implements CSS 2 Properties. For example: var first. Paragraph = document. get. Elements. By. Tag. Name("p")[0]; first. Paragraph. style. color = "#FF 0000";

• When you need to change several styles for an Element at the same time it is more convenient to define the rules in a style sheet for a class selector, and then use Java. Script to set the selector assigned to the Element’s class. Name property. For example, if the following styles were defined, . normal { color: #000000; font-style: normal; }. styled { color: #FF 0000; font-style: italic; } then we could use the following code to switch the styles. function toggle. Styles() { var p 2 = document. get. Element. By. Id("p 2"); p 2. class. Name = (p 2. class. Name == "normal") ? "styled" : "normal"; }

Handling Events • The Web browser generates an event whenever something interesting happens, and you can write Java. Script code to respond to those events by registering event handlers. This is called event-driven programming. • There are two standard mechanisms for even handling – DOM Level 0 and DOM Level 2. • DOM Level 0 event handling involves assigning event handlers to HTML objects. For example, the following assigns Java. Script code to handle the event that occurs when the user clicks on the button. <button onclick="document. get. Element. By. Id('p 2'). class. Name = (document. get. Element. By. Id('p 2'). class. Name == 'normal') ? 'styled' : 'normal'; ">Toggle Styles</button>

• A better practice than assigning Java. Script code to the HTML attribute is to assign a Java. Script function to the property of the Java. Script object. This practice fully separates the HTML code and the Java. Script code, making both of them easier to read and maintain. For example: function toggle. Styles() { var p 2 = document. get. Element. By. Id("p 2"); p 2. class. Name = (p 2. class. Name == "normal") ? "styled" : "normal"; } document. get. Elements. By. Tag. Name("button")[0]. onclick = toggle. Styles; • Because the event handler properties reference Java. Script functions, you can also directly invoke an event handler in your code like the following code illustrates. document. get. Elements. By. Tag. Name("button")[0]. onclick();

Partial List of Event Handlers Event Handler Trigger onblur The element loses the input focus, which is typically caused by the user clicking on another element or tabbing to another element. onchange The element loses focus and its value has changed since it gained focus. onclick The user clicks on the element (mouse press and release, or keyboard equivalent). onfocus The element gained the input focus. onkeypress onload onmousemove onmouseout onmouseover onreset The user pressed and released a keyboard key. The document finished downloading to the browser. The user moved the mouse off the element. The user moved the mouse over the element. Form reset was requested; typically from the user clicking the form reset button. onselect onsubmit The user selected text. A request was made to submit a form; typically when a user clicks on the button of a form with type="submit". A document is about to unloaded from a window or frame. onunload

• You can generally cancel the browser’s default response to an event by returning false from the event handler. Events whose default action can be canceled by returning false from the handler are onclick, onkeydown, onkeypress, onmousedown, onmouseup, onreset, and onsubmit. <script type="text/javascript"> function validate. Form(form) { if (form. input. value. length == 0) { return false; } return true; } </script> <form action="do. Something" onsubmit="return validate. Form(this); "> <input name"input" type="text"> <button type="submit">Submit</button> </form>

• DOM Level 0 event handling is convenient and easy to use, but it’s limiting. For example, you can’t register more than one handler for the same event. • W 3 C defined DOM Level 2 to overcome these limitations. • In DOM Level 2 the event is propagated through three phases: (1) Capturing phase: the event is propagated from the top of the DOM tree down to the element on which the event occurred, called the target node. If any ancestors of the target node have a registered capturing event handler for the event, those handlers are run when the event passes by. (2) Any event handlers registered on the target node are run. (3) Bubbling phase: the event propagates back up the DOM tree (or bubbles up) and any registered event handlers for the event are executed.

The diagram below illustrates the propagation that would occur if the user clicked on the button in the listing. 1 document 9 2 <html> 8 3 <body> 7 4 <form> 6 <button> 5 <html> <body> <form action="do. Something"> <input name="input" type="text"> <button type="submit">Submit</button> </form> </body> </html>

• When invoked, the event handlers are passed an instance of the Event interface. If the event was generated by the use of the mouse, then the event is an instance of the Mouse. Event interface, which extends the UIEvent interface, which in turn extends Event. • During event propagation any event handler can stop further propagation by calling the stop. Propagation() method of the Event object. • If the event normally causes some default browser behavior, like following the link of an <a> tag, then the event handler can prevent the default behavior by calling the prevent. Default() method of the Event object.

• All nodes in DOM Level 2 implement the Event. Target interface, which defines the methods add. Event. Listener() and remove. Event. Listener(), for adding/removing the event handlers to be invoked in response to a particular event. • The first parameter specifies the event for which you want to “listen” (e. g. , submit). The second parameter specifies the event listener function that should be invoked when the event passes by the node. The third parameter is a Boolean that specifies whether the listener is to be used during the capturing phase (true) or the bubbling phase (false). • You can add as many listeners to a node as you like, even for the same event. They will all be invoked when the event occurs, however, the DOM does not guarantee in which order the listeners will be invoked.

• The following code demonstrates adding and removing a listener for the submit event on the <submit> tag function validate. Form(/* instance of Event */ event. Obj) { // The target is the <form> var form = event. Obj. target; if (form. input. value. length == 0) { // Prevent the form from being submitted. event. Obj. prevent. Default(); } // Demonstrate removing a listener. form. remove. Event. Listener("submit", validate. Form, false); } var form = document. get. Elements. By. Tag. Name("form")[0]; // Add validate. Form() as a submit event listener. form. add. Event. Listener("submit", validate. Form, false);

• All modern browsers except Microsoft Internet Explorer (IE) support the DOM Level 2 event model. The IE event model does not have a capture phase, has different event objects, and a different method for registering events. • The IE methods for registering and unregistering event listeners are attach. Event() and detach. Event(), respectively. The IE attach. Event() method requires “on” to prefix the event name, and the IE event handling mechanism does not pass the event to the listener like DOM does, but instead assigns it to the window. event property.