Document.getElementsByClassNameを使用しますが、IEはサポートしていません。
だから私は試しました ジョナサン・スヌークの解決策 :
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.Push(els[i]);
return a;
}
var tabs = document.getElementsByClassName(document.body,'tab');
...しかしIEはまだ言います:
オブジェクトはこのプロパティまたはメソッドをサポートしていません
アイデア、より良い方法、バグ修正はありますか?
JQueryまたは他の「バルキーJavaScript」を含むソリューションを使用しないことを希望します。
うまくいきました!
@ joe前述 のように、関数はdocument
のメソッドではありません。
したがって、作業コードは次のようになります。
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.Push(els[i]);
return a;
}
var tabs = getElementsByClassName(document.body,'tab');
... AlsoIE8 +サポートのみが必要な場合、これは機能します:
if(!document.getElementsByClassName) {
document.getElementsByClassName = function(className) {
return this.querySelectorAll("." + className);
};
Element.prototype.getElementsByClassName = document.getElementsByClassName;
}
通常と同じように使用します。
var tabs = document.getElementsByClassName('tab');
これは文書化の方法ではありません。
function getElementsByClassName(node, classname) {
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.Push(els[i]);
return a;
}
tabs = getElementsByClassName(document.body,'tab'); // no document
古いブラウザ用の関数を作成できます
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function() {
var elms = document.getElementsByTagName('*');
var ei = new Array();
for (i=0;i<elms.length;i++) {
if (elms[i].getAttribute('class')) {
ecl = elms[i].getAttribute('class').split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.Push(elms[i]);
}
}
} else if (elms[i].className) {
ecl = elms[i].className.split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.Push(elms[i]);
}
}
}
}
return ei;
}
}
function getElementsByClassName(className) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(className); }
else { return document.querySelectorAll('.' + className); } }
これがLeonidの関数と同じであることはかなり確かですが、これはdocument.getElementsByClassName
可能な場合。
GetElementsByClassNameを実際に複製することはできません。これは、nodeListを返すため、その値がライブであり、ドキュメントで更新されるためです。
同じクラス名を共有する要素の静的配列を返すことができますが、ドキュメントが変更されると「認識」しません。
(ライブラリをスマートに見せるために、この種のことはあまり必要ありません...)
function getArrayByClassNames(classes, pa){
if(!pa) pa= document;
var C= [], G;
if(pa.getElementsByClassName){
G= pa.getElementsByClassName(classes);
for(var i= 0, L= G.length; i<L; i++){
C[i]= G[i];
}
}
else{
classes= classes.split(/\s+/);
var who, cL= classes.length,
cn, G= pa.getElementsByTagName('*'), L= G.length;
for(var i= 0; i<cL; i++){
classes[i]= RegExp('\\b'+classes[i]+'\\b');
}
classnameLoop:
while(L){
who= G[--L];
cn= who.className;
if(cn){
for(var i= 0; i<cL; i++){
if(classes[i].test(cn)== false) {
continue classnameLoop;
}
}
C.Push(who);
}
}
}
return C;
}
//例
var A = getArrayByClassNames( 'sideBar local')
IE8:
document.getElementsByClassName = function (className) {
return document.querySelectorAll('.' + className)
}
function _getClass(whatEverClasNameYouWant){
var a=document.getElementsByTagName('*');
for(b in a){
if((' '+a[b].className+' ').indexOf(' '+whatEverClasNameYouWant+' ')>-1){
return a[b];
}
}
}
IE8のquerySelectorAll
フォールバックを改善したいだけです。
他の人が答えたように、簡単な方法はElement.prototype
に関数を追加することです
this.querySelectorAll('.' + className);
しかし、いくつかの問題があります。
/
、$
、*
など)では機能しません。つまり、次のような「修正」が必要です。
"abcd" -> ".abcd"
"a b cd" -> ".a.b.cd"
" a b " -> ".a.b "
"a/b$c d" -> ".a\/b\$c.d"
"1234" -> ".\000031234"
this.querySelectorAll(className
.replace(/(?=[^ \w])/g, '\\') // Escape non-Word characters
.replace(/\b\d/g, '\\00003$&') // Escape digits at the beginning
.replace(/(^| +)(?!$| )/g, '.') // Add "." before classes, removing spaces
);