XUL_教程/修改XUL界面

DOM 提供了一系列方法来修改文档。

创建新元素

你可以使用文档对象的 createElement() 方法创建新元素。它有一个参数，待创建元素的标签名。可以使用元素的 setAttribute() 方法设置属性，使用 appendChild() 方法将其加入到XUL文件之中。例如下面的例子将一个按钮加入的XUL窗口中。

Example 1 : Source View

<script>
function addButton(){
  var aBox = document.getElementById("aBox");
  var button = document.createElement("button");
  button.setAttribute("label","A new Button");
  aBox.appendChild(button);
}
</script>

<box id="aBox" width="200">
  <button label="Add" oncommand="addButton();"/>
</box>

脚本先用getElementById()获得一个容纳按钮的box的引用。
用createElement()方法创建新按钮。
用 setAttribute() 方法设置按钮的标签属性。
用box.appendChild() 方法将按钮加入其中。

createElement() 方法将为文档创建一个默认类型的元素。对于XUL 文档，通常会创建一个XUL元素。对于 HTML 文档会创建一个HTML元素，它会包含HTML元素的功能及方法。 createElementNS() 方法用于在不同的名空间创建元素。

appendChild() 方法用于像一个元素添加另一个元素。有三个相关的方法： insertBefore()，replaceChild() ， removeChild 语法如下。

parent.appendChild(child);
parent.insertBefore(child, referenceChild);
parent.replaceChild(newChild, oldChild);
parent.removeChild(child);

下面是这桑函数的简单说明。

insertBefore() 方法在存在的元素之前插入一个新的子节点。它可以在一些子元素之间插入元素，而不像 appendChild() 只在最后插入。
replaceChild() 方法移除一个旧的元素并在相同的位置插入新元素。
removeChild() 删除一个节点。

注意，以上所有的方法中的 referenceChild 及 child 必须是一个已经存在的节点否则会出错。

通常你会希望移除一个现有的节点，并把它放到其他的位置。那么你没有必要先删除它。因为一个节点在同一时间只能在一个位置，插入方法总是先将节点从当前位置删除再插入新位置。这是一个在文档中移动节点的好方法。

拷贝节点

可以使用 cloneNode() 方法复制节点。这方法复制现有的节点，你可以将新的节点放置到任何位置（原始节点不动），此方法带一个 boolean 型参数确定是否复制此元素的全部子节点。如果‘否’只复制此节点，不包含任何子节点。如果‘是’，将复制全部子节点。此函数会递归调用，如需复制树结构请传递true给函数，如下例。

Example 2 : Source View

<hbox height="400">
  <button label="Copy"
          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>

  <vbox>
    <button label="First"/>
    <button label="Second"/>
  </vbox>
</hbox>

当 Copy 按钮按下：

button元素的 nextSibling 是vbox元素。
用 cloneNode() 方法获得拷贝。
用 appendChild()加入。

注意：有些元素，如listbox 和 menulist 提供了一些其他的修改方法，可以使用他们来代替，下一章（ next section）会讨论。

处理基本元素

像按钮，复选框，单选按钮这些XUL的注意元素可以通过脚本属性处理。这些属性列在 element reference 。一些公共的属性如 label, value, checked 及disabled 。可以根据需要来设定他们。

例：标签和值特性

这里有一个改变按钮标签的例子。

Example 3 : Source View

<button label="Hello" oncommand="this.label = 'Goodbye';"/>

当按钮按下时label会改变。对于有标签的元素这是通用的。比如文本框。同样的可以修改 value 属性。

Example 4 : Source View

<button label="Add" oncommand="this.nextSibling.value += '1';"/>
<textbox/>

当按钮按下时文本框中的内容每次加 '1' 。 nextSibling 重当前元素转移到下一个元素（textbox）。 += 用于像当前值加一个值，此处把 1 加到文本的末尾。注意此时你仍可以在文本框中输入，你也可以获取现在的标签和值属性的值，如下例。

Example 5 : Source View

<button label="Hello" oncommand="alert(this.label);"/>

标记checkbox

Checkboxes 有 checked 属性可以是 check 或 uncheck 。很容易知道怎么样。下一个例子，当按钮按下时把checked属性取反。 注意 label 和value 属性是字符串，而 checked 属性是布尔值。

Example 6 : Source View

<button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/>
<checkbox label="Check for messages"/>

单选按钮也可以用属性选中或取消，注意在一个组中一次只能选中一个，这无需手工操作。单选组的 selectedIndex属性用在这里 selectedIndex 属性用于获得被选中的单选按钮的序号，同样可改变它。

激活或无效一个元素

在某些情况下一些操作将不被支持，有些内容将会无效。比如，在参数选择对话框中，能选择一系列参数但只有一项允许用户改变。下面的例子创建这样的一个界面。

Example 7 : Source View

<script>
function updateState(){
  var name = document.getElementById("name");
  var sindex = document.getElementById("group").selectedIndex;
  name.disabled = sindex == 0;
}
</script>

<radiogroup id="group" onselect="updateState();">
  <radio label="Random name" selected="true"/>
  <hbox>
    <radio label="Specify a name:"/>
    <textbox id="name" value="Jim" disabled="true"/>
  </hbox>
</radiogroup>

当单选组中的一个选择事件发生时会调用updateState() 方法。这个函数用selectedIndex 属性返回当前被选中的 radio 元素。。注意hbox中的元素也被包含在单选组中。如果第一个按钮 (序0)被选中，通过设置文本框的 disabled 属性，使文本框无效，第二个按钮被选中时，文本框又被激活了。

下一章将提供关于单选框和列表的更多信息。