JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

14.7 Document Elements As Window Properties

onerror.num = 0;

14.7 Document Elements As Window Properties

If you name an element in your HTML document using the id attribute, and if the Window object does not already have a property by that name, the Window object is given a nonenumerable property whose name is the value of the idattribute and whose name is the HTMLElement object that represents that document element.

As we’ve already noted, the Window object serves as the global object at the top of the scope chain in client-side JavaScript, so this means that the idattributes you use in your HTML documents become global variables accessible to your scripts. If your document

14.7 Document Elements As Window Properties | 351

includes the element, you can refer to that element using the global variable okay.

There is an important caveat, however: this doesn’t happen if the Window object already has a property by that name. Elements with the ids “history”, “location,” or “navigator”, for example, won’t appear as global variables, because those IDs are already in use. Similarly, if your HTML document includes an element whose id is “x” and you also declare and assign a value to the global variable x in your code, the explicitly declared variable will hide the implicit element variable. If the variable is declared in a script that appears before the named element, its existence will prevent the element from getting a window property of its own. And if the variable is declared in a script that appears after the named element, your explicit assignment to the variable overwrites the implicit value of the property.

In §15.2 , you’ll learn that you can look up document elements by the value of their HTML id attribute using the document.getElementById() method. Consider this example:

var ui = ["input","prompt","heading"]; // An array of element ids

ui.forEach(function(id) { // For each id look up the element

ui[id] = document.getElementById(id); // and store it in a property


After running this code, ui.input, ui.prompt, and ui.heading refer to document elements. A script could use the global variables input and heading instead of ui.input and ui.heading. But recall from §14.5 that the Window object has a method named prompt(), so a script cannot use the global variable prompt instead of ui.prompt.

The implicit use of element IDs as global variables is a historical quirk of web browser evolution. It is required for backward compatibility with existing web pages, but its use is not recommended—any time a browser vendor defines a new property of the Window object it breaks any code that uses an implicit definition of that property name. Instead, use document.getElementById() to look up elements explicitly. The use of this method seems less onerous if we give it a simpler name:

var $ = function(id) { return document.getElementById(id); }; ui.prompt = $("prompt");

Many client-side libraries define a $ function that looks up elements by ID like this. (We’ll see in Chapter 19 that jQuery’s $function is a general-purpose element selection method that returns one or more elements based on their ID, tag name, classattribute, or other criteria.)

Any HTML element with an id attribute will become the value of a global variable, assuming the ID is not already used by the Window object. The following HTML elements also behave this way when given a name attribute:

友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1