HTML DOM

HTML DOMBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1Summary of the previous lectureWhat is JavaScript?Embedding JavaScript with HTMLJavaScript conventionsVariables in JavaScriptJavaScript operatorsInput output in JavaScriptJavaScript functionsConditional StatementsLooping StatementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.2OutlineDialog boxes in JavaScriptHTML Document Object Model (DOM)Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan31. Dialog boxes in JavaScriptJavaScript provides the ability to pickup user input or display small amounts of text to the user by using dialog boxes These dialog boxes appear as separate windows and their content depends on the information provided by the user1.1 Alert BoxAn alert box is simply a small message box that pops up and gives the user some informationAn alert dialog box is mostly used to give a warning message to the usersWhen an alert box pops up, the user will have to click "OK" to proceedSyntax:alert(“message”)1.1 Alert BoxStart of the functionDisplays an alert boxCalling the function1.2 Prompt boxA prompt box is often used if you want the user to input a value before entering a pageWhen a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input valueIf the user clicks "OK" the box returns the input valueIf the user clicks "Cancel" the box returns null1.2 Prompt boxStart of the functionPrompt box Calling the function1.3 Confirm boxA confirm box is often used if you want the user to verify or accept somethingWhen a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceedIf the user clicks "OK", the box returns true If the user clicks "Cancel", the box returns false1.3 Confirm boxUser inputconfirmationNot confirmed2. Document Object Model (DOM)Once html element are rendered (painted) in the browser window, browser can not recognize themTo create interactive web pages it is vital that the browser continues to recognize HTML elementsJavaScript enabled browsers do this because they recognize and uses DOM Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan112. Document Object Model (DOM)The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documentsAll HTML elements, along with their containing text and attributes, can be accessed through the DOMThe contents can be modified or deleted, and new elements can be createdBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan122. Document Object Model (DOM)The HTML DOM is platform and language IndependentIt can be used by any programming language like Java, JavaScript, and VBScriptThe HTML DOM can be thought of as a hierarchy moving from the most general object to the most specificBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan132. Document Object Model (DOM)Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan14WindowNavigatorDocumentHistoryLocationForms[ ]Array of formslinks[]Array of linksImages[]Array of imagesanchors[]Array of anchorsElement[ ] Array of element of formsTextboxes buttons select listResetfilesOptions[]li2. Document Object Model (DOM)document.forms[0].elements[0].valuedocument.images[0].srcdocument.links[0].href2.1 Retrieving HTML elementsThe getElementById() method is a workhorse method of the DOM It retrieves a specified element of the HTML document and returns a reference to itTo retrieve an element, it must have an unique iddocument.getElementById(“element-id”)Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan162.1 Retrieving HTML elementsThe returned reference can be used to retrieve element attributesdocument.getElementById(“element-id”).attributedocument.getElementById(“pic”).srcdocument.getElementById(“pic”).heightBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan172.1 Retrieving HTML elementsBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan18Function startsGetting reference to picAccessing AttributesImage tagSetting idCalling function2.2 Retrieving the text of an elementinnerHTML property defines both the HTML code and the text that occurs between that element's opening and closingdocument.getElementById(“element-id”).innerHTMLBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan192.2 Retrieving the text of an elementBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan20Id of paragraphCalling the functionParagraph textGetting reference to elementGetting text2.3 Getting value of attributesgetAttribute() method is used to retrieve values of attributesdocument.getElementById(“element-id”).getAttribute(“attribute-name”)document.getElementById(“pic”).getAttribute(“src”)Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan212.3 Getting value of attributesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan22Getting reference to elementUsing getAttribute function2.4 Setting value of attributessetAttribute() method is used to set values of attributesdocument.getElementById(“element-id”).setAttribute(“attribute-name”, ”Value”)document.getElementById(“pic”).setAttribute(“src”, ”abc.jpg”)Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan232.4 Setting value of attributesBasharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan24Setting Reference to elementChanging the value of attributeSummaryDialog boxes in JavaScriptHTML DOMRetrieving HTML elementsSetting HTML elementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan25Chapter 11. Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. Chapter 3,6, Learn JavaScript, by Chuck Easttom, Wordware Publishing; 2002, ISBN 1-55622-856-226Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan.References