getElementsByClassName互換IE 6/7/8の実装方法
2475 ワード
All know:IE 8および以下のバージョンを除き、getElementsByClassNameメソッドはすべてのブラウザで実装されています.
本稿では,異なるフレームワークまたはライブラリにおけるgetElementsByClassNameの互換性IE 8−の実装方法を分析してまとめる.
フレームワーク:NEJ
ライブラリ:jQuery
一、NEJフレームワークの実現方法
以上のコードは直接使用できず,nejフレームワークにおける他のAPIに依存する.
しかし、その設計原理ははっきりしています.
1、照合クラス名の正規表現を新規作成する.
2、HTML Element要素のgetElementByTagNameメソッドでその要素に含まれるすべてのサブ要素を選択する.
3、選択した各サブエレメントに対して正規表現で判断し、サブエレメントクラス名に指定したクラス名が含まれているかどうかを確認する.含まれる場合はresult配列にプッシュします.
二、ネットユーザーRuby’s Louvreのまとめに基づいて少し改善し、得られた方法をデバッグする.
注意:このセグメントコードは、フレームワークやライブラリに依存せずに直接使用できます.
三、jQueryライブラリにおけるクラスセレクタの実現は、sizzleセレクタエンジンに統合されており、多くの正規表現が使用されている.
具体的にはAaronの記事を参照してください.
転載先:https://www.cnblogs.com/spray1990/p/4609149.html
本稿では,異なるフレームワークまたはライブラリにおけるgetElementsByClassNameの互換性IE 8−の実装方法を分析してまとめる.
フレームワーク:NEJ
ライブラリ:jQuery
一、NEJフレームワークの実現方法
__getElementsByClassName = function(_element,_class){
var _result = [],
_regexp = new RegExp('(\\s|^)(?:'+_class.replace(/\s+/g,'|')+')(?=\\s|$)');
_u._$forEach(
_element.getElementsByTagName('*'),
function(_node){
if (_regexp.test(_node.className)){
_result.push(_node);
}
}
);
return _result;
};
以上のコードは直接使用できず,nejフレームワークにおける他のAPIに依存する.
しかし、その設計原理ははっきりしています.
1、照合クラス名の正規表現を新規作成する.
2、HTML Element要素のgetElementByTagNameメソッドでその要素に含まれるすべてのサブ要素を選択する.
3、選択した各サブエレメントに対して正規表現で判断し、サブエレメントクラス名に指定したクラス名が含まれているかどうかを確認する.含まれる場合はresult配列にプッシュします.
二、ネットユーザーRuby’s Louvreのまとめに基づいて少し改善し、得られた方法をデバッグする.
注意:このセグメントコードは、フレームワークやライブラリに依存せずに直接使用できます.
/* , , IE6/7/8 */
var getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
var nodes = (node || document).getElementsByClassName(searchClass),result = [];
for(var i=0 ;node = nodes[i++];){
if(!!tag){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node);
}
}else{
result.push(node);
}
}
return result;
}else{
node = node || document;
tag = tag || "*";
var result = [];
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0,n=0, kl=patterns.length; k
三、jQueryライブラリにおけるクラスセレクタの実現は、sizzleセレクタエンジンに統合されており、多くの正規表現が使用されている.
具体的にはAaronの記事を参照してください.
転載先:https://www.cnblogs.com/spray1990/p/4609149.html