IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます-jsチュートリアル-php.cn

Netscape が最初に Mozilla ブラウザを開発したとき、W3C 標準をサポートすることを賢明に決定しました。したがって、Mozilla は Netscape Navigator 4.x および Microsoft Internet Explorer のレガシーコードと完全な下位互換性を持っていません。たとえば、後で説明するように、Mozilla は  をサポートしません。 Internet Explorer 4 これらのブラウザは、W3C 標準の概念が存在する前に構築され、多くの特徴を継承しています。この記事では、Internet Explorer や他のレガシーブラウザに強力な HTML 下位互換性機能を提供する Mozilla の特別なモードについて説明します。

当時 W3C には対応する標準が存在しないため、XMLHttpRequest やリッチテキスト編集など、Mozilla がサポートする非標準テクノロジについても説明します。これらには、

HTML 4.01 および XHTML 1.0/1.1
カスケードスタイルシート (CSS):
CSS レベル 1、CSS レベル 2 および CSS レベル 3 部分。
ドキュメントオブジェクトモデル (DOM):
DOM レベル 1、DOM レベル 2および DOM レベル 3 の一部
数学マークアップ言語:
MathML バージョン 2.0
拡張マークアップ言語 (XML):
XML 1.0、XML の名前空間、スタイルシートと XML ドキュメントの関連付け 1.0、XML のフラグメント識別子
:
XSLT 1.0
XML パス言語:
>リソース記述フレームワーク:
RDF
簡易オブジェクトアクセスプロトコル:
SOAP 1.1
ECMA-262 リビジョン 3 (JavaScript 1.5):
ECMA
一般的なクロスブラウザーコーディングのヒント

Web 標準は存在しますが、異なるブラウザはまったく同じ動作をするわけではありません (実際、同じブラウザでも異なるプラットフォームでの動作は異なります)。 Internet Explorer などの多くのブラウザは、W3C 準拠のブラウザでは広くサポートされていない W3C 以前の API を依然としてサポートしています。 IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます Mozilla と Internet Explorer の違いを詳しく説明する前に、将来的に新しいブラウザーのサポートを追加できるように、Web アプリケーションを拡張可能にする基本的な方法をいくつか説明します。

異なるブラウザでは同じ機能に対して異なる API が使用される場合があるため、コード内に多くの if() else が表示されることがよくあります () ブロックを使用して、ブラウザごとに異なる処理を行います。次のコードブロックは Internet Explorer 用です:

if() else()

上記のコードは拡張可能ではありません。新しいブラウザをサポートする必要がある場合は、Web アプリケーション内のすべてを変更する必要があります。 . このようなコードブロック。

 . . . 

var elm; 

if (ns4) 
 elm = document.layers["myID"]; 
else if (ie4) 
 elm = document.all["myID"];

ログイン後にコピー

新しいブラウザーの再コーディングを回避する最も簡単な方法は、関数を抽象化することです。ネストされた if() else()  ブロックを使用しないでください。共通のタスクを別の関数に抽象化すると、効率が向上します。これにより、コードが読みやすくなるだけでなく、新しいクライアントサポートの追加も簡単になります:

上述代码仍然存在浏览器嗅探 或者检测用户使用何种浏览器的问题。浏览器嗅探一般通过用户代理完成，比如：

 
 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016

ログイン後にコピー

虽然使用用户代理来嗅探浏览器提供了所用浏览器的详细信息，但是出现新的浏览器版本时处理用户代理的代码可能出错，因而需要修改代码。

如果浏览器的类型无关紧要（假设禁止不支持的浏览器访问 Web 应用程序），最好通过浏览器本身的能力来嗅探。一般可以通过测试需要的 JavaScript 功能来完成。比如，与其使用：

 
 if (isMozilla || isIE5)

ログイン後にコピー

不如用：

 
 if (document.getElementById)

ログイン後にコピー

这样不用任何修改，在其他支持该方法的浏览器如 Opera 或 Safari 上也能工作。

但是如果准确性很重要，比如要验证浏览器是否满足 Web 应用程序的版本要求或者尝试避免某个 bug，则必须使用用户代理嗅探。

JavaScript 还允许使用内嵌条件语句，有助于提高代码的可读性：

 
 var foo = (condition) ? conditionIsTrue : conditionIsFalse;

ログイン後にコピー

比如，要检索一个元素，可以用如下代码：

 function getElement(aID){ 
 return (document.getElementById) ? document.getElementById(aID)
          : document.all[aID];
}

ログイン後にコピー

回页首

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます Mozilla 和 Internet Explorer 的区别

首先讨论 Mozilla 和 Internet Explorer 在 HTML 行为方式上的区别。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます 工具提示

遗留浏览器在 HTML 中引入了工具提示，在链接上显示 alt 属性作为工具提示的内容。最新的 W3C HTML 规范增加了 title 属性，用于包含链接的详细说明。现代浏览器应该使用 title 属性显示工具提示，Mozilla 仅支持用该属性显示工具提示而不能用 alt 属性。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます实体

HTML 标记可以包含多种实体，W3 标准体专门作了规定。可以通过数字或者字符引用来引用这些实体。比如，可以用 #160 或者等价的字符引用   来引用空白字符  。

一些旧式浏览器，如 Internet Explorer，有一些怪异的地方，比如允许用正常文本内容替换实体后面的分号（;）：

 
 &nbsp Foo 
 &nbsp&nbsp Foo

ログイン後にコピー

Mozilla 将把上面的 &nbsp 呈现为空格，虽然违反了 W3C 规范。如果后面紧跟着更多字符，浏览器就不能解析 &nbsp，如：

 
 &nbsp12345

ログイン後にコピー

这样的代码在 Mozilla 中无效，因为违反了 W3 标准。为了避免浏览器的差异，应坚持使用正确的形式（ ）。

回页首

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます DOM の違い

ドキュメントオブジェクトモデル (DOM) は、ドキュメント要素を含むツリー状の構造です。これは、W3C が標準を定めている JavaScript API を介して操作できます。ただし、W3C 標準化の前に、Netscape 4 と Internet Explorer 4 はこの API を同様の方法で実装していました。 Mozilla は、W3C 標準でサポートされていないレガシー API のみを実装します。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます 要素へのアクセス

要素の参照はブラウザ間で取得されないため、取得する必要があります。 < code>document.getElementById(aID)document.getElementById(aID) を使用します。このメソッドは Internet Explorer 5.5、Mozilla で使用でき、DOM レベルの一部です。 1仕様。

Mozilla は、document.elementName<code>document.elementName を介した要素へのアクセス、さらには要素名による要素へのアクセスをサポートしていませんが、Internet Explorer はメソッド ( 世界的な名前空間汚染としても知られています)。 Mozilla は、Netscape 4 の document.layers<code>document.layers メソッドと Internet Explorer の document.all<code>document.all メソッド。要素を取得するための document.getElementById<code>document.getElementById に加えて、document .layers <code>document.layers と document.all<code>document.all は、特定のタグ名を持つすべてのドキュメント要素のリストを取得します。たとえば、すべての < code>

<code> 

要素。

W3C DOM レベル 1 getElementsByTagName()<code>getElementsByTagName() メソッドを使用して、同じタグ名引用。このメソッドは JavaScript で配列を返します。この配列は document<code>document 要素に使用でき、また、他のノードで使用して、対応するサブツリー。 DOM ツリー内のすべての要素のリストを取得するには、getElementsByTagName(*)<code>getElementsByTagName(*) を使用します。

DOM レベル 1 メソッドを表 1 に示します。そのほとんどは、要素を特定の位置に移動したり、その表示 (メニュー、アニメーション) を切り替えたりするために使用されます。 Netscape 4 は、任意に配置可能な HTML 要素として  タグ (Mozilla ではサポートされていません) を使用します。 Mozilla では、

<code> 

タグの位置を使用します。これらは Internet Explorer でも使用され、HTML 仕様に含まれています。

表 1. 要素へのアクセスに使用されるメソッド

方法	说明
document.getElementById( aId )	返回具有指定 ID 的元素的引用。
document.getElementsByTagName( aTagName )	返回文档中具有指定名称的元素数组。

メソッド<🎜>

<🎜>説明 <🎜>

document.getElementById( aId )

指定された要素を持つ要素を返します。 ID 要素への参照。

document.getElementsByTagName( aTagName )

ドキュメント内の指定された名前を持つ要素の配列を返します。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます 遍历 DOM

Mozilla 通过 JavaScript 支持遍历 DOM 树的 W3C DOM API（如表 2 所示）。文档中每个节点都可使用这些 API 方法，可以在任何方向上遍历树。Internet Explorer 也支持这些 API，还支持原来用于遍历 DOM 树的 API，比如 children 属性。

表 2. 用于遍历 DOM 的方法

属性/方法	说明
childNodes	返回元素所有子节点的数组。
firstChild	返回元素的第一个子节点。
getAttribute( aAttributeName )	返回指定属性的值。
hasAttribute( aAttributeName )	返回一个 Boolean 值表明当前节点是否包含指定名称的属性。
hasChildNodes()	返回一个布尔指表明当前节点是否有子节点。
lastChild	返回元素的最后一个子节点。
nextSibling	返回紧接于当前节点之后的节点。
nodeName	用字符串返回当前节点的名称。
nodeType	返回当前节点的类型。值说明1元素节点2属性节点3文本节点4CDATA 选择节点5实体引用节点6实体节点7处理指令节点8注释节点9文档节点10文档类型节点11文档片断节点12符号节点
nodeValue	返回当前节点的值。对于包含文本的节点，如文本和注释节点返回其字符串值。对于属性节点返回属性值。其他节点返回 `<span style="font-family:NSimsun">null</span>`。
ownerDocument	返回包含当前节点的 `<span style="font-family:NSimsun">document</span>` 对象。
parentNode	返回当前节点的父节点。
previousSibling	返回当前节点之前的相邻节点。
removeAttribute( aName )	从当前节点中删除指定的属性。
setAttribute( aName, aValue )	设置指定属性的值。

Internet Explorer 有一种非标准的特殊行为，这些 API 很多跳过（比如）新行字符生成的空白文本节点。Mozilla 则不跳过，因此有时候需要区分这些节点。每个节点都有一个 nodeType 属性指定了节点类型。比如，元素节点类型是 1，文本节点是 3，而注释节点是 8。仅处理元素节点最好的办法是遍历所有子节点，然后处理那些 nodeType 为 1 的节点：

 
 HTML:Test 
 cJavaScript: 
 var myDiv = document.getElementById("foo"); 
 var myChildren = myXMLDoc.childNodes; 
 for (var i = 0; i < myChildren.length; i++) { 
  if (myChildren[i].nodeType == 1){ 
  // element node
  }
 }

ログイン後にコピー

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます コンテンツの生成と操作

Mozilla は、コンテンツへの動的追加をサポートしています。 DOM レガシーメソッド (document.write<code>document.write、document.open など) <code>document.open と document.close<code>document.close。 Mozilla は、基本的にどのノードでも動作する Internet Explorer の InnerHTML<code>InnerHTML メソッドもサポートしています。ただし、OuterHTML<code>OuterHTML (要素の周囲にタグを追加します。標準には同等のメソッドはありません) と innerText<code>innerText (ノードのテキスト値を設定します。Mozilla では、textContent<) を使用できます。 🎜>)。 textContent

Internet Explorer には、値の取得、テキストの挿入、ノードに隣接する要素の挿入 (

<span style="font-) など、Mozilla でサポートされていない非標準のコンテンツ操作メソッドがいくつかあります。 family:NSimsun ">getAdjacentElement<p>

と insertAdjacentHTML<code>getAdjacentElement。表 3 は、任意の DOM ノードに適用されるコンテンツを操作するための W3C 標準と Mozilla のメソッドを示しています。 insertAdjacentHTML

表 3. コンテンツを操作するための Mozilla メソッド

メソッド

方法	说明
appendChild( aNode )	创建新的子节点。返回新建子节点的引用。
cloneNode( aDeep )	创建调用节点的副本并返回。如果 aDeep 为 true，则复制该节点的整个子树。
createElement( aTagName )	创建并返回一个 aTagName 指定类型的无父 DOM 节点。
createTextNode( aTextValue )	创建并返回一个新的无父 DOM 文本节点，值由 aTextValue 指定。
insertBefore( aNewNode, aChildNode )	在 aChildNode 前插入 aNewNode，前者必须是当前节点的子节点。
removeChild( aChildNode )	删除 aChildNode 并返回对它的引用。
replaceChild( aNewNode, aChildNode )	用 aNewNode 替换 aChildNode 并返回被删除节点的引用。

< /td >

説明

appendChild( aNode )

新しい子ノードを作成します。新しく作成された子ノードへの参照を返します。

cloneNode( aDeep )

呼び出し元ノードのコピーを作成して返します。 aDeep が true の場合、ノードのサブツリー全体がコピーされます。

createElement( aTagName )

aTagName で指定されたタイプの親のない DOM ノードを作成して返します。

createTextNode( aTextValue )

aTextValue で指定された値を持つ新しい親のない DOM テキストノードを作成して返します。

insertBefore( aNewNode, aChildNode )

ChildNode の前に aNewNode を挿入します。前者は現在のノードの子ノードである必要があります。

removeChild( aChildNode )

aChildNode を削除し、それへの参照を返します。

replaceChild( aNewNode, aChildNode )

aChildNode を aNewNode に置き換え、削除されたノードへの参照を返します。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されますドキュメントスニペット

getElementByIdappendChildパフォーマンス上の理由から、既存のドキュメントの DOM を処理する代わりに、メモリ内にドキュメントを作成することができます。 DOM レベル 1 コアでは、一般的なドキュメントインターフェイスのサブセットを含む軽量ドキュメントであるドキュメントフラグメントが導入されています。たとえば、getElementById はありませんが、appendChild<🎜 はあります。 ></コード> 。既存のドキュメントにドキュメントのスニペットを追加するのは簡単です。 <code>document.createDocumentFragment()Mozilla は document.createDocumentFragment() を使用してドキュメントフラグメントを作成します。このメソッドは空のドキュメントフラグメントを返します。

ただし、Internet Explorer のドキュメントフラグメントの実装は W3C 標準に従っておらず、通常のドキュメントのみを返します。

回页首

<🎜>戻るページの先頭

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます JavaScript 差异

Mozilla 和 Internet Explorer 的多数差异都和 JavaScript 有关。但问题通常源自浏览器向 JavaScript 公开的 API，比如 DOM 钩子。两种浏览器在核心 JavaScript 上区别不大，遇到的问题通常和时间有关。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます JavaScript date 差异

Date 惟一的区别是 getYear 方法。根据 ECMAScript 规范（这是 JavaScript 所遵循的规范），该方法没有解决千年问题，在 2004 年运行 new Date().getYear() 将返回“104”。根据 ECMAScript 规范，getYear 返回的年份减去 1900 最初是为了在 1998 年返回“98”。ECMAScript Version 3 废止了 getYear，用 getFullYear() 代替。Internet Explorer 修改了 getYear() 使其和 getFullYear() 类似，消除了千年问题，而 Mozilla 坚持采用标准的行为方式。

IBM 公式情報によると、アプリケーションは Internet Explorer から Mozilla に移行されます JavaScript 执行差异

不同的浏览器执行 JavaScript 的方式是不同的。比如，下列代码假设 script 块执行的时候 p 节点已经存在于 DOM 中：