Chapter IX client detection
The client is detected in a Web development highly controversial topic, since there is a difference between the browser, usually need to write different code based on the ability of different browsers, respectively. Note that if I could find a common method, to use a common method, not a last resort, do not use client detection.
Three common client detection technology:
First, the ability to detect:
This is a widely accepted form of client detection. The ability to detect goal is not to identify a particular browser, but the ability to identify the browser. How this way without regard to how a particular browser, as long as the ability to determine if a particular browser support, you can give solutions.
a, the ability to detect the basic pattern: if (object.propertyInQuestion) {// use object.propertyInQuestion}
b, the ability to detect more reliable:
The ability to detect very useful for those who want to know whether a feature would act (and not just a feature exists) in an appropriate manner.
For example: if there sort () method by the detection target, to determine whether the object supports sorting. The problem is that any sort attribute comprising the object will return true, a better way is to detect a sort function is not (available typeof).
Second, quirks detection
With the ability to detect similar detection quirks (quirks detection) goal is to identify the browser specific behavior. But the ability to detect and confirm what browsers support different capabilities, quirks detection want to know what defects exist browser.
For example there early in WebKit an eccentric, i.e., it will return hidden attribute for-in loop.
Quirks test typically involves running a piece of code, and then determine whether there is a browser quirks. Because of quirks detection and detection capability compared to less efficient, and therefore should only interfere with a quirk in the case of using the script runs. Quirks detection can not accurately detect specific browser and version.
Third, the user-agent detection
Detection to determine the user agent actually used by the browser user agent string detection. In each process the HTTP request, the user agent string is transmitted as a response to the first portion, and the string can be accessed through the JavaScript property navigator.userAgent. On the server side, the browser is determined by detecting the user's user agent string is a common and widely accepted practice. On the client side, user-agent detection is often treated as a last resort only use one kind of approach, which prioritizes the ability to detect and (or) after the detection of quirks.
The development of user-agent string, the browser vendors trying to add some deceptive information in the user agent string, cheat sites believe that their browser is another browser, which allows the user agent string becomes complex.
Many times, know exactly what the browser name and version number as good as it used to know exactly what the rendering engine.
User-agent detection is the last option client detection. Whenever possible, we have the ability to detect and quirks testing should be given priority. User-agent detection is generally applicable to the following situations:
a, can not directly detect the ability to accurately detect or quirks. For example, some browsers implements reserved for future stub functions. In this case, only the presence or absence of the corresponding function test not yet enough information. b, with a browser has different capabilities at different platforms. At this time, probably it is necessary to determine which platform is located in the browser.
c, for the purpose of tracking analysis need to know the exact browser.
Chapter X DOM
DOM (Document Object Model) is for one API (Application Programming Interface) HTML and XML documents. DOM depicts a hierarchical tree of nodes, allowing developers to add, remove, and modify certain part of the page.
First, the node level
DOM any HTML or XML document may be described as a multilayer structure constituted by a node. Nodes are divided into different types, and each type represents a different document and tag information. Each node has its own characteristics, and method data, and there are also a relationship with other nodes.
1, Node Type
DOM1 level defines a Node interface that all node types implemented by the DOM. The Node type Node Interface as implemented in JavaScript;
JavaScript is all node types are inherited from the Node type, so that all nodes share the same types of properties and methods.
Node common attributes: nodeType attribute for indicating the type, and the nodeName nodeValue attribute nodes;
The relationship between nodes: nodes can have its parent, sibling. Each node has a childNodes attribute, which holds a NodeList object. NodeList is an array object class, for storing an ordered set of nodes, these nodes can be accessed by the position related attributes: nextSibling, previousSibling, firstChild and lastChild; ownerDocument: This attribute points to document node represents the entire document.
The method of operation of the common node: appendChild (), insertBefore (), replaceChild (), cloneNode (); cloneNode () methods to select deep or shallow copy replication.
2, Document Type
a, JavaScript represents the document by Document type. In the browser, document object is an instance (inherited from Document type) of HTMLDocument, represents the entire HTML page. Furthermore, document object is a property of the window object, so it can be accessed as a global object.
b, Document type can represent HTML page or other XML-based documents. However, as the common application or document object HTMLDocument instance. Through this document object can not only get information about the page, but also the appearance and operation of the underlying structure of the page.
c, common attributes: documentElement, the property is always pointing to an HTML page <html> element; accessible document elements by childNodes list;
As examples of HTMLDocument, document attribute object has a body, directly to the <body> element.
As an example of HTMLDocument, document objects have some standard Document object does not have properties: title, URL, domain and referrer.
d, common methods:
Element may be used to obtain several operations to complete the document object methods. Wherein, Document type to provide two methods: getElementById () and getElementsByTagName ().
e, by the document object can write the output stream to the page. This ability is reflected in the following four methods: write (), writeln (), open (), and close ().
3, Element Type
Element type used to represent XML or HTML elements, provides a tag name for elements and characteristics of the sub-access point.
To access the element tag name, you can use the nodeName attribute, you can use tagName property.
a, HTML element
HTMLElement All HTML element by type of representation, not directly through this type, also is represented by its subtype. HTMLElement type directly inherited from the Element and added some properties.
b, obtain properties
Each element has one or more characteristics, the use of these features gives the corresponding additional information element or content. DOM methods there are three main operating characteristics, namely getAttribute (), setAttribute () and removeAttribute ().
c, the method for setting characteristics: setAttribute (), removeAttribute ();
d, attributes property
Element is the only type of a DOM node of the type used for attributes. attribute contains a NamedNodeMap attributes a, similar to the NodeList, is a collection of "dynamic". Each element is represented by a characteristic represented Attr node, each node is stored in NamedNodeMap object.
e, create elements
You can use document.createElement () method to create new elements, for creating good element to be added to the document tree will be displayed once to add elements to the document tree, the browser renders the element immediately. Thereafter, any changes made to this element will be reflected in real time in the browser. Want to add a new element to the document tree, you can use the appendChild (), insertBefore () or replaceChild () method.
. 4, Type Text
text node type represented by Text, it can contain literally interpreted plain text content. Plain text can contain HTML character after the escape, but can not contain HTML code.
You can use document.createTextNode () Creates a new text node;
Normalize on a call comprising two or more parent element text nodes () method, then all the text nodes are combined into one node;
splitText () method of a text node can split into two text nodes, text nodes is split DOM parsing techniques to extract a common data from a text node.
5, Comment type
Note in the DOM is represented by Comment type.
6, CDATASection type
CDATASection type only for XML-based document, represents the CDATA area. CDATASection inherit all types from type Text string manipulation methods, and therefore has in addition splitText () outside.
7, DocumentType type
DocumentType types are not commonly used in Web browsers, only Firefox, Safari and Opera support it. DocumentType contains all the information relating to the doctype document,
8, DocumentFragment type
In all node types, only DocumentFragment no corresponding mark in the document. DOM requirements document fragment (document fragment) is a "lightweight" document can contain and control nodes, but do not occupy additional resources like complete documentation.
Although the document fragment can not be directly added to the document, but you can use it as a "warehouse", which can be added to the document may be stored in a node inside.
. 9, Attr type, characteristic elements in the DOM Attr type to be represented.
Two, DOM technique
Available content is typically generated JavaScript that was originally generated by the HTML code, for example the following three technique DOM book.
1, the dynamic script: dynamic scripting, referring to non-existent when the page loads, but the script at some point in the future by modifying the DOM dynamically added;
2, dynamic style: dynamically added to the page after the page style loaded;
3, the operating table
The key to understanding the DOM, DOM is to understand the impact on performance. DOM manipulation is often the biggest part of the JavaScript program overhead, and access problems due to NodeList caused as much. NodeList objects are "dynamic", which means that each time you visit NodeList object will run a query. In view of this, a good way is to minimize DOM manipulation.
DocumentType DocumentType type type not commonly used in Web browsers, only Firefox, Safari and Opera support it ①. Document- ---------- ① Chrome 4.0 also supports DocumentType types. Turing community members StinkBC ([email protected]) exclusive copyright 10.1 respect the hierarchy of nodes 275 1 2 3 4 5 13 6 7 8 9 10 11 12 Type contains all the information relating to the doctype document,