Examples
案例

In the examples below, we will use the XML file books.xml, and the JavaScript function loadXMLDoc().
在下述案例中，我们会使用这两个XML文件：books.xml，和Java脚本函数loadXMLDoc()

Add a node to the end of a node list
在节点列表的末端添加一个节点
This example uses createElement() to create a new element, and appendChild() to add it to a node list.
这个案例通过appendChild()方法在每个<book>元素中添加了一个全新的子元素。

Add a node before a specific node
在指定的节点前添加一个全新的子元素
This example uses createElement() to create a new element, and insertBefore() to insert it before a specific node.
这个案例通过insertBefore()方法在指定的节点之前添加了一个全新的子元素。

Set a new attribute and attribute value
设置一个新的属性和属性值
This example uses the setAttribute() method to set a new attribute/attribute value.
这个案例通过setAttribute()方法设置了一个全新的属性 / 属性值。

Insert data into a text node
在文本节点中插入一个字符串节点
This example uses insertData() to insert data into a text node.
这个案例通过使用insertData()方法在一个文本节点中插入数据。

Add a Node to The End of a Node List
在节点列表的末尾添加一个节点

The appendChild() method is used to add a node after the last child of a specific node.
appendChild() 方法的作用：在指定节点的子节点列表末尾添加一个新节点。

This method is useful when the position of the added node is not important.
如果添加的节点位置并不重要时，那么这个方法是非常有用的。

The following code fragment creates an element (<edition>), and adds it after the last child of each <book> element:
下述代码片断在每个<book>元素中添加了一个全新的子元素(<edition>)：

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName('book');
var newel,newtext

for (i=0;i<x.length;i++)
 {
 newel=xmlDoc.createElement('edition');
 newtext=xmlDoc.createTextNode('First');
 newel.appendChild(newtext);
 x[i].appendChild(newel);
 }

Insert a Node Before a Specific Node
在现有节点之前插入一个节点

The insertBefore() method is used to insert a node before a specific node.
insertBefore() 方法在指定的现有节点之前插入了一个节点。

This method is useful when the position of the added node is important.
如果你需要在节点列表中添加一个节点并且节点的位置并不重要时，那么这个方法是非常有用的。

The following code fragment creates a new <book> element and inserts it before the last <book> element:
下面代码片断创建了一个新的<book>元素，并将其插入到最后一个<book>元素前：

//check if last child node is an element node
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
 {
 x=x.previousSibling;
 }
return x;
}

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.documentElement;

var newNode=xmlDoc.createElement("book");
var newTitle=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("A Notebook");

newTitle.appendChild(newText);
newNode.appendChild(newTitle);

x.insertBefore(newNode,get_lastchild(x));

Note: Internet Explorer will skip white-space text nodes that are generated between nodes (e.g. new-line characters), while Mozilla will not. So, in the example above, the get_lastchild() function checks the node type of the last child node of the parameter.
注意：IE浏览器将跳过在节点中产生的空格文本节点（如：跳过新一行字符）；然而Mozilla浏览器却不会。因此，在上述案例中，需要使用get_lastchild()函数检验参数中最后一个子节点的节点类型。

Element nodes has a nodeType of 1, so if not the last child of the node in the parameter is an element node, it moves to the previous node, and checks if this node is an element node. This continues until the last child node (which must be an element node) is found. This way, the result will be correct in both Internet Explorer and Mozilla.
元素节点的节点类型为1，因此，如果参数中的最后一个子节点不是一个元素节点，那么它将继续向上一个节点移动，检查这个节点是不是一个元素节点，直到第一次发现这个元素节点为止。通过使用这个方法，可以同时在IE浏览器和Mozilla浏览器中显示正确的结果。

Set a New Attribute and Attribute Value
设置一个全新的属性和属性值

The setAttribute() method can be used to change the value of an existing attribute, or to create a new attribute/attribute value for an element.
setAttribute() 方法的作用是：改变现有属性值，或创建一个新属性/元素的属性值。

The following code fragment adds a new attribute/attribute value to each <book> element:
下述代码片断在每个<book>元素内添加了一个全新的属性 / 属性值：

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("book");

for(i=0;i<x.length;i++)
 {
 x.item(i).setAttribute("edition","FIRST");
 }

Note: If the "edition" attribute already exists, the setAttribute() method will overwrite the attribute's value.
注意：如果"edition"属性已经存在，那么使用setAttribute() 方法会覆盖"edition"属性值。

Insert Data Into a Text Node
把数据插入到一个文本节点中

The insertData() method is used to insert data into a text node.
insertData()方法的作用：在一个文本节点中添加数据。

The insertData() method has two parameters:
insertData()方法包含2个参数：

• offset - Where to begin inserting characters. Offset value starts at zero
  起始端 -指定插入字符的起始端。起始端初始值为0
• string - The string to insert
  字符串 - 指定插入的字符串

The following code fragment will add "Easy" to the text node of the first <title> element of the loaded XML:
下述代码片断会将“Easy”元素添加到已加载的XML文件中的第一个<title>元素内的文本节点中：

xmlDoc=loadXMLDoc("books.xml");

var x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];

x.insertData(0,"Easy ");

DOM 建立节点 DOM 克隆节点

评论 (0) All