フロントエンドブラウザのJavaScriptとCSSの互換性の概要

フロントエンドブラウザのJavaScriptとCSSの互換性のまとめ

1. getElementById

[標準リファレンス]

getElementByIdは、Documentインターフェースによって提供されるメソッドであり、これによって渡されるパラメータを取得するために使用されます。メソッドはターゲット要素の値である必要があり、ターゲット要素の ID は大文字と小文字が区別される文字列であり、ドキュメント内で一意である必要があります。

【問題内容】

ただし、IE6 IE7 IE8(Q) では、name 属性値が elementName である A APPLET BUTTON FORM IFRAME IMG INPUT MAP META OBJECT EMBED SELECT TEXTAREA 要素を document.getElementById(elementName) によって取得することがサポートされています。 ) そして、ID は大文字と小文字を区別しません。

【影響】

この問題により、IE 以外のブラウザでは対象の要素が取得できなくなります。

【解決策】

document.getElementById メソッドを使用してページ要素を取得する場合、要素の name 属性値の代わりに要素の id 属性値を渡す必要があり、大文字と小文字は厳密に区別されます。同時に、ページ内の要素の id 属性値を他の要素の name 属性値と重複させることはできないことに注意してください。

さらに、getElementById と同様に、標準の getElementsByName では大文字と小文字が区別されますが、IE では大文字と小文字が区別されないため、使用するときは厳密に大文字と小文字を区別することが最善です。

2. IEはDOMツリー作成時に一部の空白文字を無視します

[標準リファレンス]

ノード(ノード)には要素ノードだけでなく、テキストノード、コメントノード、属性ノードなどが含まれます。区別するには、nodeType を使用します。

HTML ソース コードでは、タグ内およびタグ間にあるテキスト (空白文字を含む) がテキスト ノードとして作成されます。

【問題の説明】

IEはDOMツリーを作成する際に一部の空白文字を無視するため、他のブラウザよりも作成されるテキストノードの数が少なくなります。一方、同じドキュメントに対して、他のブラウザは IE よりも多くのテキスト ノードを作成します。

【影響】

ユーザーがIE向けに設計したスクリプトでnodeオブジェクトのnodeList、firstChild、lastChild、previousSibling、nextSiblingメソッドを使用している場合、この問題により他のブラウザでは同じ目的を達成できない可能性があります。エラーが発生したか、間違ったターゲット オブジェクトに対して操作が実行されたなど。

【解決策】

1. 各ラベル間の空白文字が不要な場合は削除してみてください。

ページ スクリプトは主に「要素ノード」で動作するため、要素間にテキスト ノードがないことを確認してください (つまり、ソース コード内のラベル間に空白文字 (スペース、改行、タブを含む) がないこと)、上記のプロパティをブラウザ間で一貫して動作させることができます。

さらに、スクリプトを使用して作成され、順次追加される要素は互いに密接に関連しています。そのため、この場合、次のような上記の互換性の問題を心配する必要はありません。ノード取得時に型判定を行います。

要素間にテキストノードが存在しない保証がない場合は、ノードに対する操作に型判定を追加する必要があります。

さらに、非 IE では、previousElementSibling と nextElementSibling を使用して要素ノードを取得することもできます。たとえば、Element.nextElementSibling を使用して、要素 Element に隣接する次の要素ノードを取得します。

3. document、document.body、documentElement オブジェクトの onscroll イベントの違い

[標準リファレンス]

scroll イベントは、ドキュメントまたは要素がスクロールされたときにトリガーされます。

[問題の説明]

document、document.body、および document.documentElement オブジェクトの onscroll イベントのサポートには、さまざまなブラウザー間で差異があります。

すべてのブラウザーは、ウィンドウと通常の DIV オブジェクトのスクロール イベントをサポートします。 IE と Opera では、 document オブジェクトと document.body オブジェクトがスクロール イベントをサポートします。他のブラウザではサポートされていません。

IE では、 document.documentElement オブジェクトはスクロール イベントをサポートします。他のブラウザではサポートされていません。

【影響】

onscroll イベントを document、document.body、document.documentElement オブジェクトにバインドした後、対応するイベント処理関数が異なるブラウザーで期待どおりにトリガーされない場合があります。

【解決策】

スクロールイベント(scroll)をブラウザウィンドウ全体にバインドする場合は、windowオブジェクトにバインドします。

4. IE の createElement メソッドのみが HTML 文字列をパラメータとして渡すことをサポートしています

[標準リファレンス]

W3C DOM Level2 Core 仕様の説明によると、Document インターフェイスの createElement メソッドは要素ノード オブジェクトを作成できます。実例。 HTML では、このパラメータは任意の形式にすることができ、DOM で実装できる準拠した大文字形式にマップする必要があります。つまり、tagName は正当なタグ名である必要があります。 tagName に不正な文字が含まれている場合は、INVALID_CHARACTER_ERR 例外がスローされます。

【問題の説明】

IE6 IE7 IE8 では、createElement メソッドは正当なタグ名を通じてノード オブジェクトを作成できるだけでなく、正当な HTML コード文字列をパラメータとして渡すことによってノード オブジェクトを作成することもできます。

【影響を与える】

正当な HTML コード文字列をパラメータとして createElement に渡してノード オブジェクトを作成する IE の独自の方法を使用すると、他のブラウザでは例外がスローされ、後続のコードは実行されません。

【解決策】

一般的な置換不可能な要素については、W3C仕様では各ブラウザのcreateElementメソッドにタグ名を渡すという標準的な方法が採用されています。

要素の置き換えに関する一部の IE 処理の問題については、IE の場合、正当な HTML コード文字列をパラメータとして createElement に渡す独自のメソッドを使用するように注意してください。 、例:

互換性のないコード、IE でのみサポート:

Var iframe = document.createElement('