path: root/files/zh-cn/动态修改基于xul的用户界面/index.html

---
title: 动态修改基于XUL的用户界面
slug: 动态修改基于XUL的用户界面
tags:
  - DOM
  - Extensions
  - XUL
translation_of: Archive/Mozilla/XUL/Dynamically_modifying_XUL-based_user_interface
---
<p>This article discusses manipulating <a href="cn/XUL">XUL</a> interfaces, using <a href="cn/DOM">DOM</a> and other APIs. It explains the concept of DOM
 <i>
  documents</i>
 , demonstrates a few simple examples of using DOM calls to perform basic manipulations on a document, and then demonstrates working with
 <i>
  anonymous <a href="cn/XBL">XBL</a> content</i>
 using Mozilla-specific methods.</p>
<p>It is written for beginner to intermediate XUL developers. We assume that the reader has basic knowledge of both XUL and JavaScript. You may also want to read some introductory documents about DOM, like the <a href="cn/About_the_Document_Object_Model">About the Document Object Model</a> article or the <a href="cn/Gecko_DOM_Reference/Introduction">Introduction page</a> of the <a href="cn/Gecko_DOM_Reference">Gecko DOM Reference</a>.</p>
<h3 id=".E4.BB.8B.E7.BB.8D" name=".E4.BB.8B.E7.BB.8D">介绍</h3>
<p>如你所知，<a href="cn/XUL">XUL</a>是一种在各种基于Mozilla应用程序，如Firefox和Thunderbird 中使用，用于描述用户界面的<a href="cn/XML">XML</a>语言。在 XUL 应用程序中 <a href="cn/JavaScript">JavaScript</a> 定义行为，使用<a href="cn/Gecko_DOM_Gecko_DOM_Reference">DOM API</a>访问XUL文档。</p>
<p>那么什么是文档模型API？</p>
<p>They are the interfaces that are used in any interaction of a script and a document. If you have ever written a script that interacts with a XUL (or HTML) document, you have already used DOM calls. The most well known DOM method is probably <code><a href="cn/DOM/document.getElementById">document.getElementById()</a></code>, which returns an element, given its <code>id</code>. You may also have used other calls, such as <code><a href="cn/DOM/element.setAttribute">element.setAttribute()</a></code>, or, if you wrote an extension, the <code><a href="cn/DOM/element.addEventListener">addEventListener()</a></code> method. All of these are defined in DOM.</p>
<p>There are also DOM methods that create, move, or delete elements from a document. They will be demonstrated in a later section. Right now, let's learn what a
 <i>
  document</i>
 is.</p>
<h3 id="What_is_a_document.3F" name="What_is_a_document.3F">What is a document?</h3>
<p>A document is a data structure which is manipulated through DOM APIs. A logical structure of every document is a tree, with nodes being elements, attributes, processing instructions, comments, etc. Use the <a href="cn/DOM_Inspector">DOM Inspector</a> tool to see the tree representation of any document. <span class="comment">Todo: simple example of a XUL document and a tree</span></p>
<p>You can think of a document as an in-memory representation of valid HTML or well-formed XML such as XHTML or XUL.</p>
<p>It is important to remember that different web pages (and even different instances of the same web page) correspond to different documents. Each XUL window has its own distinct document, and there may even be a few different documents in a single window, when there is an <code><a href="cn/XUL/iframe">&lt;iframe&gt;</a></code>, <code><a href="cn/XUL/browser">&lt;browser&gt;</a></code>, or a <code><a href="cn/XUL/tabbrowser">&lt;tabbrowser&gt;</a></code> element. You must be sure to always manipulate the correct document. (Read more about this in <a href="cn/Working_with_windows_in_chrome_code">Working with windows in chrome code</a>.) When your script is included using a <code><a href="cn/XUL/script">&lt;script&gt;</a></code> tag, the <code>document</code> property references the DOM document that includes the script.</p>
<h3 id=".E7.A4.BA.E4.BE.8B.EF.BC.9A.E4.BD.BF.E7.94.A8DOM.E6.96.B9.E6.B3.95" name=".E7.A4.BA.E4.BE.8B.EF.BC.9A.E4.BD.BF.E7.94.A8DOM.E6.96.B9.E6.B3.95">示例：使用DOM方法</h3>
<p>本节演示 <code><a href="cn/DOM/element.appendChild">appendChild()</a></code>, <code><a href="cn/DOM/document.createElement">createElement()</a></code>, <code><a href="cn/DOM/element.insertBefore">insertBefore()</a></code>, 和<code><a href="cn/DOM/element.removeChild">removeChild()</a></code> DOM 方法的使用。</p>
<h4 id=".E7.A7.BB.E9.99.A4.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A0.E7.9A.84.E6.89.80.E6.9C.89.E5.AD.90.E5.85.83.E7.B4.A0" name=".E7.A7.BB.E9.99.A4.E4.B8.80.E4.B8.AA.E5.85.83.E7.B4.A0.E7.9A.84.E6.89.80.E6.9C.89.E5.AD.90.E5.85.83.E7.B4.A0">移除一个元素的所有子元素</h4>
<p>This example removes all children of an element with id=<code>someElement</code> from the current document, by calling <code><a href="cn/DOM/element.removeChild">removeChild()</a></code> method to remove the first child, until there are no children remaining.</p>
<p>Note, that <code><a href="cn/DOM/element.hasChildNodes">hasChildNodes()</a></code> and <code><a href="cn/DOM/element.firstChild">firstChild</a></code> are also part of the DOM API.</p>
<pre class="eval">var element = document.getElementById("someElement");
  while(element.hasChildNodes()){
    element.removeChild(element.firstChild);
  }
</pre>
<h4 id=".E6.8F.92.E5.85.A5.E8.8F.9C.E5.8D.95.E9.A1.B9.E5.88.B0.E8.8F.9C.E5.8D.95.E4.B8.AD" name=".E6.8F.92.E5.85.A5.E8.8F.9C.E5.8D.95.E9.A1.B9.E5.88.B0.E8.8F.9C.E5.8D.95.E4.B8.AD">插入菜单项到菜单中</h4>
<p>This example adds two new menu items to a <code><a href="cn/XUL/menupopup">&lt;menupopup&gt;</a></code>: to the start and to the end of it. It uses <code><a href="cn/DOM/document.createElementNS">document.createElementNS()</a></code> method to create the items, and <code><a href="cn/DOM/element.insertBefore">insertBefore()</a></code> with <code><a href="cn/DOM/element.appendChild">appendChild()</a></code> to insert the created xml elements within the document.</p>
<p>注意力:</p>
<ul>
 <li><code><a href="cn/DOM/document.createElementNS">document.createElementNS()</a></code> creates an element, but does not put it anywhere in the document. You need to use other DOM methods, such as <code><a href="cn/DOM/element.appendChild">appendChild()</a></code> to insert the newly created element in the document.</li>
 <li><code><a href="cn/DOM/element.appendChild">appendChild()</a></code> appends the node after all other nodes, while <code><a href="cn/DOM/element.insertBefore">insertBefore()</a></code> inserts the node before the node referenced by its second paramerer.</li>
</ul>
<pre class="eval">function createMenuItem(aLabel) {
  const XUL_NS = "<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>";
  var item = document.createElementNS(XUL_NS, "menuitem"); // create a new XUL menuitem
  item.setAttribute("label", aLabel);
  return item;
}
var popup = document.getElementById("myPopup"); // a &lt;menupopup&gt; element
var first = createMenuItem("First item");
var last = createMenuItem("Last item");
popup.insertBefore(first, popup.firstChild);
popup.appendChild(last);
</pre>
<p>You can also use <code><a href="cn/DOM/element.appendChild">appendChild()</a></code> and <code><a href="cn/DOM/element.insertBefore">insertBefore()</a></code> to move existing elements. For example you could move the item labeled "First item" to the end of popup by adding this statement as a last line to the snippet above:</p>
<pre class="eval">popup.appendChild(first);
</pre>
<p>This statement would remove the node from its current position in the document and re-insert it at the end of the popup.</p>
<h3 id="Anonymous_content_.28XBL.29" name="Anonymous_content_.28XBL.29">Anonymous content (XBL)</h3>
<p><a href="cn/XBL">XBL</a> is the language used in Mozilla to define new widgets. Widgets defined in XBL may choose to define some content which is inserted to the bound element, when the binding is attached. This content, called
 <i>
  anonymous content</i>
 , is not accessible through normal DOM methods.</p>
<p>You need to use the methods of <code><a href="cn/NsIDOMDocumentXBL">nsIDOMDocumentXBL</a></code> interface instead. For example:</p>
<pre class="eval">// gets the first anonymous child of the given node
document.getAnonymousNodes(node)[0];

// returns a NodeList of anonymous elements with anonid attribute equals el1
document.getAnonymousElementByAttribute(node, "anonid", "el1");
</pre>
<p>See <a href="cn/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes</a> and <a href="cn/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousElementByAttribute">getAnonymousElementByAttribute</a> in the XBL reference for more information.</p>
<p>Once you have an anonymous node, you can use regular DOM methods to navigate and manipulate the rest of the nodes of that binding.</p>
<h3 id="See_also" name="See_also">See also</h3>
<ul>
 <li><a href="cn/XUL_Tutorial/Document_Object_Model">A related chapter on DOM</a></li>
 <li><a href="cn/XUL_Tutorial/Modifying_a_XUL_Interface">XUL Tutorial:Modifying a XUL Interface</a></li>
</ul>