"Javascript DOM Programming Art"--sixth case study Picture library improved edition

DOM Scripting related issues: smooth degradation, backward compatibility, separation of JavaScript.

I. Steady degradation

If JS is disabled, can the basic function be implemented?

Two. Separating JavaScript

1. Add the event handler function:

A. Checkpoint: General applicability Detection (detects if Dom method is supported); Targeted detection (detects if object exists)

This is a precautionary measure. Even if you decide to delete a tag from the webpage later, don't worry about JS error. At this point, it embodies the importance of the separation of JS and HTML.

Principle: Want to use JS to add behavior to the Web page, you should not let the JS code on the structure of this page have any dependencies.

B. Variable name: Reserved words and keywords cannot be used as variable names.

C. Traversal:

D. Changing behavior: The array obtained by the document.getElementsByTagName () method is actually a list of nodes, a collection of DOM nodes, each of which has its own properties and methods.

2. Share OnLoad event: Executes immediately after the page has been loaded, and this event is related to the Window object. Principle: If you bind several functions to the OnLoad event, only the last function will be executed (overwritten).

Workaround one: window.onload = function () {fn1 (); fn2 (); ...} ---------for functions that need to be bound, not many occasions

Solution Two: Encapsulate a function addloadevent, only one parameter is the name of the function that you intend to execute when the page is finished loading.

function Addloadevent (func) {

var oldonload = window.onload;

if (typeof oldonload! = "function") {

Window.onload = func;

}else {

Window.onload = function () {

Oldonload ();

Func ();

};

};

};

Three. Don't make too many assumptions:

1. Ternary operator:

2. NodeName property: Always returns a capital letter value, even if the element is lowercase in the HTML document.

In practice, decide whether you need to check, because these checks are for situations where the HTML document might not be within your control. Ideally, your script should not make too many assumptions about the content and structure of the HTML document.

Four. Keyboard access:

The onkeypress event handler is designed to handle keyboard events, and pressing any key on the keyboard triggers the onkeypress event. In some browsers, even the TAB key is included.

In almost all browsers, using the TAB key to move to a link and press ENTER will also trigger the OnClick event.

Five. DOM Core and Html-dom:

1. Dom Core: Not specifically for JS, any programming language that supports the DOM can use them. The use is not limited to processing Web pages, they can be used to process documents written in any one markup language, such as XML.

2. Html-dom: can only be used to process Web documents.

A. For example, Html-dom provides a forms object: Document.forms

B. provides many properties that describe various HTML elements: ELE.SRC

The same can be done using only the DOM core, or using Html-dom.

Summary:

1. Try to make the JS code no longer dependent on assumptions that are not guaranteed, and introduce many tests and checks for this. These allow the JS code to degenerate smoothly.

2. The onkeypress event handler function is not used, which guarantees the accessibility of the JS code.

3. It is important to separate the JS code from the HTML markup document, so that the JS code is no longer dependent on the content and structure of the HTML document.

The greater the degree of separation of structure and behavior, the better!

"Javascript DOM Programming Art"--sixth case study Picture library improved edition