よく使われているjs HTMLDOMオブジェクトの原生法互換性
1946 ワード
チルドレン(非標準的)
ieの下でコメントノードに戻りますので、試用はお勧めしません.
childNodes (標準的)
chorrme(バージョン39)firfox(バージョン37)はテキストノードを取得しますので、nodeTypeでフィルタしてください.
すべてのプライマリブラウザがサポートされ、ドキュメントノードに戻ります. firstElement Child ID 6-8はサポートされていません.この方法で代替できます.
同上、以下の方法で代替することができる.
htmlノードにie 8が欠けています.以下は空です.chrome下はformです.
nextsiblingとprevsibling
FFにはスペースが含まれています.ノードとしてフィルタリングが必要です.
親ノードで自分を削除する必要があります.
互換性のない問題
1:一般的な属性はnode.XXXXを使用することを提案します. 2:カスタム属性はnode.getAttribute(「XXXX」)を使用することを提案します. 3:JSのキーワードを取得する場合は、node.getAttribute(「XXX」)を使用することを推奨します.labelのforのように. 4:取得の目標は文字を保留することです.例えば、クラスはclass Nameを使って代用してください.
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 Nodehtmlノードに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を使って代用してください.