getElementsByClassNameとclassListの互換性の問題と解決策
3198 ワード
###document(element).getElementsByClassName(classNames:classString); HTML 5には、documentとhtml要素で呼び出され、1つ以上のクラス名の文字列を含むパラメータが受け入れられ、作成タイプのNodeList(パフォーマンスの問題がある)が返され、入力された複数のタイプの順序は重要ではありません.この方法は標準ブラウザでのみ有効であり、非標準ブラウザでは無効です.
互換性の解決方法:
###classList属性classList属性はHTML 5に追加された属性であり、この属性の下には、Add(value)が与えられた文字列値をリストに追加し、存在する場合は追加しない方法がいくつかあります.Contains(value)は、リストに所定の値があるかどうかを示し、trueがある場合はfalseを返します.Remove(value)リストから指定した文字列を削除します.Toggle(value)リストにすでに指定された値が存在する場合は削除し、指定された値がない場合は増加します.classListをサポートするブラウザにはFirefox 3がある.6+とchromeとIE 10+です.互換性の解決:
p1 p
p
var aP = document.getElementsByClassName(' p p1' );
alert(aP.length);
/* : 1*/
/* :Error: “getElementsByClassName” */
互換性の解決方法:
var getElementsByClassName = (function (classList,/*optional*/parent){
if(typeof classList !== "string") throw TypeError("the type of classList is error");
var parent = parent || window.document;/* */
if(parent.getElementsByClassName){/* */
return parent.getElementsByClassName(classList);
}else{/* */
var child = parent.getElementsByTagName("*");
var nodeList = [];
/* classList */
var classAttr = classList.replace(/^\s+|\s+$/g,"").split(/\s+/);
for(var j = 0,len_j = child.length; j
###classList属性classList属性はHTML 5に追加された属性であり、この属性の下には、Add(value)が与えられた文字列値をリストに追加し、存在する場合は追加しない方法がいくつかあります.Contains(value)は、リストに所定の値があるかどうかを示し、trueがある場合はfalseを返します.Remove(value)リストから指定した文字列を削除します.Toggle(value)リストにすでに指定された値が存在する場合は削除し、指定された値がない場合は増加します.classListをサポートするブラウザにはFirefox 3がある.6+とchromeとIE 10+です.互換性の解決:
var classList = null;
(function(){
classList = function (obj){
this.obj = obj;
};
classList.prototype.add = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.obj.classList){
this.obj.classList.add(value);
}else{
var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
this.obj.classList +=" "+arr.join(" ");
}
};
classList.prototype.contains = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.obj.classList){
return this.obj.classList.contains(value);
}else{
var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
var _className = this.obj.className;
for(var i = 0,len= arr.length; i