よく使われているjs HTMLDOMオブジェクトの原生法互換性

1946 ワード

チルドレン(非標準的)
ieの下でコメントノードに戻りますので、試用はお勧めしません.
childNodes (標準的)
chorrme(バージョン39)firfox(バージョン37)はテキストノードを取得しますので、nodeTypeでフィルタしてください.
        window.onload = function () {
	    	var i = 0,
	    	    length=aChilds.length,
	    	    aChilds = document.getElementsByTagName('body')[0].childNodes,
	    	    newChilds = [];
	    	for (; i < length; i++) {
	    	    if (aChilds[i].nodeType == 1) {
	    	        newChilds.push(aChilds[i]);
	    	    }
	    	}
        }
first Child
すべてのプライマリブラウザがサポートされ、ドキュメントノードに戻ります. firstElement Child ID 6-8はサポートされていません.この方法で代替できます.
function getFirst (ele) {
   var e,
       i = 0;
   for (; e = ele.childNodes[i++];) {
	if (e.nodeType ==1) {
	   return e;
	}
   }
}
lastChild
同上、以下の方法で代替することができる.
function getLast (ele) {
    var e,
        i = ele.chlldNodes.length - 1;
    for (; e = ele.childNodes[i--];) {
        if (e.nodeType == 1) {
            return e;
        }                
    }
}
parent Node
htmlノードにie 8が欠けています.以下は空です.chrome下はformです.
<form action="">
    <table>
	<input type="text" id="test">
    </table>
</form>
 だから保証します.失わないようにしてください.
nextsiblingとprevsibling 
FFにはスペースが含まれています.ノードとしてフィルタリングが必要です.
function sibling (cur, direction) {
    do{
	cur = cur[direction];
    }while(cur && cur.nodeType !==1);
    return cur;
}

sibling(xxx, 'nextSibling');
removeChild()
親ノードで自分を削除する必要があります.
ele.parentChild.removeChild(ele);
innerHtml
互換性のない問題
element.innerHtml = "test";
.....
属性クエリーのまとめ:
    1:一般的な属性はnode.XXXXを使用することを提案します.    2:カスタム属性はnode.getAttribute(「XXXX」)を使用することを提案します.    3:JSのキーワードを取得する場合は、node.getAttribute(「XXX」)を使用することを推奨します.labelのforのように.    4:取得の目標は文字を保留することです.例えば、クラスはclass Nameを使って代用してください.