下面的例子使用 XML 文件 books.xml。
函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。
创建元素节点
本例使用 createElement() 来创建一个新的元素节点，并使用 appendChild() 把它添加到一个节点。
HTML
x
25
25
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newel=xmlDoc.createElement("edition");12
newtext=xmlDoc.createTextNode("first");13
newel.appendChild(newtext);14
15
x=xmlDoc.getElementsByTagName("book")[0];16
x.appendChild(newel);17
18
//Output title and edition19
document.write(x.getElementsByTagName("title")[0].childNodes[0].nodeValue);20
document.write(" - Edition: ");21
document.write(x.getElementsByTagName("edition")[0].childNodes[0].nodeValue);22
</script>23
</body>24
</html>25
通过使用 createAttribute 来创建属性节点
本例使用 createAttribute() 来创建新的属性节点，并使用 setAttributeNode() 把该节点插入一个元素中。
HTML
xxxxxxxxxx1
23
23
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newatt=xmlDoc.createAttribute("edition");12
newatt.nodeValue="first";13
14
x=xmlDoc.getElementsByTagName("title");15
x[0].setAttributeNode(newatt);16
17
document.write("Edition: ");18
document.write(x[0].getAttribute("edition"));19
20
</script>21
</body>22
</html>23
通过使用 setAttribute 来创建属性节点
本例使用 setAttribute() 为一个元素创建一个新的属性。
HTML
xxxxxxxxxx1
21
21
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
x=xmlDoc.getElementsByTagName("title");12
13
x[0].setAttribute("edition","first");14
15
document.write("Edition: ");16
document.write(x[0].getAttribute("edition"));17
18
</script>19
</body>20
</html>21
创建文本节点
本例使用 createTextNode() 来创建新的文本节点，并使用 appendChild() 把该文本节点添加到一个元素中。
HTML
xxxxxxxxxx1
25
25
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newel=xmlDoc.createElement("edition");12
newtext=xmlDoc.createTextNode("first");13
newel.appendChild(newtext);14
15
x=xmlDoc.getElementsByTagName("book")[0];16
x.appendChild(newel);17
18
//Output title and edition19
document.write(x.getElementsByTagName("title")[0].childNodes[0].nodeValue);20
document.write(" - Edition: ");21
document.write(x.getElementsByTagName("edition")[0].childNodes[0].nodeValue);22
</script>23
</body>24
</html>25
创建一个 CDATA section 节点
本例用 createCDATAsection() 来创建 CDATA section 节点，并使用 appendChild() 把它添加到元素中。
HTML
xxxxxxxxxx1
19
19
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");11
12
x=xmlDoc.getElementsByTagName("book")[0];13
x.appendChild(newCDATA);14
15
document.write(x.lastChild.nodeValue);16
</script>17
</body>18
</html>19
创建注释节点
本例使用 createComment() 来创建一个 comment 节点，并使用 appendChild() 把它添加到一个元素中。
HTML
xxxxxxxxxx1
19
19
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
newComment=xmlDoc.createComment("Revised March 2008");11
12
x=xmlDoc.getElementsByTagName("book")[0];13
x.appendChild(newComment);14
15
document.write(x.lastChild.nodeValue);16
</script>17
</body>18
</html>19
创建新的元素节点
createElement() 方法创建新的元素节点：
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 创建一个新的元素节点 <edition>
- 向第一个 <book> 元素追加这个元素节点
HTML
xxxxxxxxxx1
20
20
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newel=xmlDoc.createElement("edition");12
13
x=xmlDoc.getElementsByTagName("book")[0];14
x.appendChild(newel);15
16
document.write(x.getElementsByTagName("edition")[0].nodeName);17
</script>18
</body>19
</html>20
遍历并向所有 <book> 元素添加一个元素：
HTML
xxxxxxxxxx1
35
35
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
var x=xmlDoc.getElementsByTagName('book');12
var newel,newtext13
14
for (i=0;i<x.length;i++)15
{16
newel=xmlDoc.createElement('edition');17
newtext=xmlDoc.createTextNode('First');18
newel.appendChild(newtext);19
x[i].appendChild(newel);20
}21
22
//Output all titles and editions23
var y=xmlDoc.getElementsByTagName("title");24
var z=xmlDoc.getElementsByTagName("edition");25
for (i=0;i<y.length;i++)26
{27
document.write(y[i].childNodes[0].nodeValue);28
document.write(" - Edition: ");29
document.write(z[i].childNodes[0].nodeValue);30
document.write("<br />");31
}32
</script>33
</body>34
</html>35
创建新的属性节点
createAttribute() 用于创建新的属性节点：
xmlDoc=loadXMLDoc("books.xml");
newatt=xmlDoc.createAttribute("edition");
newatt.nodeValue="first";
x=xmlDoc.getElementsByTagName("title");
x[0].setAttributeNode(newatt); 例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 创建一个新的属性节点 “edition”
- 向第一个 <title> 元素添加这个新的属性节点
HTML
xxxxxxxxxx1
23
23
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newatt=xmlDoc.createAttribute("edition");12
newatt.nodeValue="first";13
14
x=xmlDoc.getElementsByTagName("title");15
x[0].setAttributeNode(newatt);16
17
document.write("Edition: ");18
document.write(x[0].getAttribute("edition"));19
20
</script>21
</body>22
</html>23
遍历所有 <title> 元素，并添加一个新的属性节点：
HTML
xxxxxxxxxx1
31
31
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
x=xmlDoc.getElementsByTagName("title");12
13
for (i=0;i<x.length;i++)14
{15
newatt=xmlDoc.createAttribute("edition");16
newatt.value="first";17
x[i].setAttributeNode(newatt);18
}19
20
//Output all "edition" attribute values21
for (i=0;i<x.length;i++)22
{23
document.write(x[i].childNodes[0].nodeValue);24
document.write(" - Edition: ");25
document.write(x[i].getAttribute("edition"));26
document.write("<br />");27
}28
</script>29
</body>30
</html>31
注释：如果该属性已存在，则被新属性替代。
通过使用 setAttribute() 来创建属性
由于 setAttribute() 可以在属性不存在的情况下创建新的属性，我们可以使用这个方法来创建新属性。
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("edition","first");例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 为第一个 <book> 元素设置（创建）值为 “first” 的属性
HTML
xxxxxxxxxx1
21
21
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
x=xmlDoc.getElementsByTagName("title");12
13
x[0].setAttribute("edition","first");14
15
document.write("Edition: ");16
document.write(x[0].getAttribute("edition"));17
18
</script>19
</body>20
</html>21
遍历所有 <title> 元素并添加一个新属性：
HTML
xxxxxxxxxx1
30
30
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
x=xmlDoc.getElementsByTagName("title");12
13
//add a new attribute to each title element14
for(i=0;i<x.length;i++)15
{16
x[i].setAttribute("edition","first");17
}18
19
//Output title and edition value20
for (i=0;i<x.length;i++)21
{22
document.write(x[i].childNodes[0].nodeValue);23
document.write(" - Edition: ");24
document.write(x[i].getAttribute("edition"));25
document.write("<br />");26
}27
</script>28
</body>29
</html>30
创建文本节点
createTextNode() 方法创建新的文本节点：
xmlDoc=loadXMLDoc("books.xml");
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("first");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newel);例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 创建一个新元素节点 <edition>
- 创建一个新的文本节点，其文本是 “first”
- 向这个元素节点追加新的文本节点
- 向第一个 <book> 元素追加新的元素节点
HTML
xxxxxxxxxx1
25
25
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
newel=xmlDoc.createElement("edition");12
newtext=xmlDoc.createTextNode("first");13
newel.appendChild(newtext);14
15
x=xmlDoc.getElementsByTagName("book")[0];16
x.appendChild(newel);17
18
//Output title and edition19
document.write(x.getElementsByTagName("title")[0].childNodes[0].nodeValue);20
document.write(" - Edition: ");21
document.write(x.getElementsByTagName("edition")[0].childNodes[0].nodeValue);22
</script>23
</body>24
</html>25
向所有 <book> 元素添加一个带有文本节点的元素节点：
HTML
xxxxxxxxxx1
35
35
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"> 4
</script>5
</head>6
<body>7
8
<script type="text/javascript">9
xmlDoc=loadXMLDoc("/example/xdom/books.xml");10
11
var x=xmlDoc.getElementsByTagName('book');12
var newel,newtext13
14
for (i=0;i<x.length;i++)15
{16
newel=xmlDoc.createElement('edition');17
newtext=xmlDoc.createTextNode('First');18
newel.appendChild(newtext);19
x[i].appendChild(newel);20
}21
22
//Output all titles and editions23
var y=xmlDoc.getElementsByTagName("title");24
var z=xmlDoc.getElementsByTagName("edition");25
for (i=0;i<y.length;i++)26
{27
document.write(y[i].childNodes[0].nodeValue);28
document.write(" - Edition: ");29
document.write(z[i].childNodes[0].nodeValue);30
document.write("<br />");31
}32
</script>33
</body>34
</html>35
创建一个 CDATA Section 节点
createCDATASection() 方法创建一个新的 CDATA section 节点。
xmlDoc=loadXMLDoc("books.xml");
newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newCDATA);例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 创建一个新的 CDATA section 节点
- 向第一个 <book> 元素追加这个新的 CDATA section 节点
HTML
xxxxxxxxxx1
19
19
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
newCDATA=xmlDoc.createCDATASection("Special Offer & Book Sale");11
12
x=xmlDoc.getElementsByTagName("book")[0];13
x.appendChild(newCDATA);14
15
document.write(x.lastChild.nodeValue);16
</script>17
</body>18
</html>19
遍历并向所有 <book> 元素添加一个 CDATA section：
HTML
xxxxxxxxxx1
30
30
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
x=xmlDoc.getElementsByTagName("book");11
12
newtext="Special Offer & Book Sale";13
14
for (i=0;i<x.length;i++)15
{16
newCDATA=xmlDoc.createCDATASection(newtext);17
x[i].appendChild(newCDATA);18
}19
20
for (i=0;i<x.length;i++)21
{22
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);23
document.write(" - ");24
document.write(x[i].lastChild.nodeValue);25
document.write("<br />");26
}27
</script>28
</body>29
</html>30
创建注释节点
createComment() 方法创建一个新的注释节点。
xmlDoc=loadXMLDoc("books.xml");
newComment=xmlDoc.createComment("Revised March 2008");
x=xmlDoc.getElementsByTagName("book")[0];
x.appendChild(newComment);例子解释：
- 通过使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中
- 创建一个新的注释节点
- 把这个新的注释节点追加到第一个 <book> 元素
HTML
xxxxxxxxxx1
19
19
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
newComment=xmlDoc.createComment("Revised March 2008");11
12
x=xmlDoc.getElementsByTagName("book")[0];13
x.appendChild(newComment);14
15
document.write(x.lastChild.nodeValue);16
</script>17
</body>18
</html>19
循环并向所有 <book> 元素添加一个 comment 节点：
HTML
xxxxxxxxxx1
28
28
1
<html>2
<head>3
<script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>4
</head>5
<body>6
7
<script type="text/javascript">8
xmlDoc=loadXMLDoc("/example/xdom/books.xml");9
10
x=xmlDoc.getElementsByTagName('book');11
12
for (i=0;i<x.length;i++)13
{14
newComment=xmlDoc.createComment("Revised March 2008");15
x[i].appendChild(newComment);16
}17
18
for (i=0;i<x.length;i++)19
{20
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);21
document.write(" - ");22
document.write(x[i].lastChild.nodeValue);23
document.write("<br />");24
}25
</script>26
</body>27
</html>28
阅读剩余 95%
作者：terry，如若转载，请注明出处：https://www.web176.com/xmldom/10824.html
支付宝 
微信 