Dynamically modifying XUL-based user interface

이 기사(article)는 DOM과 다른 API를 써서 XUL 인터페이스 다루기를 논합니다. 기사는 DOM 문서(document) 개념을 설명하고, 기본 문서 조작을 수행하는 DOM 호출을 쓰는 단순 예제 상당수에다 Mozilla 고유 메소드를 써서 익명 XBL content 를 다루는 작업을 실제로 보입니다.

내용은 중급 XUL 개발자가 되려는 초보자를 대상으로 합니다. 우리는 읽는 이가 XUL과 JavaScript 기본 지식이 있다고 가정합니다. 여러분은 또한 About the Document Object Model 기사나 Gecko DOM Reference의 개요 page 같은 DOM을 다루는 입문 문서 일부를 읽어도 좋습니다.

머리말

아시다시피, XUL은 Firefox와 Thunderbird 같은 여러 가지 Mozilla 기반 응용프로그램에서 사용자 인터페이스를 기술하기 위해 쓰는 XML 언어입니다. XUL 응용프로그램에서 JavaScript는 XUL 문서에 접근하기 위해 DOM API를 쓰는 behavior를 정의합니다.

그러면 Document Object Model API는 뭘까요?

DOM API는 스크립트와 문서의 모든 상호 작용에 쓰이는 인터페이스입니다. 혹시 XUL(이나 HTML) 문서와 상호 작용하는 스크립트를 작성해 본 적이 있다면, 여러분은 이미 DOM 호출을 썼습니다. 가장 잘 알려진 DOM 메소드는 아마도 요소의 id를 주면 요소를 반환하는 document.getElementById()입니다. 여러분은 또한 element.setAttribute()나 혹시 확장 기능을 작성했다면 addEventListener() 메소드 같은 다른 호출도 써 봤을지도 모릅니다. 이들 모두는 DOM에서 정의합니다.

또한 문서에서 요소를 만들고, 옮기고, 지우는 메소드도 있습니다. 메소드는 뒷 부분에서 실제로 보입니다. 지금 바로, 문서 가 뭔지 배워 봅시다.

문서란 무엇인가?

문서는 DOM API에 의해 다뤄지는 자료 구조(data structure)입니다. 모든 문서의 논리 구조는 요소(element), 속성(attribute), 처리 명령(processing instruction), 주석(comment) 등인 노드가 있는 트리(tree)입니다. 어떤 문서의 트리 표현을 보려면 DOM Inspector 도구를 쓰세요. Todo: simple example of a XUL document and a tree

여러분은 문서를 XHTML이나 XUL같은 유효한(valid) HTML이나 적격(well-formed) XML(XUL 포함)의 메모리 내(in-memory) 표현으로 생각할 수 있습니다.

다른 웹 페이지(와 심지어 같은 웹 페이지의 다른 instance)는 다른 문서와 대응함을 기억하는 게 중요합니다. 각 XUL 창은 자체(its own) distinct 문서가 있고 <iframe>, <browser>, <tabbrowser> 요소일 때 심지어 단일 창에 꽤 많은 다른 문서일지도 모릅니다. 여러분은 항상 반드시 바른 문서를 다뤄야 합니다. (이에 대해서는 Working with windows in chrome code를 더 읽어 보세요.) 여러분의 스크립트가 <script> 태그를 써서 포함될 때, document 프로퍼티는 그 스크립트를 포함하는 DOM 문서를 참조합니다.

예제: DOM 메소드 쓰기

이 절은 appendChild(), createElement(), insertBefore(), removeChild() DOM 메소드 사용을 실제로 보입니다.

요소의 자식 노드 모두 없애기

이 예제는 어떤 자식도 남지 않을 때까지 첫째 자식을 없애기 위해 removeChild() 메소드를 호출하여 현재 문서에서 id가 "someElement"인 요소의 모든 자식을 없앱니다.

hasChildNodes()와 firstChild 또한 DOM API의 부분임을 유의하세요.

var element = document.getElementById("someElement");
  while(element.hasChildNodes()) {
    element.removeChild(element.firstChild);
  }

메뉴에 메뉴 항목 삽입하기

이 예제는 <menupopup>의 시작과 끝에 새 메뉴 항목 둘을 추가합니다. 항목을 만들기 위해 document.createElementNS() 메소드와 문서 내에 만든 XML 요소를 삽입하기 위해 appendChild()와 함께 insertBefore()를 씁니다.

주의:

document.createElementNS()는 요소를 만들지만 문서 어딘가에 두지는 않습니다. 여러분은 새로 만든 요소를 문서에 삽입하기 위해 appendChild() 같은 다른 DOM 메소드 사용이 필요합니다.
insertBefore()가 노드를 둘째 매개변수로 참조되는 노드 앞에 삽입하는 반면에 appendChild()는 다른 모든 노드 뒤에 노드를 추가합니다.

function createMenuItem(aLabel) {
  const XUL_NS = "https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
  var item = document.createElementNS(XUL_NS, "menuitem"); // create a new XUL menuitem
  item.setAttribute("label", aLabel);
  return item;
}
var popup = document.getElementById("myPopup"); // a <menupopup> element
var first = createMenuItem("First item");
var last = createMenuItem("Last item");
popup.insertBefore(first, popup.firstChild);
popup.appendChild(last);

여러분은 또한 기존 요소를 옮기기 위해 appendChild()와 insertBefore()를 쓸 수 있습니다. 예를 들어 여러분은 위 코드 조각(snippet) 마지막 줄에 아래 문장(statement)을 더해 팝업 끝에 "First item"으로 부르는 항목을 옮길 수 있습니다.

popup.appendChild(first);

이 문장은 문서의 현재 위치에서 노드를 없애고 팝업 끝에 노드를 다시 삽입합니다.

익명 content (XBL)

XBL은 새 위젯을 정의하기 위해 Mozilla에서 쓰는 언어입니다. XBL에서 정의한 위젯은 바인딩(binding)이 붙을 때 bound 요소에 삽입되는 어떤 content를 정의하기 위해 고릅니다. 익명 content 로 부르는 이 content는 보통 DOM 메소드를 통해 접근할 수 없습니다.

여러분은 대신 nsIDOMDocumentXBL 인터페이스의 메소드를 사용이 필요합니다. 예를 들면,

// 제공한 노드의 첫째 익명 자식을 얻고
document.getAnonymousNodes(node)[0];

// anonid 속성과 el1이 같은 익명 요소의 NodeList를 반환합니다
document.getAnonymousElementByAttribute(node, "anonid", "el1");

더 많은 정보는 XBL reference에서 getAnonymousNodes와 getAnonymousElementByAttribute를 보세요.

일단 여러분에게 익명 노드가 있으면, 여러분은 그 바인딩의 나머지 노드를 항해하고 다루기 위해 정규 DOM 메소드를 쓸 수 있습니다.