0

最近、特定のDOM機能に対するブラウザーのサポートを決定する際に問題に直面しました。それらの1つはElement.children機能でしたが、それでも私は頭痛の種になっています。コードに次の行があります。

var NATIVE_CHILDREN = Element.prototype.hasOwnProperty（'children'）;

ブラウザがElement.children-feature [https://developer.mozilla.org/en/DOM/Element.children]をサポートしているかどうかを確認することになっています。

MDNとクイックテストによると、すべての主要なブラウザがこの機能をサポートしています。

FirefoxのFirebugでは、NATIVE_CHILDRENの値はtrueであると予想されます。驚いたことに、Chrome、Safari、Operaでは、値はfalseです（残念ながら、IEがそれについてどう考えているかを確認するためにWindowsでマシンを操作するためのアクセス権がありません）。

DOM4-Free Editor's Draft 5 April 2012 [http://dom.spec.whatwg.org/#element]によると、子はElementオブジェクトのプロトタイプの一部である必要があります。どうやらChrome、Safari、OperaのElementオブジェクトにはそのようなメソッドは含まれていません！

HTMLCollectionとNodeのプロトタイプをチェックしようとしましたが（HTMLParagraphElementとHTMLBodyElementもテストしました）、「children」というメソッドが含まれていないようです（Firefoxを除く）。クロスブラウザで動作するようにテストを行うにはどうすればよいですか？これは私自身の小さなライブラリ用であるため、このために外部ライブラリを使用したくありません。

4

3 に答える 3

2

このテストがChromeでfalseを返す可能性がある理由は、プロトタイプをチェックしているためだと思います。いくつかの理由から、これは最善の方法ではありません。

  • さまざまなブラウザがプロトタイプのさまざまな実装を使用できます（実際に使用します）。たとえば、一部のプロトタイプはIEでアクセスできません。この場合、あなたの問題は、クロムがでは__proto__なく（非標準の）プロパティに依存している結果だと思いますprototype。いつか思い出せませんが、Chromeでも同様の問題があり、これが問題の原因でした。

  • AFAIKのすべてのブラウザには、要素の子プロパティがありますが、動作が異なる場合もあるため、そのようなプロパティの存在を確認する方法については疑問があります。

  • それでもこれを確認したい場合は、使用してみませんdocument.body.hasOwnProperty('children')か？FF、Chrome、Safari、IEでtrueを返します。

于 2012-06-23T18:20:37.287 に答える
2

これは、一部のエンジンchildrenが要素作成の属性のみを叩くためです。Chromeコンソールでの簡単なテストは、次のことを示しています。

Element.prototype.hasOwnProperty( 'children' ); //false
//however,
document.createElement( 'foo' ).hasOwnProperty( 'children' ); //true
//or even
!!document.createElement( 'foo' ).children; //true

非関数プロパティはprototype、単純な理由で、に表示されないことがよくあります。まだ設定されておらず、表示されるかどうかは意味がありません。Element.prototype要素ではないため、子はありません。要素のプロトタイプです。

于 2012-06-23T18:27:56.133 に答える
1

if( 'children' in document.body)プロトタイプをいじるよりもチェックする方が安全です。引用符に注意することが重要です。そうでない場合は、変数childrenが使用/作成される可能性があります...

QuirksModeによると、Firefox 3を除くすべてのブラウザーがサポートchildrenしているため（そのブラウザーでテストしたときに機能したので、私は驚きました...）、このプロパティをテストする必要はありません。

于 2012-06-23T18:27:03.600 に答える