ホームページ >ウェブフロントエンド >jsチュートリアル >YUIコード読書日記 YAHOO.util.Dom - Part.1_YUI.Ext関連
まず、ヘッダー内の多くの if...else (実際には Camel と getStyle という 2 つの関数を定義しています) をバイパスしましょう。ブラウザーの実装が一貫していないため、これは非常に厄介な状況です。これらのコードについては後で説明します。
YAHOO.util.Dom クラスの宝物を見てみましょう。現在、私の考えは機能を見て機能と言うのが徐々に分かれてきています。
// 基本的に document.getElementById のレプリカと考えることができます
get: function(el) {
// すでに HTMLElement である場合は、直接返します
if (el && ( el.nodeType || el.item)) {
return el;
}
// 文字列の場合、この ID を持つ要素を返します
if (YAHOO. lang .isString(el) || !el) {
return document.getElementById(el);
}
// 配列のように見え、ループして要素を取得しますif ( el.length !== 未定義) {
var c = [];
for (var i = 0, len = el.length; i c[c.長さ] = Y.Dom.get(el[i]); 繊細さの。正直、上記のコードのループ本体を何も考えずに書くと、おそらく
for (var i = 0, len = el.length; i と書くことになるでしょう。 > c[c.length] = document.getElementById(el[i]);
}正常に動作しますが、先の判定は意味がありません。
クイック ツアーを続けて、getElementsByClassName の内部メカニズムを見てみましょう。 getElementsByClassName の詳細な呼び出しについては、YUI のドキュメントを参照してください。
getElementsByClassName: function(className, tag, root, apply) {
// タグ tag を取得します。デフォルトは all ("*") tag = tag '*';
// ノード名を指定します
root = (root) ? Y.Dom.get(root) : null
if (!root) {
return []; > }
// ノード情報を初期化します
var nodes = [],
elements = root.getElementsByTagName(tag),
re = getClassRegEx(className); // ルールに準拠しないノードを除外します
for (var i = 0, len = elements.length; i if ( re.test(elements[i].className ) ) {
// i を使用する代わりに、nodes.Length を使用する理由は非常に奇妙に違いありません
// 注意してください:^)
ノード [nodes.length] = 要素
/ / コールバック関数を実行します
if (apply) {
apply.call(elements[i], elements[i])
}
}
return ノード; > }, YUI のコードは、教科書的な DOM ノードの取得とフィルタリング、初期化データと操作データが非常に厳密で形式的であり、ある種の「安心感」を与えてくれます。Similarly, there is another getElementsBy function, the corresponding code is as follows
getElementsBy: function(method, tag, root, apply) {
// Same as the above function, slightly
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 {
apply(elements[i]);