Dojo/dom Source Learning

Dojo/dom module as a basic module, the most commonly used is the Byid method. In addition there are isdescendant and setselectable methods.

Dom.byid (myId) method:

All kinds of front-end libraries are unavoidable to deal with the DOM node, the method of manipulating the DOM will eventually go back to the original methods, because the class library faster and faster than native . So in the Dom.byid method, you still rely on the document.getElementById (' MyId ') method. If there is no IE, if you do not consider compatibility, getElementById method can fully meet our needs. But, IE ruined everything, borrowing from American colleague's sentence: Fuck the stupid ie! There are two compatibility issues:

• In IE8 and earlier versions, myID is not case-sensitive, so myID and myID return the same result
• IE7 and lower versions, IE returns the form element if the name is the same as the given ID and the form element precedes the given ID element

This requires that we must determine if the ID of the obtained element is really the same as the passed-in parameter. The decision method is to use the id attribute or the id attribute node:

var te = id &&&& (te.attributes.id.value = = ID | | te.id = = ID)

If God had closed a door for you, he would have opened another door for you (so sentimental, despair). IE4 begins with the document.all, which is a collection that represents all the elements. Document.all[myid] Returns an element with ID myId or an array of classes containing the name MyId. We can cycle to determine if the element meets the requirements:

varEles =Document.all[id]; if(!eles | |eles.nodename) {Eles=[Eles]; }                //if more than 1, choose first with the correct ID                vari =0;  while(Te = eles[i++])){                    if((te.attributes && te.attributes.id && te.attributes.id.value = = id) | | te.id = =ID) {                        returnte; }                }

Therefore, the implementation of dojo/dom in accordance with different browser, there are different implementations:

    if(Has ("IE") ) {Dom.byid=function (ID, doc) {if(typeofID! ="string"){                returnID; }            var_d = Doc | | Win.doc, TE = ID &&_d.getelementbyid (ID); //Attributes.id.value is better than just ID.//user has a name=id inside a form            if(Te && (te.attributes.id.value = = ID | | te.id = =ID)) {                returnte; }Else{                varEles =_d.all[id]; if(!eles | |eles.nodename) {Eles=[Eles]; }                //if more than 1, choose first with the correct ID                vari =0;  while(Te = eles[i++])){                    if((te.attributes && te.attributes.id && te.attributes.id.value = = id) | | te.id = =ID) {                        returnte;    }                }            }        }; }Else{Dom.byid=function (ID, doc) {//The inline ' d type check. //Be sure to return null per documentation, to match IE branch.            return((typeofid = ="string") ? (Doc | | win.doc). getElementById (ID): ID) | |NULL;//Domnode        }; }

　　

Dom.isdescendant (node, ancestor) method:

This method is used to determine if node is a sub-node of ancestor, in fact, the child is looking for his father. It is easier for a child to find a father, and a father to find a child is more difficult, because the child node must have a parent node, so as long as the first level to find up can be.

Dom.isdescendant = function (/*domnode| String*/Node/*domnode| String*/ancestor) {        Try{node=Dom.byid (node); Ancestor=Dom.byid (ancestor);  while(node) {if(node = =ancestor) {                    return true;//Boolean} node=Node.parentnode; }        }Catch(e) {/*squelch, return False*/ }        return false;//Boolean};

There is also a native function that can satisfy the requirements: the Element.contains method, but this method is not included in the specification. But almost all browsers are supported, including IE (ie, originally added this method, finally did a good thing.) ）。 So this approach can be implemented as well:

Dom.isdescendant = function (/*domnode| String*/Node/*domnode| String*/ancestor) {        Try{node=Dom.byid (node); Ancestor=Dom.byid (ancestor); returnancestor.contains (node); }Catch(e) {/*squelch, return False*/ }        return false;//Boolean};

Dom.setselectable (node, selectable) method:

The name is also known to be used to set whether a node and its own point can be selected. CSS properties can be set by setting "User-select" to control whether an element can be selected, but this property is not included in the standard, so each browser needs to add browser prefix, such as:-webkit,-moz,-ms, O, etc. So we can control the selectivity of an element by setting the corresponding property in the element's style property. However, IE is always too fucked up, in most cases, MS prefixes can solve the problem, but if a frame is used as an editor, setting Msuserselect to none will not achieve the effect, So in IE we use the unselectable feature to solve this problem. This feature exists under IE: unselectable, set to On is not selectable, and removing this attribute indicates that it can be selected.

In the implementation of dojo, first determine whether the Userselect property can be used:

Has.add ("Css-user-select", Function (Global, doc, Element) {        //Avoid Exception when Dom.js was loaded in non-browser environments        if(!element) {return false; } varstyle =Element.style; varprefixes = ["khtml","O","Moz","Webkit"], I=prefixes.length, name="Userselect", prefix; //iterate prefixes from the most to least likely         Do{            if(typeofStyle[name]!=="undefined"){                //supported; return property name                returnname; }        } while(i--&& (name = Prefixes[i] +"Userselect")); //Not supported if we didn ' t return before now        return false; });

The MS prefix is omitted here.

Then, depending on the support for "Css-user-select", different implementations are used:

varCssuserselect = has ("Css-user-select"); Dom.setselectable= Cssuserselect?function (node, selectable) {//Css-user-select Returns a (possibly vendor-prefixed) CSS property nameDom.byid (node). style[cssuserselect] = selectable?"":"None"; }: Function (node, selectable) {node=Dom.byid (node); //(IE < 10/opera) Fall back to setting/removing the//unselectable attribute on the element and all its children        varnodes = Node.getelementsbytagname ("*"), I=nodes.length; if(selectable) {Node.removeattribute ("unselectable");  while(i--) {Nodes[i].removeattribute ("unselectable"); }        }Else{Node.setattribute ("unselectable"," on");  while(i--) {Nodes[i].setattribute ("unselectable"," on"); }        }    };

In IE, the loop changes the unselectable characteristics of all child nodes to control selectivity.

Share a small experience: when setting an element is not selected, it is best to set the farthest ancestor that satisfies the requirement, if the setting of only one element may not be able to achieve the effect, for example: setting a picture is not selected, but the ancestor can select, the user may turn blue when the ancestor is selected, it seems as if the picture can be selected.

　　If you think this article is helpful to you, please do not hesitate to click on the recommended button below, your encouragement is my motivation to share!

Dojo/dom Source Learning