INTRODUCTION TO CLIENT-SIDE WEB PROGRAMMING ACM 511 ACM 262 Course Notes

Javascript ACM 262 Course Notes

Javascript ACM 262 Course Notes

Javascript ACM 262 Course Notes

Determining the Length of a String ACM 262 Course Notes

Changing the Case of a String ACM 262 Course Notes

Searching a String: indexOf( ) Technique ACM 262 Course Notes

Extracting Part of a String with slice( ) ACM 262 Course Notes

Extracting Part of a String with slice( ) ACM 262 Course Notes

Document Object Model ACM 262 Course Notes When a Web browser loads an HTML file, it displays the contents of that file on the screen (appropriately styled with CSS, of course). But that’s not all the Web browser does with the tags, attributes, and contents of the file: it also creates and memorizes a “model” of that page’s HTML. In other words, the Web browser remembers the HTML tags, their attributes, and the order in which they appear in the file—this representation of the page is called the Document Object Model, or DOM for short. The DOM provides the information needed for JavaScript to communicate with the elements on the Web page. The DOM also provides the tools necessary to navigate through, change, and add to the HTML on the page. The DOM itself isn’t actually JavaScript—it’s a standard from the World Wide Web Consortium (W3C) that most browser manufacturers have adopted and added to their browsers. The DOM lets JavaScript communicate with and change a page’s HTML.

Selecting Page Elements ACM 262 Course Notes

Selecting Page Elements ACM 262 Course Notes

DOM Relationships ACM 262 Course Notes

DOM Relationships ACM 262 Course Notes

DOM Relationships ACM 262 Course Notes

Example 5.1 ACM 262 Course Notes

Problem with DOM ACM 262 Course Notes A further complication is that the major browsers interpret the DOM differently. The techniques presented in the earlier pages of this chapter are all cross-browser compatible, but other parts of the DOM standard aren’t. For example, Internet Explorer handles events differently from other browsers; the same HTML can produce more text nodes in Firefox and Safari than in Internet Explorer; and IE doesn’t always retrieve HTML tag attributes in the same way as Firefox, Safari, or Opera. In addition, different browsers treat white space (like tabs and spaces) in HTML differently—in some cases treating white space like additional text nodes (Firefox and Safari) and in other cases ignoring that white space (Internet Explorer). And those are just a few of the differences between how the most common Web browsers handle the DOM.