Basic DOM Scripting Objectives
Total Page:16
File Type:pdf, Size:1020Kb
Basic DOM scripting Objectives Applied Write code that uses the properties and methods of the DOM and DOM HTML nodes. Write an event handler that accesses the event object and cancels the default action. Write code that preloads images. Write code that uses timers. Objectives (continued) Knowledge Describe these properties and methods of the DOM Node type: nodeType, nodeName, nodeValue, parentNode, childNodes, firstChild, hasChildNodes. Describe these properties and methods of the DOM Document type: documentElement, getElementsByTagName, getElementsByName, getElementById. Describe these properties and methods of the DOM Element type: tagName, hasAttribute, getAttribute, setAttribute, removeAttribute. Describe the id and title properties of the DOM HTMLElement type. Describe the href property of the DOM HTMLAnchorElement type. Objectives (continued) Describe the src property of the DOM HTMLImageElement type. Describe the disabled property and the focus and blur methods of the DOM HTMLInputElement and HTMLButtonElement types. Describe these timer methods: setTimeout, setInterval, clearTimeout, clearInterval. The XHTML for a web page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Image Gallery</title> <link rel="stylesheet" type="text/css" href="image_gallery.css"/> </head> <body> <div id="content"> <h1 class="center">Fishing Image Gallery</h1> <p class="center">Click one of the links below to view the image.</p> The XHTML for a web page (continued) <ul class="center" id="imageList"> <li><a href="casting1.jpg" title="Casting 1"> Casting 1</a></li> <li><a href="casting2.jpg" title="Casting 2"> Casting 2</a></li> <li><a href="catchrelease.jpg" title="Catch and Release"> Catch and Release</a></li> <li><a href="fish.jpg" title="Fish">Fish</a></li> <li><a href="lures.jpg" title="Lures">Lures</a></li> </ul> <p class="center"> <img src="casting1.jpg" alt="Fishing Images" id="image" /> </p> <p class="center"><span id="caption"> Casting 1</span></p> </div> </body> </html> The DOM for the web page window document <html> Global Document Element <head> <body> Element Element <title> <style> <div> Element Element Element <h1> <p> <p> <p> Element Element Element Element Text Text <ul> <img> <span> Element Element Element <li> <li> <li> <li> <li> Text Element Element Element Element Element <a> <a> <a> <a> <a> Element Element Element Element Element Text Text Text Text Text The inheritance hierarchy for DOM nodes Node Document Element Attr CharacterData Text Comment Numerical values used to indicate the node type 1 Element 2 Attr 3 Text 8 Comment 9 Document Common properties of the Node interface nodeType nodeName nodeValue attributes parentNode childNodes firstChild lastChild How to determine if a node is an Element node var element = document.getElementById("imageList"); if (element.nodeType == 1) { alert( "imageList is an Element node!" ); } How to perform an action on each child node var element = document.getElementById("imageList"); var node, displayString; for (var i = 0; i < element.childNodes.length; i++) { node = element.childNodes[i]; displayString += node.nodeName + ": " + node.nodeValue + "\n"; } Two methods of the Node object hasChildNodes() hasAttributes() How to determine if a node has child nodes var element = document.getElementById("imageList"); if ( element.hasChildNodes() ) { alert( "imageList has child nodes!" ); } How to determine if a node has attributes var element = document.getElementById("imageList"); if ( element.hasAttributes() ) { alert( "imageList has attributes!" ); } One property of the Document interface documentElement How to use the documentElement property var htmlElement = document.documentElement; Three methods of the Document interface getElementsByTagName(tagname) getElementsByName(name) getElementById(elementId) How perform an action on all <a> tags var links = document.getElementsByTagName("a"); var displayString = ""; for ( var i = 0; i < links.length; i++ ) { displayString += links[i].nodeType + "\n"; } How find all the buttons in a radio button group var cardTypeButtons = document.getElementsByName("card_type"); for ( var i = 0; i < cardTypeButtons.length; i++ ) { alert( cardTypeButtons[i].nodeName ); } How to determine if an element with an id exists var element = document.getElementById("imageList"); if ( element ) { alert( "imageList found" ); } else { alert( "imageList not found" ); } One property of the Element interface tagName How to get the tag name of an element var element = document.getElementById("imageList"); alert("Tag name: " + element.tagName); Common methods of the Element interface hasAttribute(name) getAttribute(name) setAttribute(name, value) removeAttribute(name) getElementsByTagName(tagname) getElementsByName(name) How to test for and retrieve an attribute var list = document.getElementById("imageList"); if ( list.hasAttribute("class") ) { alert ("class: " + list.getAttribute("class") ); } How to change an attribute var image = document.getElementById("image"); image.setAttribute("border", "1"); How to remove an attribute var list = document.getElementById("imageList"); list.removeAttribute("class"); How to search for descendent elements var list = document.getElementById("imageList"); var items = list.getElementsByTagName("li"); Four properties of the Attr interface name value ownerElement specified How to use the name and value properties var list = document.getElementById("imageList"); var result = ""; for (var i = 0; i < list.attributes.length; i++) { result += list.attributes[i].name + " = " + list.attributes[i].value + "\n"; } alert(result); The dialog box that’s displayed The hierarchy for the HTMLElement nodes Node Element HTMLElement HTMLAnchorElement HTMLImageElement HTMLButtonElement HTMLInputElement How to get an id using the DOM Core method list.getAttribute("id") How to get an id using the DOM HTML attribute list.id URL for the complete list of HTMLElement types www.w3.org/TR/DOM-Level-2-HTML/html.html Two properties of an element id title How to get the id of an element var images = document.getElementsByTagName("img"); alert("first image id: " + images[0].id); How to get the title attribute of an element var links = document.getElementsByTagName("a"); alert("second link title: " + links[1].title); How to set the title attribute of an element var links = document.getElementsByTagName("a"); links[1].title = "New Title"; One property of an anchor element href How to get the href attribute of an anchor element var links = document.getElementsByTagName("a"); alert("second link href: " + links[1].href); One property of an image element src How to get the src attribute of an image element var imageElement = document.getElementById("image"); alert("image element src: " + imageElement.src); How to set the src attribute of an image element var imageElement = document.getElementById("image"); imageElement.src = "lures.jpg"; One property of an input or button element disabled How to disable an element var btnPlay = document.getElementById("btnPlay"); btnPlay.disabled = true; How to enable an element var btnPlay = document.getElementById("btnPlay"); btnPlay.disabled = false; How to toggle an element’s disabled property var btnPlay = document.getElementById("btnPlay"); btnPlay.disabled = ! btnPlay.disabled; Two methods of input and button elements focus() blur() How to set focus on an element var btnPlay = document.getElementById("btnPlay"); btnPlay.focus(); How to blur an element var btnPlay = document.getElementById("btnPlay"); btnPlay.blur(); Tags that have default actions for the click event Tag Default action for the click event <a> Load the page in the href attribute. <input> Submit the form if the type attribute is set to submit. <input> Reset the form if the type attribute is set to reset. <button> Submit a form if the type attribute is set to submit. <button> Reset a form if the type attribute is set to reset. DOM code that cancels the default action var event_handler = function (evt) { evt.preventDefault(); } IE code that cancels the default action var event_handler = function () { var evt = window.event; evt.returnValue = false; } Cross-browser code that cancels the default action var event_handler = function (evt) { // If the event object is not sent, get it if (!evt) evt = window.event; // for IE // Cancel the default action if (evt.preventDefault) { evt.preventDefault(); // for most browsers } else { evt.returnValue = false; // for IE } } Two mouse events onmouseover onmouseout The Rollover object type var Rollover = function ( imageId, newImageURL ) { var that = this; this.newImageURL = newImageURL; this.image = document.getElementById(imageId); // Validate node if ( ! this.image ) { throw new Error("Rollover: Image ID not found."); } if ( this.image.nodeType !== 1 || this.image.nodeName !== "IMG" ) { throw new Error( "Rollover: Image ID is not an img tag."); } // Copy original image URL this.oldImageURL = this.image.src; The Rollover object type (continued) // Attach event handlers this.image.onmouseover = function () { that.image.src = that.newImageURL; } this.image.onmouseout = function () { that.image.src = that.oldImageURL; } } How to create an image rollover The XHTML code for the image <img src="image1.jpg" id="image" /> The JavaScript code to create the rollover var rollover; window.onload = function () { rollover = new Rollover("image", "image2.jpg"); } How to preload an image with the Image object