Home >Web Front-end >JS Tutorial >YUI code reading diary YAHOO.util.Dom - Part.1_YUI.Ext related

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

WBOY
WBOYOriginal
2016-05-16 19:05:48932browse

Let’s first bypass the many if...else in the header (actually defining two functions toCamel and getStyle) - due to the inconsistent implementation of browsers, this is such a troublesome situation. We can talk about these codes later.

Let’s take a look at the treasures in the YAHOO.util.Dom class. At present, my thoughts have been gradually divided. I see a function and say a function.

// It can basically be considered as a replica of document.getElementById
get: function(el) {
// If it is already HTMLElement, then return directly
if (el && ( el.nodeType || el.item)) {
return el;
}

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

// Looks like an array, loops to call itself to get Eelement
if ( el.length !== undefined) {
var c = [];
for (var i = 0, len = el.length; i c[c.length] = Y.Dom.get(el[i]);
                                                                                                     of subtlety. Frankly speaking, if the loop body in the above code is not thought about, it will probably be written as

for (var i = 0, len = el.length; i c[c.length] = document.getElementById(el[i]);
}Although it can work normally, the previous judgment is meaningless.

Continuing with the quick tour, now look at the internal mechanism of getElementsByClassName. For detailed calls to getElementsByClassName, please refer to the YUI documentation.

getElementsByClassName: function(className, tag, root, apply) { // Get the tag tag, the default 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 if ( re.test(elements[i].className) ) {
// You must be very strange why use nodes.Length instead of using i
// carefully:^)
nodes [nodes.length] = Elements [i];
// execute the callback function
if (apply) { apply.call(elements[i], elements[i]);
}
}

return nodes;
}, The textbook-style DOM node acquisition and filtering, initialization data and operation data are all very rigorous and formal. YUI's code gives me a certain sense of "security".마찬가지로 또 다른 getElementsBy 함수가 있는데, 해당 코드는 다음과 같습니다.

getElementsBy: function(method, tag, root, apply) {
// 위 함수와 약간 동일합니다.
tag = 태그 || ' *';
루트 = (루트) ? Y.Dom.get(root) : null || 문서

return []; 🎜> }

var 노드 = [],
elements = root.getElementsByTagName(tag);

for (var i = 0, len = elements.length; i                                                                                                  ~                {
                  적용(요소[i]);

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn