JavaScript Document Object Model-DOM Extension

Based on W3C requirements for DOM, the browser can add attributes and methods to enhance its functionality. Some of the new features are intended for backward compatibility, while others are added based on feedback from developers. Based on W3C requirements for DOM, the browser can add attributes and methods to enhance its functionality. Some of the new features are intended for backward compatibility, while others are added based on feedback from developers.

Rendering Mode

From IE6, the Internet Explorer distinguishes between standard and hybrid modes. This requires us to distinguish the mode in which the browser is used. IE adds a compatMode attribute to the document object. The only task of this attribute is to identify the mode in which the browser is located. For example, in the following example, the value of document. compatMode is equal to "CSS1Compat", and the value of document. compatMode is equal to "BackCompat ".

If (document. compatMode = "CSS1Compat") {alert ("standard mode");} else {alert ("mixed mode ");}

After IE, Firefox, Chrome, and operabrowsers also implement this attribute. Safari has implemented the document. compatMode attribute since version 3.1.

Later, IE8 introduced a new property named documentMode for the document object. Its usage is as follows.

If (document. compatMode> 7) {alert ("IE8 + standard mode ");}

This is because IE8 has three different rendering modes. This attribute is introduced to distinguish these modes. If the value of this attribute is 5, it indicates the mixed mode (ie 5 mode). If the value is 7, it indicates the IE7 simulation mode. If the value is 8, it indicates the IE8 standard mode.

Contains () method

When operating the DOM, we often need to determine whether a given node is a descendant node of another node. IE browser first introduced a contains () method, which can obtain the information without traversing the entire DOM tree. The contains () method should be called on the ancestor node that serves as the search start point. This method receives a parameter, that is, the child node to be detected. If the input node is the descendant of the current node, true is returned; otherwise, false is returned. For example

alert(document.documentElement.contains(document.body));   //true

Test the preceding exampleElement?Element descendant. If it is an HTML page in the correct format, it returns true.

IE, Safari3 +, Opera8 +, and Chrome support the contains () method.

Firefox does not support the contains () method, but Firefox implements an alternative method at the DOM3 level: compareDocumentPosition () method. (Opera9.5 + browsers also support this method ). This method is used to determine the relationship between two nodes and returns a bitmark representing the relationship ). The following table lists the mask values.

If you need to imitate the contains () method, you should pay attention to the mask 16. You can perform bitwise AND operations on the results of the compareDocumentPosition () method to determine the reference node (the current node that calls the compareDocumentPosition () method) whether the specified node is included (the node passed in as a parameter ). For example:

Var result = document.doc umentElement. compareDocumentPosition (document. body); console.info ("result =" + result); console.info ("the result of the bitwise AND operation is:" + !! (Result & 16 ));

After the above Code executes the compareDocumentPosition () method, the result is 20, indicating 4 of the "home" and 16 of the "included. Then, bitwise AND operation on mask 16 will return a non-zero value. The two logical non-operators are used to convert values into boolean values.

We can compile a general contains () function through browser capability detection.

/*************************************** * **************** // * General contains () in the browser () method/* parameter: refNode-reference node * // * parameter: otherNode-node to be detected * // * returned value: If refNode contains otherNode, true is returned, otherwise, false * // ********************************* is returned *//********************************** * *********************/function contains (refNode, otherNode) {if (typeof refNode. contains = "function") {return refNode. contains (otherNode);} else if (typeof refNode. compareDocumentPosition = "Function") {return !! (RefNode. compareDocumentPosition (otherNode) & 16);} else {var node = otherNode. parentNode; do {if (node = refNode) {return true;} else {node = node. parentNode ;}} while (node! = Null); return false ;}}

This general contains () function uses three methods to determine whether a node is a descendant node of another node. The first parameter of the function is the reference node, and the second parameter is the node to be checked.

In the function body, first check whether the contains () method exists in the refNode, and then check whether the compareDocumentPosition () method exists. The last step of the function is to traverse the DOM tree from the otherNode, recursively obtain the parentNode and check whether it is equal to the refNode. At the top of the Document Tree, the parentNode value is null, And the loop ends.

The above is the content of DOM extension in the object model of the JavaScript document. For more information, see PHP Chinese website (www.php1.cn )!