YAHOO. util. Dom-Part.1_YUI.Ext related to YUI code reading Diary

DOM operations are a key part of learning Javascript. YUI provides rich DOM operation interfaces defined in % BUILD % domdom. js (encapsulated as YAHOO. util. Dom ). Since DOM operations are important, I plan to divide them into several parts for analysis. Bypass A Lot Of if... else (actually defining the toCamel and getStyle functions)-the implementation of the browser is not uniform, causing such a problem. You can talk about the code later.

Next we will look at the treasures in the YAHOO. util. Dom class. At present, the idea has been gradually split. I have seen a function.

// Basically, it can be considered as a revision of document. getElementById
Get: function (el ){
// If it is already an HTMLElement, it will be returned directly
If (el & (el. nodeType | el. item )){
Return el;
}

// If it is a string, the Element with this ID is returned.
If (YAHOO. lang. isString (el) |! El ){
Return document. getElementById (el );
}

// It looks like an array and calls itself cyclically to obtain the Eelement
If (el. length! = Undefined ){
Var c = [];
For (var I = 0, len = el. length; I <len; ++ I ){
C [c. length] = Y. Dom. get (el [I]);
}

Return c;
}

Return el;
}, This code is very well written. Frankly speaking, the loop body in the above Code will be written without thinking about it.

For (var I = 0, len = el. length; I <len; ++ I ){
C [c. length] = document. getElementById (el [I]);
} Although it can also work normally, the previous judgment is meaningless.

Continue to take a look at the internal mechanism of getElementsByClassName. For details about calling getElementsByClassName, see the YUI document.

GetElementsByClassName: function (className, tag, root, apply ){
// Obtain tag tags. The default value is all ("*").
Tag = tag | '*';
// Specify the node name
Root = (root )? Y. Dom. get (root): null | document;
If (! Root ){
Return [];
}

// Initialize node Information
Var nodes = [],
Elements = root. getElementsByTagName (tag ),
Re = getClassRegEx (className );

// Filter out nodes that do not comply with the rules
For (var I = 0, len = elements. length; I <len; ++ I ){
If (re. test (elements [I]. className )){
// You must be wondering why nodes. length is used instead of I
// Carefully consider: ^)
Nodes [nodes. length] = elements [I];
// Execute the callback function
If (apply ){
Apply. call (elements [I], elements [I]);
}
}
}

Return nodes;
}, Textbook DOM node acquisition and filtering, initialization data and operation data are very rigorous and formal, and YUI Code gives me a bit of "security ". Similarly, let's use the getElementsBy function. The corresponding code is as follows:

GetElementsBy: function (method, tag, root, apply ){
// Same as the preceding function, omitted
Tag = tag | '*';
Root = (root )? Y. Dom. get (root): null | document;

If (! Root ){
Return [];
}

Var nodes = [],
Elements = root. getElementsByTagName (tag );

For (var I = 0, len = elements. length; I <len; ++ I ){
// Judge node attributes based on the return value of the custom function
If (method (elements [I]) {
Nodes [nodes. length] = elements [I];
If (apply ){
Apply (elements [I]);
}
}
}

Return nodes;
}, OK. We will be here today.