introduction to client-side web programming acm 511 acm 262 course notes
TRANSCRIPT
ACM 262 Course Notes
Document Object Model
When a Web browser loads an HTML file, it displays the contents of that file onthe screen (appropriately styled with CSS, of course). But that’s not all the Webbrowser does with the tags, attributes, and contents of the file: it also creates andmemorizes a “model” of that page’s HTML. In other words, the Web browserremembers the HTML tags, their attributes, and the order in which they appear inthe file—this representation of the page is called the Document Object Model, orDOM for short.
The DOM provides the information needed for JavaScript to communicate withthe 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. TheDOM lets JavaScript communicate with and change a page’s HTML.
ACM 262 Course Notes
Problem with DOM
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.