web翻译.docxVIP

8.1.4The Document Object Model(DOM)8.1.4文档对象模型（DOM）The alert in our previous example is probably the simplest statement that produce a visible output. But in most situations users prefer when the response to their action appears within the web page itself, such as new text on the page, altered styles of the page’s elements, or added content on the page. In order to produce effects like these, we must learn the basics of how a JavaScript program interacts with a web page’s content.之前例子中的提示可能是能产生可视的输出的最简单的声明。但是在大部分情况下用户更喜欢对他们的操作的反馈出现在当前页面中，比如说网页上新的文本，页面元素的提示风格，或者是在页面上添加新的内容。为了产生这样的效果，我们必须要学习基本的JavaScript程序是如何跟页面内容进行交互的。JavaScript has a set of objects and functions that allow us to access and modify the content of the current web page. Each tag on the page (such as a paragraph, heading, or list item) is represented as an object. This set of objects is collectively referred to as the Document Object Model, or DOM. Interacting with DOM objects in your JavaScript code allows you to dynamically manipulate the web page’s appearance on the screen. Figure 8.5 shows a piece of HTML code and a diagram of its corresponding DOM element object.JavaScript中有一些对象和功能，可以让我们获取并修改现有网页的内容。网页上的每一个标签（比如说一个段落、标题、或表单）都是以对象的方式呈现的。这些对象都正确的指向文本对象模型，或者DOM.在你的JavaScript代码中和DOM对象进行交互，能让你动态的修改这个网页的呈现在屏幕上的外观。表8.5展示了一段HTML代码和它与DOM元素对象匹配的显示结果Document Object Model (DOM)A set of JavaScript objects representing the content of the current HTML pageHTMLp Look at this octopus; img scr=”octopus.jpg” alt=”an octopus” id=”icon01” / Cute, huh//pDOM Element ObjectProperty ValuetagName “IMG”scr “octopus.jpg”alt “an octopus”id “icon01”JavaScriptvar icon = document,getElementById(“icon01”);icon.scr = “kitty.gif”;Figure 8.5 The DOM object for an HTML element表8.5HTML元素的DOM对象The Document Object Model acts as the glue between web page content and JavaScript. We will use it to create dynamic and interactive web pages.文本对象模型充当了网页与JavaScript之间的粘接剂。我们将会用它来创造动态的和交互式的网页。Accessing DOM Objects by ID通过ID访问