IBM official information migrates applications from Internet Explorer to Mozilla-JS Tutorial-php.cn

When Netscape first developed the Mozilla browser, it wisely decided to support W3C standards. Therefore, Mozilla is not fully backwards compatible with Netscape Navigator 4.x and Microsoft Internet Explorer legacy code. For example, as mentioned later, Mozilla does not support . Internet Explorer 4 These browsers, built before the concept of W3C standards existed, inherited many quirks. This article discusses Mozilla's special mode that provides powerful HTML backward compatibility features for Internet Explorer and other legacy browsers.

I will also discuss the non-standard technologies that Mozilla supports, such as XMLHttpRequest and rich text editing, since the W3C does not have corresponding standards at the time. These include:

HTML 4.01 and XHTML 1.0/1.1
Cascading Style Sheets (CSS): CSS Level 1, CSS Level 2 and CSS Level 3 part.
Document Object Model (DOM): DOM Level 1, DOM Level 2 and Parts of DOM Level 3
Math Markup Language: MathML Version 2.0
Extensible Markup Language (XML): XML 1.0, Namespaces in XML, Associating Style Sheets with XML Documents 1.0、Fragment Identifier for XML
:XSLT 1.0
XML Path Language: >Resource Description Framework:
Simple Object Access Protocol:
ECMA-262 Revision 3 (JavaScript 1.5):

IBM official information migrates applications from Internet Explorer to Mozilla Although web standards exist, different browsers do not behave exactly the same (in fact the same browser in different The behavior on the platform is also different). Many browsers, such as Internet Explorer, still support pre-W3C APIs that have never been widely supported in W3C-compliant browsers. Before we dive into the differences between Mozilla and Internet Explorer, let's first cover some basic ways to make your web applications extensible so that you can add support for new browsers in the future.

Because different browsers sometimes use different APIs for the same functionality, you often see a lot of if() else in your code ()

block to treat different browsers differently. The following code block is for Internet Explorer:

if() else()

 . . . 

var elm; 

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

Copy after login

The above code is not extensible. If you need to support new browsers, you must modify everything in the web application. code block like this.

The easiest way to avoid recoding for new browsers is to abstract functions. Do not use nested if() else() blocks. Abstracting common tasks into separate functions can improve efficiency. This not only makes the code easier to read, but also makes it easier to add new client support:

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

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

Copy after login

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

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

 
 if (isMozilla || isIE5)

Copy after login

不如用：

 
 if (document.getElementById)

Copy after login

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

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

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

 
 var foo = (condition) ? conditionIsTrue : conditionIsFalse;

Copy after login

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

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

Copy after login

回页首

IBM official information migrates applications from Internet Explorer to Mozilla Mozilla 和 Internet Explorer 的区别

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

IBM official information migrates applications from Internet Explorer to Mozilla 工具提示

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

IBM official information migrates applications from Internet Explorer to Mozilla 实体

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

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

 
 &nbsp Foo 
 &nbsp&nbsp Foo

Copy after login

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

 
 &nbsp12345

Copy after login

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

回页首

IBM official information migrates applications from Internet Explorer to Mozilla DOM Differences

The Document Object Model (DOM) is a tree-like structure that contains document elements. It can be manipulated via a JavaScript API, for which the W3C has a standard. But before W3C standardization, Netscape 4 and Internet Explorer 4 implemented this API in a similar way. Mozilla only implements those legacy APIs that are not supported by W3C standards.

IBM official information migrates applications from Internet Explorer to Mozilla Accessing the element

References of elements are not retrieved in a cross-browser manner and should be used < code>document.getElementById(aID)document.getElementById(aID), this method can be used in Internet Explorer 5.5, Mozilla, and is part of the DOM Level 1 specification.

Mozilla does not support accessing elements via document.elementName<code>document.elementName or even by element name, while Internet Explorer does method (also known as global namespace pollution). Mozilla also does not support Netscape 4's document.layers<code>document.layers method and Internet Explorer's document.all<code>document.all method. In addition to document.getElementById<code>document.getElementById to retrieve elements, document .layers<code>document.layers and document.all<code>document.all get a list of all document elements with a specific tag name, such as all < code>

<code> 

element.

W3C DOM Level 1 Use the getElementsByTagName()<code>getElementsByTagName() method to get all elements with the same tag name citation. This method returns an array in JavaScript, which can be used for document<code>document elements, and can also be used for other nodes to retrieve only the corresponding subtree. To get a list of all elements in the DOM tree, use getElementsByTagName(*)<code>getElementsByTagName(*).

DOM Level 1 methods are listed in Table 1, most of which are used to move an element to a specific position or toggle its visibility (menus, animations). Netscape 4 uses the  tag (not supported by Mozilla) as an arbitrarily positionable HTML element. In Mozilla, use 

<code> 

Tags position elements. They are also used by Internet Explorer and are included in the HTML specification.

Table 1. Methods used to access elements

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

Method <🎜>

<🎜>Description <🎜>

document.getElementById( aId )

Returns the element with the specified ID A reference to the element.

document.getElementsByTagName( aTagName )

Returns an array of elements with the specified name in the document.

IBM official information migrates applications from Internet Explorer to 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
  }
 }

Copy after login

IBM official information migrates applications from Internet Explorer to Mozilla Generate and manipulate content

Mozilla supports dynamically adding content to the DOM legacy methods, such as document.write<code>document.write, document.open<code>document.open and document.close<code>document.close. Mozilla also supports Internet Explorer's InnerHTML<code>InnerHTML method, which works on basically any node. However, OuterHTML<code>OuterHTML (adding tags around elements, and there is no equivalent method in the standard) and innerText<code>innerText (Set the text value of the node, in Mozilla you can use textContent<code>textContent).

Internet Explorer has some non-standard content manipulation methods that are not supported by Mozilla, including retrieving values, inserting text, and inserting elements adjacent to a node, such as getAdjacentElement<code>getAdjacentElement and insertAdjacentHTML<code>insertAdjacentHTML. Table 3 illustrates W3C standards and Mozilla methods for manipulating content that apply to any DOM node.

Table 3. Mozilla methods for manipulating content

方法	说明
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 并返回被删除节点的引用。

Methods

< /td>

Description

appendChild( aNode )

Create a new child node. Returns a reference to the newly created child node.

cloneNode( aDeep )

Create a copy of the calling node and return it. If aDeep is true, the entire subtree of the node is copied.

createElement( aTagName )

Creates and returns a parentless DOM node of the type specified by aTagName.

createTextNode( aTextValue )

Creates and returns a new parentless DOM text node with the value specified by aTextValue.

insertBefore( aNewNode, aChildNode )

Insert aNewNode before aChildNode, the former must be a child node of the current node.

removeChild( aChildNode )

Removes aChildNode and returns a reference to it.

replaceChild( aNewNode, aChildNode )

Replaces aChildNode with aNewNode and returns a reference to the deleted node.

IBM official information migrates applications from Internet Explorer to Mozilla

Document Snippet

getElementByIdappendChild

For performance reasons, it is possible to create documents in memory instead of processing the DOM of an existing document. DOM Level 1 Core introduces document fragments, which are lightweight documents containing a subset of the general document interface. For example, there is no getElementById but there is

<span style="font-family:NSimsun">appendChild<code><span style="font-family:NSimsun">document.createDocumentFragment()</span>

. It's easy to add document snippets to existing documents.

Mozilla uses document.createDocumentFragment() to create a document fragment. This method returns an empty document fragment.

However, Internet Explorer's document fragment implementation does not follow W3C standards and only returns ordinary documents.

回页首

<🎜>

<🎜>Back Top of page

IBM official information migrates applications from Internet Explorer to Mozilla JavaScript 差异

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

IBM official information migrates applications from Internet Explorer to 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 official information migrates applications from Internet Explorer to Mozilla JavaScript 执行差异

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