Javascript advanced -- separate DOM Script Programming

Writing unobstrusive code means completely separating HTML content: the data comes from the server, and javascript code is used for dynamic and interaction. The advantage of this separation is that different browsers can be fully degraded or upgraded to provide richer interaction for advanced browsers, browsers that do not support advanced features can downgrade the part they support.

I. DOM

DOM is the most widely used way to express XML documents. Although it may not be the fastest, the most lightweight, or the easiest to use, most web development languages provide its implementation. The final operations of javascript are to interact with HTML elements in the webpage, while HTML is a subset of XML. Therefore, DOM is an excellent tool to simplify operations and is the first step in developing separate javascript code, it provides the following simplified operations: Getting or modifying specific HTML elements, modifying element attributes, binding events, and writing processing functions.

1. Concept DOM (Document Object Model) is a W3C standard for expressing XML documents. We can regard xml dom expressions as a navigation tree, all terms are similar to genealogy terms (parent, child, sibling ). Nodes include nodeType, nodeValue, and nodeName. Each node has a pointer to the parent node, child node, and adjacent sibling node. 2. Process spaces and use the while loop to check whether the node is empty, and test whether the node type nodeType is 1, 2, or 3. Otherwise, delete the node and continue searching for the next node. 3. Retrieving and searching Elements GetElementById ("id"): searches for all elements whose attribute ID is id. This method is fast and accurate, but cannot contain elements with the same name as the ID. GetElementByTagName ("tag "): Click it to run under any element to find the node list Nodelist with the tag name, which is similar to an array, but does not support push, pop, shift, and other javascript Array Operations. InnerHTML: Used to set or obtain the html of the element class. Short Code uses this feature very quickly, but there will be some different browser bugs. in IE, all returned elements are uppercase element characters, mozilla-based browsers do not return <style> elements. InnerText: It is convenient to obtain all text class content under the element. However, due to incompatibility with some popular browsers, there are the following alternative methods:

function text(e){    var t = "";    e = e.childNodes || e;    for (var j = 0; j < e.length; j++){        t += e[j].nodeType != 1 ?            e[j].nodeValue : text(e[j].childNodes);    return t;    }}

ClassName: Use the class name to search for elements. This is a powerful selector provided by jquery and a css selector. The Public Library has cssQuery. XPath: This is a powerful pure XML Positioning method, W3C standard, DOM implementation must also be based on XPath, and the expression is relatively lengthy compared with the CSS selector, it was more powerful at the time. 4. Wait for the html dom to load the browser rendering and operation order as follows: html parsing completed --> external scripts and style sheet loading --> scripts are parsed and executed in the document --> html dom fully constructed --> images and external content loading --> webpage Loading completed webpage after the external file in the header is loaded, it will be executed before the HTML is actually constructed, this is not suitable for important situations. Remedy:

• Wait for the whole page to load: the window. onload event is triggered when a function is bound to the page after the page is fully loaded.
• Wait for most of the DOM to load: the steps in the row can be executed immediately after the DOM is constructed, that is, you can only access the DOM before the position in the step embedded in the middle of the page. Therefore, the script can be executed before the end tag of the body.
• Proper DOM loading: Listening to DOM loading status is the most effective but also the most complicated implementation. You can bind windows events as easy as possible and get the speed at which you can perform in-row operations. Check whether DOM elements and methods exist: Check functions such as document, document. getElementById, document. body, and other specific elements.

Ii. Events

Events are the glue that sticks everything together, and the combination of DOM and javascript events is the foundation of modern web applications. There are mainly the following types of events:

• Mouse events: Tracking mouse positioning and clicking events
• Keyboard Events: track keyboard percussion and context
• UI events: whether a page covers one aspect or not
• Form event: form input element
• Loading and error events: Listening to loading status

Javascript does not currently have a thread and is completely asynchronous. Code execution is triggered by other actions. Bind a callback function to a specific event. The most recent thread simulation is the use of setInterval and recursive simulation. The event processing phase includes the capture phase from the body element down to the element where an event occurs, and the bubble phase from the event element to the outermost element, the organization bubble can provide benefits for the program in charge, and canceling the default browser behavior will be effective in 95% of the cases to be processed. Different browsers can process different results, therefore, it is an important part of separate DOM Script Programming.

• Traditional binding: The object. event = function () {...} is simple and stable. Different browsers operate the same way. The this keyword references the current element. The disadvantage is that it is intended to allow event bubbling, rather than capturing and bubbling. At the same time, an element can only be bound to one event handler function at a time.
• DOM binding: the W3C standard is the addEventListener function. It provides three parameters: event name, processing function, and Boolean flag for enabling or disabling event capture. The advantage is that it supports setting the capture and bubble stages. this points to the current element, and the event object can always be obtained through the first parameter of the processing function, at the same time, you can bind multiple events to an element without overwriting events previously bound.
• IE binding: Multiple events can be bound, but only the bubble stage is supported. this points to the window object, not the current element. The event object only exists in the window. event parameter. At the same time, the on + event name must be used, and only IE is available.

Iii. javascript and CSS

DHTML is generated based on the Interaction Between DOM and events, essentially the interaction between javascript and CSS attributes on DOM elements.

All of the above questions are discussed to implement separate scripting to adapt to different browsers and to achieve a reserved retreat. First, all functions of the application must be checked (if (document & document. getElementById), followed by using the DOM to traverse the common method of searching to quickly access the elements in the document, and finally using the DOM and attachEvent/addEvenetListener function to add an event handler for the elements, <a href = "#" onclick = "dosomething ()... ">... </a> such code is very bad.

• Disable javascript: if javascript is disabled, all pages must work. The most obvious difference is the href attribute of the link and The onclick event.
• The link does not rely on javascript: All links should not be destructive. The link can be used to delete, edit, or modify any user data.
• Disable css when listening
• Event affinity: Make sure that the event is still friendly when the mouse is not applicable, and it is good for everyone.