• 다운로드
• 제품소개
• 기술지원
• 개발자
• 모질라소개

웹개발자 문서
• 모질라용 코딩
  • 웹제작 FAQ
  • 웹표준 사용하기
  • 모질라 쿼크모드
    DOCTYPE 스니핑
    쿼크 비헤이비어
  • MIME타입처리방식
  • Netscape DevEdge
• 문서양식
  • HTML4설명서
  • XML설명서
  • XML 네임스페이스
  • XML과 게코엔진
  • XML 변형
• 스타일
  • CSS1설명서
  • Mozilla 주석버전
  • CSS2설명서
• 스크립트
  • 자바스크립트
    핵심 자바스크립트
    핵심 자바스크립트
  • 모질라 객체모델
    모질라에서 문서 객체모델
  • Mozilla DOM 참고자료
    자바스크립트 지침
    자바스크립트 참고자료
    자바스크립트 작성자료
  • W3C DOM Level 1
    DOM Level 1설명서
    DOM Level 2 핵심내용
    DOM Level 2 HTML핵심
    DOM Level 1 표준지원
    HTML DOM Level 1 표준지원 DOM Level 1 사용
    DOM에서 공백
    다양한 HTML 테이블표현
    DOM 예제
  • W3C DOM Level 2
    DOM Level 2 Style설명서
    DOM Level 2 Events설명서
    자바스크립트 CSS1 코드작성기

웹페이지에 웹표준 사용하기

웹개발자들 사이에서 DHTML을 추가하거나 웹페이지의 크로스브라우저 지원이라고 여겨진 수많은 요소와 관행들이 W3C HTML 4.0과 문서객체모델 사양에서 제외되었습니다. 예를 들어, <LAYER> 과 document.layers[]과 같은 객체는 실제로 어떤 웹표준에 해당하지도 않습니다. 네스케이스 게코TM-기반 모질라와 네스케이프 6/7과 같은 W3C 표준을 따르는 새로운 브라우저는 이들 속성과 비호환 요소를 지원하지 않습니다.

A number of elements and practices considered "standard" among web developers for adding DHTML and/or cross-browser support to their web pages were excluded from the W3C HTML 4.0 and Document Object Model specifications. Tags like <LAYER> and objects like document.layers[], for example, are actually not a part of any web standard. Newer browsers that comply with the W3C standards, such as the Netscape Gecko^TM-based Mozilla and Netscape 6/7, do not support these proprietary and non-compliant elements.

여기에 있는 내용은 여러분의 웹페이지를 W3 웹표준에 맞도록 업그레이드 방법을 개괄한 내용입니다. 표준과 다른 일반 관행을 반전하여 표시하였으며 대체방법을 제공하며, 그리고 마지막 단원의 변경내용 요약은 이 글에서 설명한 모든 변경사항을 정리하였습니다.

This article provides an overview of the process for upgrading the content of your web pages to conform to the W3 Web standards. The various sections highlight areas in which common practices are at odds with the standards and suggest replacements, and the final section, Summary of Changes, outlines all the changes described in this article.

웹개발에서 표준을 사용한다는 것은 정말로  브라우저나 플랫폼에 상관없이, 일관된 구성과 풍부한 문서객체모델로, 가독성있으면 확장할 수 있도록, 그리고 더나아가 표준화작업 그 자체의 대의에 맞게 여러분의 사이트를 만든다는 것입니다.

Using standards in your web development makes your pages genuinely cross-browser and cross-platform, makes them a part of a coherent and robust document object model, makes them readable and extensible by others, and also furthers the cause of the standardization process itself.

<LAYER NAME="foo" SRC=foo.html>
    <IFRAME ID="foo" SRC=foo.html>
    </IFRAME>
</LAYER>

같은 이름의 IFAME으로 LAYER를 감싸서 외부 파일을 포함시킵니다.
Nav4: LAYER는 처리되고 IFRAME은 무시됩니다.
Nav6와 IE4/5: IFRAME은 처리되고 LAYER는 무시됩니다.

<LAYER NAME="foo" SRC=foo.html>
</LAYER
<IFRAME ID="foo" SRC=foo.html>
</IFRAME>

<LAYER NAME="nav4content" SRC=foo.html>
</LAYER>
<NOLAYER>
  <DIV ID="nav6content">
     <!-- ... bunch of elements ... -->
  </DIV>
</NOLAYER>

<DIV>
 <UL>
  <LI>Red</li>
  <LI>Blue</li>
  <LI>Yellow</li>
 </UL>
</DIV>
<IFRAME SRC="mylist.html"></IFRAME>
<DIV>
 <UL>
  <LI>Red</li>
  <LI>Blue</li>
  <LI>Yellow</li>
 </UL>
</DIV>

권장하지 않는 요소

Deprecated elements

HTML 4에서 권장하지 않는 요소들이 광범위하게 사용되고 있지만, 다른 기술로 대체되었습니다. 권장하지 않는 요소에 대한 지원은 가까운 미래에 광범위하게 이용할 수 있을 것같습니다.

Elements deprecated in HTML 4 are typically in wide use, but have been supplanted by other techniques. Support for the deprecated elements is likely to be widely available for the foreseeable future.

여러 권장하지않는 태그와 제외된 태그의 기능은 W3C 캐스케이딩 스타일 시트 권고사항을 사용으로 대체되고 있습니다. 스타일시트는 강력한 구현과 구성능력을 제공합니다. CSS 전체를 논의하는 것은 이 문서의 범위를 벗어납니다.

The function of several of the deprecated tags (and of some excluded tags, as well) has been assumed by the W3C Cascading Style Sheets recommendation. Style sheets provide powerful presentation and organization capabilities. A full discussion of CSS is beyond the scope of this document.

CSS 전체를 지원은 많은 초기 네비게이터 브라우저를 포함하여 부족한 점이지만, 여기서 설명하고 있는 단순한 레벨에 대한 지원은 Nav4와 IE 4 이후 버전부터, 그리고 실제적으로 모든 현대 브라우저에서 아주 잘 처리됩니다.

While full CSS support is lacking in many early browsers, including early Navigator versions, support for the simple level illustrated here is fairly well implemented from Nav4 and IE4 onwards, and in virtually all modern browsers.

APPLET

APPLET 요소는 HTML 4에서 권하지 않는 것으로 OBJECT를 지원합니다. 두 태그사이의 변환은 보는 그대로입니다 :

The APPLET element is deprecated in HTML 4, in favor of OBJECT. The translation between the two tags is straightforward, e.g.:

<APPLET code="appletname.class"
    codebase="..." archive="..." width="..." height="...">
  <PARAM name="..." value="..."> [...]
</APPLET>

<OBJECT classid="java:appletname.class" type="application/java"
    codebase="..." archive="..." width="..." height="...">
  <PARAM name="..." value="..." /> [...]
</OBJECT>

주의사항 : 임베딩 애플릿에 대한 썬 마이크로시스템즈가 공식화한 HTML은 자바 플러그인을 기반으로하며 윈도우즈 인터넷익스플로러 또는 윈도우즈 네비게이터 또는 리눅스 이외의 다른 시스템에서는 호환되지않는 것같습니다. 게코 엔진은 썬의 EMBED 태그를 지원을 계속하고 있지만, 위에서 언급한 OBJECT 태그와는 전혀 다른 ActiveX를 사용하는 OBJECT 태그를 지원하지 않습니다.

Note: the HTML promulgated by Sun Microsystems for embedding applets is based on the Java Plug-in and is not likely to be compatible with systems other than Internet Explorer for Windows or Navigator for Windows or Linux. While Gecko maintains support for Sun's EMBED tag, it does not support the ActiveX-invoking OBJECT tag (very different from the OBJECT tag above), which is used to run the Java Plug-in.

FONT

비권장 FONT 요소는 글꼴, 색상, 특정 문장의 크기를 지정하는 데 광범위하게 사용됩니다. 이 기능은 HTML와  CSS에서 사라졌습니다. FONT 요소는 동일한 스타일 정보를 포함하는 SPAN 으로 바로 대처할 수 있습니다.

The deprecated FONT element is widely used to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a SPAN element that includes the same style information:

<P><FONT color="blue" face="Helvetica">
A really <FONT size="+1">big</FONT> shoe.
</FONT>

<P><SPAN style="color:blue; font:Helvetica">
A really <SPAN style="font:larger">big</SPAN> shoe.
</SPAN><P>

<P style="color:blue; font:Helvetica">
A really <SPAN style="font:larger">big</SPAN> shoe.
<P>

이렇게 하는 것이 글꼴 변경에 적합한 사용법입니다. 그러나 이것은 스타일을 사용하는 게 최고라는 것은 아닙니다. CSS의 힘은 어떤 문서 모두에 적용할 수 있도록 텍스트를 묶고 논리적 그룹으로 만들어 다른 스타일을 적용하는 데 있는 데, 이 과정에서 모든 요소에 특정 스타일링을 반복할 필요가 없다는 것입니다.

This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.

다른 비권고 요소

비권고 요소	W3C 대체방법
CENTER	CSS1: text-align:center
S STRIKE	CSS1: text-decoration:line-through
U	CSS1: text-decoration:underline
DIR MENU	HTML 4.0: <UL>

다른 제외된 요소

Other Excluded Elements

애니메이션을 위한 수많은 독점적 요소와 어떤 웹표준에도 속하지 않는 다른 편법들이 존재합니다. 이 단원은 이들 요소를 제시하고 W3C HTML 4.0으로 동일한 효과를 얻을 수있는 방식을 제안합니다.

There are a number of proprietary elements used for animation and other tricks that are not a part of any web standard. This section highlights those elements and suggests practices for achieving the same effect with W3C HTML 4.0:

제외된 요소	W3C 대체방법
BLINK Nav2+	CSS1 text-decoration:blink 주의사항 : CSS1 사양은 blink 키워드를 인식하기 위해 사용자 브라우저를 필요로 하는 데, 깜빡임 효과를 지원하지 않는다면, CSS1-준수하는 브라우저는 해당 문구를 화면에 깜빡이게 할 수 있거나 그렇지 못할 수 있습니다. 가장 좋은 방법은 내용에 blink를 전혀 만들지 않는 것입니다. user agents are required by the CSS1 specification to recognize the blink keyword, but not to support the blink effect, so CSS1-compliant browsers may or may not make the text blink on the screen. The best approach is not to make content blink at all.
MARQUEE IE2+	HTMl .40의 DIV 또는 SPAN는 DOM level 1을 사용해서 자바스크립트로 컨텐츠 문자열을 회전시킵니다. 주의사항 : DOM 지원은 브라우저마다 여러가지입니다. 깜빡임(blinking) 문구처럼, 이런 종류는 권장하지 않습니다. HTML 4.0 DIV or SPAN, with content string rotated over time by JavaScript via the DOM level 1. Note: DOM support varies among browsers. As with blinking text, this sort of effect is discouraged.
BGSOUND IE2+	HTML 4.0의 OBJECT 예를 들면 다음과 같다: <OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT> 페이지내에서 볼 수 없는 사운드 OBJECT를 처리방법은 아래의 EMBED 항목의 링크를 참고하기 바랍니다. 주의사항: 위의 텍스트 효과처럼, 페이지와 함께 나오는 음악 또는 사운드는 결코 높이 평가할만하지 않습니다. HTML 4.0 OBJECT, e.g.: <OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT> See link in EMBED item below for information on rendering a sound OBJECT invisible within the page. Note: like the text effects above, music or sound accompanying a page is seldom appreciated.
EMBED Nav2+,IE3+	HTML 4.0의 OBJECT 사용. EMBED 태그를 OBJECT 태그로의 변환 방법은 이 DevEdge 기사를 참고하세요. 주의사항 : EMBED 태그는 W3C 권고사항에 속하지 않지만, 여전히 게코엔진과 다른 현대적인 브라우저가 지원합니다.  지원수준도 각각인데 인터넷익스플로러 기술지원은 대부분의 네스케이프 플러그인과 호환되지않습니다. OBJECT에 대한 기술지원은 보편적이지도, 이전 브라우저에대해서는 더욱 그렇습니다. HTML 4.0 OBJECT. See this DevEdge article for information on translating EMBED tags into OBJECT tags. Note: EMBED has never been part of a W3C HTML recommendation, yet it is still supported by Gecko and other modern browsers. Quality of support varies; Internet Explorer's support is incompatible with most Netscape plugins. Support for OBJECT is not universal, either, particularly for older browsers.

DOM 사용하기

Using the DOM

일부 브라우저에서 document 객체는 요소 배열(array)과 요소 형식을 이용하기 위한 속성을 가지고 있습니다. 예를 들어 document.tags는 객체 모델내에서 특정 요소를 사용하기 위해 네스케이프 4가 사용하는 데, 인터넷익스플로러의 문서 객체 모델에서도 document.all[]이 사용되고 있습니다. 이들 배열(array)의 많은 것은 문서 객체 모델의 사양의 일부가 아니였으며 모질라와 네스케이프 6/7과 같은 표준을 따르는 브라우저에서 자바스크립트 오류를 발생시키게 된다.

The document objects for some browsers have properties for accessing arrays of elements and types of elements. document.tags, for example, is used by Navigator 4 to access particular elements within the object model, just as document.all[] is in the Internet Explorer document object model. Many of these arrays were not made a part of the specification for the Document Object Model, and will cause JavaScript errors in standards-compliant browsers like Mozilla and Netscape 6/7.

W3C 문서 객체 모델은 HTML 페이지에 있는 거의 모든 요소를 작성가능한 객체로써 노출시킵니다. 일반적으로 DOM의 메서드(methods)와 전체 객체 모델은 DHTML 프로그래밍에 사용되는 독점 객체 모델보다 훨씬 더 세밀합니다. 

The W3C Document Object Model exposes almost all of the elements in an HTML page as scriptable objects. In general the methods and overall object model of the DOM are much more sophisticated than the proprietary object models used in DHTML programming.

netscape.com의 이 글은 아래 요약된 해당 개념에 대한 상세한 소개를 제공합니다. 해당 페이지에서 제공되는 스크립트는 W3C DOM을 위한 것이며, 따라서 호환불가능한 DOM 모델의 브라우저에서는 문제를 발생시킵니다.이런 차이를 대처하는 전략을 보려면 아래 브라우저/플랫폼 독립 페이지 개발하기를 보세요.

This article at netscape.com gives a detailed introduction to the concepts summarized below. Note that the scripts provided at that page are designed for the W3C DOM, and will cause problems running on browsers with noncompliant DOM models; see Developing Cross Browser/Cross Platform Pages, below, for strategies on coping with these differences.

지원되지않는 DOM-관련 속성

Unsupported DOM-related Properties

다음의 document 객체 속성(대부분은 네스케이프 4에서 나온 것입니다)은 W3C 객체 모델에서 지원되지 않습니다:

The following document object properties (most originally from Netscape 4) are not supported in the W3C Document Object Model:

• document.layers[]
• document.tags[]
• document.ids[]
• document.classes[]
• document.elementName
  (예를 들어, <p name="yooneek" /> 요소에 대한 참조를 document.yooneek으로 처리합니다)
  (i.e., getting a reference to the element <p name="yooneek" /> with document.yooneek)
• document.all[] (원래 IE에서 만들어진 것입니다)

원래 인터넷 익스플로러에서 만들어진 다음의 요소 속성은 마찬가지로 W3C 문서 객체 모델에서 지원되지 않는 것입니다:

The following element properties (originally from Internet Explorer) are likewise not supported in the W3C Document Object Model:

• element.innerText
• element.innerHTML (게코엔진이 지원합니다.)
• element.outerText
• element.outerHTML

이들 속성을 사용하는 스크립트는 네스케이프 6/7 또는 다른 표준을 따르는 브라우저에서 실행되지않습니다. 대신에 다음 단원에서 설명하는 DOM 사용 방식을 사용하세요. 또한 스타일 규칙을 이용하기 위해 DOM을 사용한 예제라면 문서 스타일과 내용 조작하기를 보세요.

Scripts that use these properties will not execute in Netscape 6/7 or other standards-compliant browsers. Instead, use the DOM access methods described in the next section. Also see Manipulating Document Style and Content for examples of using the DOM to access style rules.

DOM으로 요소 사용하기

Accessing Elements with the DOM

HTML 페이지에서 요소를 사용하는 가장 훌륭하는 방법은 문서 객체 모델 document.getElementById(id)를 호출하는 것입니다. 이런 방법을 사용해서 유일하게 인식되는 요소에 대한 객체 참조를 하게 되는 데, 이렇게 한 뒤에 해당 요소를 작성할 수 있습니다. 예를 들어, 다음의 짧은 예제는 동적으로 DIV 요소의 좌측 여백을 "inset"이라는 ID로 반인치를 설정하는 것을 보여주고 있습니다.

The best practice for getting scriptable access to an element in an HTML page is to call the Document Object Model's document.getElementById(id). This method returns an object reference to the uniquely identified element, which can then be used to script that element. For example, the following short sample dynamically sets the left margin of a DIV element with an ID of "inset" to half an inch:

// HTML내에서는 다음과 같이: <DIV id="inset">Sample Text</DIV>
d = document.getElementById("inset");
d.style.margin-left = ".5in";

요소 그룹을 이용하려면, DOM에서는 getElementsByTagName를 포함하고 있는 데, 이런 식으로 모든 요소의 목록을 주어진 태그 이름으로 순서대로 문서에 보여줍니다.

For accessing a group of elements, the DOM specification also includes getElementsByTagName, which returns a list of all the elements with the given tag name in the order they appear in the document:

anks = document.getElementsByTagName("a");
first_a = anks[0];
alert(first_a.href);

DOM2 사양은 getElementsByTagNameNS라고 부르는 특별한 getElementsByTagName 버전을 포함하기도 하는 데, 이런 식으로 지정된 네임스페이스내에 있는 태그 목록을 보여줍니다. 이런 이용방식과 더불어, DOM은 새로운 요소, 문서단편(fragment), 속성을 생성하는 데, 내용 트리를 넘나드는 데, 그리고 문서 자체와 상호작용할 때 발생하는 이벤트를 처리하는 방식을 제공합니다.

The DOM2 specification also includes a special version of getElementsByTagName called getElementsByTagNameNS, which returns a list of tags within a specified namespace. In addition to these access methods, the DOM provides methods for creating new elements, document fragments, attributes, new content, for traversing the content tree, and for handling events raised as the user interacts with the document itself.

문서 스타일과 내용 조작하기

Manipulating Document Style and Content

Dom을 사용해서 문서의 스타일시트 변경하기

Changing an Document's Style Sheet Using the DOM

다른 브라우저들은 웹페이지에 정의된 스타일 규칙을 이용하여 조작하기 위해서 다른 브라우저를 제공하여왔습니다. 인터넷 익스플로러의 document.all.element.style 속성과 네비게이터 4의 document.tags, document.classes, and document.contextual()는 다음의 예제에서처럼 DOME Level 2 CSS 인터페이스 호출로 대체할 수 있습니다.

Different browsers have provided different ways to access and manipulate the style rules defined for a web page. Internet Explorer's document.all.element.style property and Navigator 4's document.tags, document.classes, and document.contextual() can all be replaced with DOM Level 2 CSS interface calls, as in the following example:

문서의 머릿단(HEAD)에서 스타일시트에 대한 적절한 규칙을 추가하기 위해 DOM level 2 CSS 사용하고 있는 것입니다

Using the DOM level 2 CSS interface to add the appropriate rule to a style sheet in the document's HEAD.

<HTML>
<HEAD>
<TITLE>Demo</TITLE>
    <STYLE ID="ietssxyz" TYPE="text/css"></STYLE>
    <SCRIPT LANGUAGE="JavaScript"> <!--
      var targetStyleSheetID = "ietssxyz";
      function addRuleToStyleElement (name, selector, declaration)
      {
        var styleSheetElement = document.getElementById(name);
        var styleSheetLength = styleSheetElement.length;
        styleSheetElement.insertRule (selector + " { " + declaration + " } ", styleSheetLength);
      }
      addRuleToStyleElement (targetStyleSheetID, "h1", "font-size:44pt");
      //-->
    </SCRIPT>
</HEAD>

DOM을 사용해서 요소의 스타일 변경하기

Changing an Element's Style Using the DOM

다음의 테이블은 웹페이지에서 여러 HTML 요소에 정의된 스타일 규칙을 이용하여 업데이트하는 표준 방식을 설명하는 내용입니다. W3C의 DOM2 권고사항인 CSS2 확장 인터페이스를 참고하세요.

The following table describes standards-based methods for accessing and updating style rules defined for various HTML elements in a web page. See the W3C DOM2 Recommendation, CSS2 Extended Interface.

DOM level 2는 element.style 객체 참조를 사용하여 요소의 CSS 속성에 새로운 값을 할당할 수 있게 해줍니다. 사용자는 DOM의 getElementById 또는 앞서 DOM 이용 단원에서 설명한 다른 방식을 중 하나를 사용하여 해당 스타일에 해당하는 요소를 이용할 수 있습니다.

DOM level 2 provides for the assignment of new values to the CSS properties of an element using the element.style object reference. You can get the element to which that style corresponds by using the DOM's getElementById or one of the other methods described in the DOM access section above.

Nav4: element.visibility = value; IE4/5: element.style.visibility = value;	DOM level 2: element.style.visibility = value;
Nav4: element.left IE4/5: element.style.pixelLeft	DOM level 2: parseInt(element.style.left)
Nav4: element.top IE4/5: element.style.pixelTop	DOM level 2: parseInt(element.style.top)
Nav4: element.moveTo(x,y); IE4/5: element.style.pixelLeft = x;   element.style.pixelTop = y;	DOM level 2:   element.style.left = x + "px";   element.style.top = y + "px";

요소의 CSS 속성의 W3C DOM2 반영

W3C DOM2 Reflection of an Element's CSS Properties

이점은 W3C의 권고사항을 따른다는 점을 염두해 두시고, 요소의 스타일 속성이 반환하는 값은 요소의 스타일 속성만으로 고정 설정을 반영하지만, 부모 요소로부터 상속된 스타일 설정을 포함하는 모든 "계산된 스타일(computed style)"은 아닙니다. 따라서 DOM2를 사용을 통해서 이들 속성을 자바스크립트로부터 읽고 쓰려고한다면, 다음의 접근방석중 하나를 사용하세요.

• 모든 요소의 고정 CSS 선언문을 요소의 스타일 속성에 적도록 합니다.
• 요소를 위한 비고정 CSS 선언문을 사용하도록 하고, DOM을 사용하여 CSS 속성을 자바스크립트로 초기화합니다.

Keep in mind that according to the W3C Recommendation, the values returned by the style property of an element reflect static settings in the element's STYLE attribute only, not the total "computed style" that includes any inherited style settings from parent elements. Therefore, if you wish to read and write these properties from JavaScript through the DOM2, use one of these two approaches:

• Place all of the element's static CSS declarations (if it has any) in the element's STYLE attribute.
• Use no static CSS declarations for the element, and initialize its CSS properties from JavaScript through the DOM.

요소의 CSS 위치지정 속성의 W3C DOM2 반영

W3C DOM2 Reflection of an Element's CSS Positioning Properties

W3C DOM2의 style.left 와 style.top 속성이 반환하는 값은 CSS 단위 접미사(예를 들어 "px")를 포함하는 문자열입니다. Nav4의  element.left 그리고 IE4/5의 element.style.pixelLeft (그리고 상위(top)에 상응하는 속성)은 정수(integer)를 반환합니다. 그렇기 대문에, 여러분이 좌측과 상단 설정에 대한 요소의 인라인 스타일을 정수로 하려면,  parseInt()를 사용하여 문자열로부터 정수를 해석하도록 합니다. 역으로 좌측과 상단에 대한 요소의 인라인 설정을 하려면, 정수값에 단위 문자열을 첨가하여 단위("140px"과 같이)를 포함시킨 문자열로 만들도록 합니다.

The values returned by the W3C DOM2 style.left and style.top properties are strings that include the CSS unit suffix (such as "px"), whereas Nav4 element.left and IE4/5 element.style.pixelLeft (and the corresponding properties for top) return an integer. So, if you want to get the element's inline STYLE settings for left and top as integers, parse the integer from the string by using parseInt(). Conversely, if you want to set the element's inline STYLE settings for left and top, make sure to construct a string that includes the unit (such as "140px") by appending the unit string to the integer value.

DOM을 사용한 요소의 원문 변경

Changing an Element's Text Using the DOM

요소의 실제 원문 내용을 변경한다는 것은 연산이라는 일반적 수단에 비교하여 근본적으로 변화되어왔습니다. 각 요소의 내용은 자식 마디(child node)로 쪼개져서 평문과 하위요소를 구성합니다. 요소의 원문을 변경하기 위해, 해당 작성문은 해당 마디(node)에서 처리됩니다.

Changing the actual text content of an element has changed substantially compared to the normal means of operation. Each element's content is broken up into a set of child nodes, consisting of plain text and subelements. In order to change the text of the element, the script operates on the node

마디(node) 구조와 지원하는 방식(method)은 DOM level 1 권고사항에 정의되어 있습니다.

The node structure and supporting methods are defined in the W3C DOM level 1 recommendation.

해당 요소가 하위요소없이 그냥 원문만 가진다면, element.childNodes[0]로 사용되는 하나의 자식 마디(child node)를 가집니다.  element.innerText는  element.childNodes[0].nodeValue를 쓸 수도 있습니다.

If the element has no subelements, just text, then it (normally) has one child node, accessed as element.childNodes[0]. The rough equivalent of element.innerText is element.childNodes[0].nodeValue.

다음의 예제는 HTML 파일에 이미 존재하는 SPAN 요소의 원문을 수정하는 방법을 보여주고 있습니다.

The following examples show how to modify the text of a SPAN element that already exists in the HTML file.

<body>
  <P>Papa's got <SPAN id="dynatext">a lot of nerve</SPAN>!</P>
  <script type="text/javascript">
    // SPAN 요소를 참조합니다.
    var span_el = document.getElementById("dynatext");
    // span_el.innerText = "a brand new bag" 처리합니다.
    var new_txt = document.createTextNode("a brand new bag");
    span_el.replaceChild(new_txt, span_el.childNodes[0]);
    // 마찬가지인 데, childNodes[0]가 원문마디가 없으면
    // 다소는 위험해서 원하는 작업이 되지않게 됩니다.
    // alternate, slightly more dangerous implementation
    //   (will not work if childNodes[0] is not a text node)
    span_el.childNodes[0].nodeValue = "a brand new bag";
    // span_el.innerHTML = "a brand <b>new</b> bag" 처리합니다
    var new_el = document.createElement(span_el.nodeName);
    new_el.appendChild(document.createTextNode("a brand "));
    var bold_el = document.createElement("B");
    bold_el.appendChild(document.createTextNode("new"));
    new_el.appendChild(bold_el);
    new_el.appendChild(document.createTextNode(" bag"));
    span_el.parentNode.replaceChild(new_el, span_el);
  </script>
</body>

첫번째 예제는 SPAN 내 원문을 바꾸는 상대적으로 단순한 방법을 보여주는 것으로 원문을 새로운 원문 마디로 대체하는 것입니다. 여기서 전재는 SPAN이 단 하나의 원문 자식(child)을 가지는 것으로, 코드는 참(true)이 아니라도 작동하지만, 그 결과는 예상할 수 없다는 것입니다.

The first example shows the relatively simple method of replacing the text in the SPAN by substituting a new text node for the original. The assumption here is that the SPAN has a single, text child; the code would work even if that were not true, but the results might be unexpected.

두번째 예제는 동일한 작업을 수행할 수 있는 더 일관되지만 순차적대입(brute-force) 기술을 보여주는 것입니다. 밝힌 바대로, 첫번째 자식마디(child node)는 원문 노드가 아니라면, 이 작업은 작동하지 않게 됩니다. 비록 하위요소의 마디가 nodeValue가 있더라도, 해당 필드의 내용은 문서에 표시되지않게 됩니다.

The second example shows a more concise but brute-force technique of accomplishing the same thing. As noted, if the first child node is not a text node, this action will not work: altho subelement nodes have a nodeValue, the contents of that field are not displayed in the document.

마지막 예제는 innerHTML설정과 같은 기술을 보여줍니다. 첫번째는 새로운 요소를 구성하는 데, 원래와 같은 형식(span)을 생성합니다. 다음으로 최초 원문 마디, 그 자신의 원문마디를 가지는 B 요소, 그리고 마지막 원문 마디 3개를 추가합니다.  그리고나서 작성문은 SPAN 요소의 부모(P 요소)에 접근해서, 자식마디의 부모 목록에서 원래의 SPAN 대신에 새로운 요소를 사용하게 됩니다. 

The final example shows a technique equivalent to setting innerHTML. First, it constructs a new element, created as the same type (SPAN) as the original. Next it adds three nodes: an initial text node, a B element with its own text node, anda final text node. The script then accesses the SPAN element's parent (the P element), and substitutes the new element for the original SPAN in the parent's list of child nodes.

문서의 내용을 수정하기 위하여 작성문을 바꾼다는 것은 사소한 일은 아닙니다. 이런 변환의 잇점은 네스케이프 6/7 그리고 다른 게코 기반 프로그램과 같은 현대적이며 W3C DOM을 따르는 브라우저에서 작동할 것이라는 점입니다. 그러나 호환성을 역행하려고 하면 다중플랫폼 문제해결을 지연시킬뿐만 아니라 악화시킬 것입니다.

It should be clear that translating scripts to modify document content is not a trivial undertaking. The benefit of such a conversion is that the script will work in modern, W3C DOM-compliant browsers such as Netscape 6/7 and other Gecko-based programs. Requirements of backward compatibility, however, will not only prolong but worsen the difficulties of dealing with multiple platforms.

크로스 플랫폼과 DHTML 개발을 위한 중요한 실천은 여러분의 페이지를 보는 브라우저의 능력을 결정할 수 있게 하는 것입니다. 여러분은 오류를 피해야하고, 가능한 광범위한 사용자에게 여러분이 작성한 작성문을 분명하게 전달할 수 있으면 할 것입니다.

An important practice for doing cross-platform and DHTML development is to able to determine at runtime the capabilities of the browser that are viewing your page. You need to avoid errors, and may want to ensure your script reaches as wide an audience as possible.

공통적으로 사용되는 한가지 방법은 브라우저를 알아내서, 브라우저의 능력에 맞는 수단을 제공하는 것인데, 이것은 문제가 많습니다. 해당 페이지를 방문하는 모든 현재의 브라우저의 능력을 알아야 하기도 하며, 그에 맞는 적절한 코드라는 것이 앞으로의 브라우저에 일어날 일을 안다거나 안전예방서비스(safe fallback service)를 제공하는 데 만족한다는 가정을 두고있고, 무엇보다 브라우저를 알아낼 수 있어야 한다는 것입니다.

One process, commonly used is to attempt to identify the browser, and have the user at design time decide what that means by way of the capabilityies of the browser, this is fraught with problems, it requires the user to have knowledge of the capabilities of all current browsers that may visit the page, and code appropriately for them, it requires the user to make assumptions about what will happen with future browsers, or be content with giving them a safe fallback service, and it requires users to be able to identify browsers in the first place.

이런 처리방법을 간혹 "브라우저 스니핑(browser sniffing)"라고 하는 데, 브라우저의 버전과 형식을 점검하는 ECMAScript 함수로 대개 처리되는 것이며, 필요하다면, 다른 함수를 사용하거나 다른 페이지 또는 웹페이지를 가리키도록 하는 방식입니다. (그러나 이것은 링크, 북마크, 검색엔진, 또는 "잘못된" 브라우저 캐시를 통해서 해당 페이지를 들어갈 수 있기 때문에 안전한 방법은 아닙니다.)

This process, often referred to as "browser sniffing," is usually handled by ECMAScript functions that test the version and type of the browser and, if necessary, use different functions or point the user to different pages or web content (This is very dangerous though as people may enter the page through a link, bookmark, search engine, or cache with a "wrong" browser). The following is a short list of sniffing functions for different browsers:

• 인터넷익스플로러 버전 감지
• 브라우저 스니핑(Browser sniffing) 코드
• 객체 감지
• DOM implementation

appVer = navigator.appVersion;
ver = parseFloat(appVer); // 네스케이프와 다른 브라우저
iePos = appVer.indexOf('MSIE');
if (iePos != -1)
   ver = parseFloat(appVer.substring(iePos+5,appVer.indexOf(';',iePos)));

브라우저 스니핑 코드

Browser Sniffing Code

이 스니핑 코드에서, navigator 객체는 버전에 대한 신호를 전달합니다. 해당 버전이 "6"이면, 브라우저는 네스케이프 6이라고 생각하게 됩니다. 그렇지 않고, 속성 부분으로 "MSIE" 문자열이 발견되면, 해당 브라우저는 IE5가 되는 것이죠. 

In this sniffing code, the navigator object is interrogated for its version. If the version is "6", then the browser is understood to be Netscape 6. Otherwise, if the "MSIE" string is found as part of the property, then the browser is IE5.

if (navigator.appVersion.charAt(0) == "5")
{
   if (navigator.appName == "Netscape")
   {
      isNav6 = true
      alert('NS6')
   }
}
else if (navigator.appVersion.indexOf("MSIE") != -1)
    isIE = true alert('IE')

이런 식의 점검은 그런대로 작동할 수 있지만, 냉철한 독자라면 IE6.0, 오페라 또는 다른 버전의 브라우저은 어떻게 하느냐고 생각할 지 모릅니다. 새로운 브라우저가 나오게 되면, 이에 따라 코드를 업데이트해야 합니다. 이런 방법은 브라우저에 맞추어서 적절한 전환을 할 수 있게는 합니다.

While this kind of checking can work in a crude sense, sharp readers may wonder what happens with IE6.0, Opera 5.0 or other version 5 browsers. As new browsers are released, it becomes necessary to make updates to code such as this, which attempts to narrow down the client and make the appropriate switches.

이런 접근방식의 다른 문제는 브라우저의 실체가 위조될 수 있는 데, 많은 더많은 현대적인 브라우저에는 navigator.appVersion 를 사용자가 설정할 수 있는 문자열이기 때문입니다. 모질라는 "general.useragent.override"라는 환경설정을 이용하고 있고 오페라는 메뉴에서 이 문자열을 설정할 수 있으며 IE는 윈도우즈 레지스트리를 사용하고 있습니다. 즉 사용자나 브라우저 배포자는 그들이 원하는 것을 이 문자열에 입력할 수 있는 데, 이렇게 되면 작성된 코드가 엉뚱한 브라우저에 대해 실행할 수 있게 됩니다. 정확하게 인식된 브라우저조차도 원하던대로 작동하지 않는 경우 많습니다.(아래 DOM implementation를 참고하세요)

The other problem with this approach is that the browser identity can be "spoofed," because in many more modern browsers, navigator.appVersion is a user configurable string. Mozilla uses the preference "general.useragent.override"; Opera allows you to set this string in a menu, and IE uses the Windows registry. A user or browser distributor can put what they want in the string, and this may trick your code into executing for the wrong client. Moreover, there are many cases where even the accurately-identified browser does not perform as it is reputed to (see DOM implementation notes below).

객체 감지

Using Object Detection

"브라우저 스니핑"이 신뢰할 수 없으며 난제가 있다면, 다른 브라우저에 대해 안전하게 어떻게 코드를 작성해야 하는가? 한가지 대안은 "객체 감지"를 사용하는 것입니다. 객체 감지를 사용한다고 할때는, 브라우저에서 먼저 테스트한 지원기능만을 처리하는 것입니다. 이 방식은 모든 것이 아니라 작성한 코드의 기능이 브라우저에서 지원되는 지를 테스트만하면 됩니다.

So if "browser sniffing", can be unreliable and difficult, how do you code safely for different browsers? One alternative is to use "object detection." When you use object detection, you only implement those features whose support you have first tested on the client. This method has the advantage of not requiring you to test for anything except whether the particular features you code are supported on the client.

객체 감지는 아래 예제에 잘 설명되어 있습니다:

Object detection is best illustrated by an example:

if (document.getElementById &&
      document.getElementById(id) &&
      document.getElementById(id).style)
   document.getElementById(id).style.visibility="hidden";

document.getElementById 에 대한 이런 반복된 호출은 가장 효과적인 것은 아니더라도 브라우저의 DOM implementation에 있어 특정 객체나 기능을 체크할 수 있는 것이지만, 어떻게 객체감지가 꽤 깔끔하게 처리하는 지를 보여줍니다. (더 최적화된 다음의 두가지 예제와 아래의 DOM hasFeature를 참고하세요), 

These repeated calls to document.getElementById are not the most efficient may to check for the existence of particular objects or features in the browser's DOM implementation (see the next two examples for more optimized versions and see the DOM hasFeature discussion below), but they illustrate how object detection works quite clearly.

상단의 if절은 문서객체에 있는 호출된 getElementById 객체가 있는 지 찾는 것인데, 브라우저에서 DOM을 지원하는 가장 기본적인 것중 하나입니다. 만약 있다면, 해당 코드는 getElementById(id) 가 요소를 반환하는 지 보고서, style 객체를 점검합니다. style 객체가 해당 요소에 있다면, 이렇게해서 객체의 visibility 속성을 설정하는 것이죠. 사용자가 이것을 미처리 속성으로 설정했을지라도 브라우저는 오류를 일으키지않을 것이기 때문에 visibility 속성 자체가 존재하는 지 점검할 필요가 없게 됩니다.

The top-level if clause looks to see if there's an object called getElementById on the document object, which is the one of the most basic levels of support for the DOM in a browser. If there is, the code sees if getElementById(id) returns an element, which it then checks for a style object. If the style object exists on the element, then it sets that object's visibility property. The browser will not error if you set this unimplemented property, so you don't need to check that the visiblity property itself exists.

Generally object detection code like this should be placed in functions so that your code doesn't become too complicated or unmaintainable:

function hideElement(element_id)
{
   if (document.getElementById &&
         document.getElementById(element_id) &&
         document.getElementById(element_id).style)
      document.getElementById(element_id).style.visibility="hidden";
}

// 예제:
// <button onclick="hideElement('d1');">hide div</button>
// <div id="d1">div one</div>

어느 브라우저가 DOM 방식의 getElementById 를 가지고 있는 지 알 것없이, 바로 그 방식을 테스트한 것입니다. 이 방식을 사용한다면, 미래의 배포판과 여러분이 알지못하는 브라우저의 userAgent 문자열을 포함한 모든 브라우저는 여러분이 작성한 코드를 처리할 것입니다.

Now, instead of needing to know which browsers have the DOM method getElementById, you test for that very method. Using this method, you ensure that all browsers--including future releases and browsers whose userAgent strings you don't know about--will continue working with your code.

그런데 이들 예제 어느 것도 네비게이터 4와 익스플로러 4 브라우저에는 작동하지 않는다는 사실입니다. 이들 구버전의 브라우저에서 작동하는 객체감지 코드를 작성하려면, 또다른 점검 레벨을 추가해야 하는 데, 말하자면 표준적인 document.getElementById 를 지원하지않는 브라우저에 적당한 객체 참고자료를 제공하는 것입니다. 방법은 각각의 브라우저 플랫폼에서 document.getElementById 대신에 IEGetElementById와 NN4GetLayerById 라는 두가지 함수를 호출하는 것입니다. 

Note that neither of these foregoing examples works for Navigator 4 and Internet Explorer 4 browsers. To create object detection code that works on these older browsers, it's necessary to add another level of checking, where browsers that do not support the standard document.getElementById are given some means of returning the appropriate object reference. The two functions at the top of this listing, IEGetElementById and NN4GetLayerById are called in place of document.getElementById on their respective browsers platforms.

function IE4GetElementById(id)
{
   return document.all[id];
}
function NN4GetLayerById(id)
{
  // see xbStyle on the evangelism site
  // for details on a possible implementation
}
if (document.layers)
   document.getElementById = NN4GetLayerById;
else if (document.all && !document.getElementById)
   document.getElementById = IE4GetElementById;
function getStyleObject(id)
{
   var elm = null;
   var styleObject = null;
   if (document.getElementById)
      elm = document.getElementById(id);
   if (elm)
   {
      if (elm.style)
         styleObject = elm.style;
      else if (document.layers)
         styleObject = elm;
   }
  return styleObject;
}
function hideElement(id)
{
  var styleObject = getStyleObject(id);
  if (styleObject)
    styleObject.visibility = 'hidden';
}

DOM implementation 객체 사용

Using the DOM implementation Object

DOM1 호환 브라우저는 document.implementation.hasFeature()에 잠재적으로 유용한 객체를 담고있기도 한데, 특정한 기능이나 지원레벨을 질의하는 데 참(true)/거짓(false)를 반환하는 것입니다.

DOM 1 compliant browsers also contain a potentially useful object in document.implementation.hasFeature(), which should return true/false on being queried for a specific feature or level of support.

if (document.implementation &&
      document.implementation.hasFeature &&
      document.implementation.hasFeature("DOM","2.0"))
   alert("DOM version 2.0 support available");
else
   alert("No DOM 2.0 support.");

이런 접근방식은 불행하게도 항상 실용적이지는 못합니다. DOM implementation 정보가 잘못 전달될 수 있거나 다른 브라우저에서 잘못 처리될 수 있기 때문입니다(네스케이프 6의 첫배포판에서 ECMAScript 지원이 그런 예입니다). 일부 브라우저에서는 기능을 지원하지도 implementation.hasfeature() 방식 자체를 지원하지 않기 때문에 이런 방식이 거의 쓸모없게 될 수 있습니다. hasFeature()를 사용한다면,위의 object detection 예제에서처럼 implementation 객체와 hasFeature() 방식을 사용해야 한다는 것을 기억해두세요.

This approach isn't always practical, unfortunately, since DOM implementation information can be misleading or false on different browsers (ECMAScript support in the first release of Netscape 6 is a case in point.) Some browsers have support for features but not for the implementation.hasfeature() method itself, which can render this method nearly useless. If you do use hasFeature(), remember to use object detection on the implementation object and hasFeature() method, as in the object detection example above.

구성요소와 플러그인

Components and Plug-ins

모질라는 구성요소와 모든 종류의 파일을 설치하고 업데이트하기 위해 단일 압축 포맷을 사용합니다. XPI 포맷은 인터넷 익스플로러 4이상 버전에서 스마트업데이트 바이너리와 다운로드 .cab 파일 대신에 .jar라는 파일을 사용합니다.

Mozilla uses a single archive format to install and update components and files of all kinds. This format, the XPI format, replaces the use of .jar files for SmartUpdates of binaries and .cab files for download of binaries on Internet Explorer 4 and beyond.

XPI 포맷의 샘플은 다음 링크에서 볼 수 있습니다:
ftp://ftp.netscape.com/pub/netscape6/english/6.0/windows/win32/xpi/

제외된 요소	대체
Navigator 4 .jar 파일과 IE4+ .cab 파일	XPInstall을 지원하는 .xpi 파일

또한, LiveConnect를 통해서 자바스크립트의 플러그인 Java API를 호출하는 플러그인 구성요소가 있다면, 모질라 플러그인 API를 지원하기 위해서 플러그인 공급자가  플러그인을 업그레이드해야하는 지 확인하세요. 그리고 업그레이드된 플러그 배포 일정을 찾아보려면 플러그인 공급자에게 연락을 해보세요.

Also, if you have plug-in content that calls a plug-in's Java API from JavaScript via LiveConnect, be aware that the plug-in vendor must upgrade their plug-in to support the Mozilla Plug-in API. Until then, these JavaScript calls within the content will fail silently. Contact the plug-in vendor to find out their schedule for releasing an upgraded plug-in.

변경내용 요약

Summary of Changes

이 단원은 이 글에서 설명한 모든 요소와 업데이트 방법을 정리한 것입니다. 이들 항목에 대한 전체 논의를 살펴보려면, 해당 단원을 참고하세요.

This section outlines all of the element and practice updates described in this article. For a complete discussion of these items, see the sections in which they are described.