XML DOM - 高级
在本教程的较早章节中，我们介绍了 XML DOM，并使用了 XML DOM 的 getElementsByTagName() 方法从 XML 文档中取回数据。
在本章中我们将结合一些其他重要的 XML DOM 方法。
您可以在我们的 XML DOM 教程 中学习更多有关 XML DOM 的知识。
获取元素的值
下面的实例中使用的 XML 文件：books.xml。
下面的实例检索第一个
元素的文本值：</p>
<div class="example">
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; document.write(txt); </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
</div>
<hr>
<h2>获取属性的值</h2>
<p>下面的实例检索第一个 <title> 元素的 "lang" 属性的文本值：</p>
<div class="example">
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); document.write(txt); </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
</div>
<hr>
<h2>改变元素的值</h2>
<p>下面的实例改变第一个 <title> 元素的文本值：</p>
<div class="example">
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; x.nodeValue="Easy Cooking"; x=xmlDoc.getElementsByTagName("title")[0].childNodes[0]; txt=x.nodeValue; document.write(txt); </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
</div>
<hr>
<h2>创建新的属性</h2>
<p>XML DOM 的 setAttribute() 方法可用于改变现有的属性值，或创建一个新的属性。</p>
<p>下面的实例创建了一个新的属性（edition="first"），然后把它添加到每一个 <book> 元素中：</p>
<div class="example">
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("book"); for(i=0;i<x.length;i++) { x[i].setAttribute("edition","first"); } //Output all attribute values for (i=0;i<x.length;i++) { document.write("Category: " + x[i].getAttribute('category') + "<br>"); document.write("Edition: " + x[i].getAttribute('edition') + "<br>"); } </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
</div>
<hr>
<h2>创建元素</h2>
<p>XML DOM 的 createElement() 方法创建一个新的元素节点。</p>
<p>XML DOM 的 createTextNode() 方法创建一个新的文本节点。</p>
<p>XML DOM 的 appendChild() 方法向节点添加子节点（在最后一个子节点之后）。</p>
<p>如需创建带有文本内容的新元素，需要同时创建元一个新的元素节点和一个新的文本节点，然后把他追加到现有的节点。</p>
<p>下面的实例创建了一个新的元素（<edition>），带有如下文本：First，然后把它添加到第一个 <book> 元素：</p>
<div class="example">
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; newel=xmlDoc.createElement("edition"); newtext=xmlDoc.createTextNode("First"); newel.appendChild(newtext); x=xmlDoc.getElementsByTagName("book"); x[0].appendChild(newel); for (i=0;i<x[0].childNodes.length;i++) { if (x[0].childNodes[i].nodeType==1) { document.write(x[0].childNodes[i].nodeName); document.write(": "); document.write(x[0].childNodes[i].childNodes[0].nodeValue); document.write("<br>"); } } </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<h2 class="example"><br></h2>
</div>
<p>实例解释</p>
<ul class=" list-paddingleft-2">
<li><p>创建一个 <edition> 元素</p></li>
<li><p>创建值为 "First" 的文本节点</p></li>
<li><p>把这个文本节点追加到新的 <edition> 元素</p></li>
<li><p>把 <edition> 元素追加到第一个 <book> 元素</p></li>
</ul>
<hr>
<h2>删除元素</h2>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <body> <script> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var x=xmlDoc.getElementsByTagName("book")[0]; document.write("Child nodes before removal: "); document.write(x.childNodes.length); x.removeChild(x.childNodes[0]); document.write("<br>Child nodes after removal: "); document.write(x.childNodes.length); </script> </body> </html></pre>
</div>
<br>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a>
<p>点击 "运行实例" 按钮查看在线实例</p>
</div>
<p><strong>注释：</strong>上面实例的结果可能会根据所用的浏览器而不同。Firefox 把新行字符当作空的文本节点，而 Internet Explorer 不是这样。您可以在我们的 XML DOM 教程 中阅读到更多有关这个问题以及如何避免它的知识。</p>
</div>
</div>
</div>
<div class="previous-next-links">
<div class="previous-design-link">
←
<a href="//m.sbmmt.com/zh/xml/xml-server.html" rel="prev">XML 服务器</a>
</div>
<div class="next-design-link">
<a href="//m.sbmmt.com/zh/xml/xml-dont.html" rel="next">XML 注意事项</a>→
</div>
</div>
</article>
<div class="right-item phpcn-col-md2">
<ul>
<li><h3>教程导航</h3>
<dl class="navigation">
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" target="_blank" title="大前端">大前端</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="超文本标记语言">超文本标记语言</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS">CSS</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="HTML5">HTML5</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS3">CSS3</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="JavaScript">JavaScript</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="jQuery">jQuery</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Vue.js">Vue.js</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="反应">反应</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="AngularJS">AngularJS</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Node.js">Node.js</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="阿贾克斯">阿贾克斯</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="引导程序">引导程序</a>
<a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="基础">基础</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="高图表">高图表</a>
<a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="地图应用程序接口">地图应用程序接口</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" target="_blank" title="后端开发">后端开发</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="PHP">PHP</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="拉维尔">拉维尔</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python">Python</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="去">去</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="爪哇">爪哇</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C">C</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C++">C++</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C＃">C＃</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="联合应用程序">联合应用程序</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="姜戈">姜戈</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="网络平台">网络平台</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ASP">ASP</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="XML">XML</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="红宝石">红宝石</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python3">Python3</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="珀尔">珀尔</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="服务程序">服务程序</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="卢阿">卢阿</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="斯卡拉">斯卡拉</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="应用机器学习">应用机器学习</a>
<a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="VB脚本">VB脚本</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" target="_blank" title="数据库">数据库</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MySQL">MySQL</a>
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="雷迪斯">雷迪斯</a>
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="甲骨文">甲骨文</a>
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MongoDB">MongoDB</a>
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="内存缓存">内存缓存</a>
<a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="SQL服务器">SQL服务器</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" target="_blank" title="移动端">移动端</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="小程序">小程序</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="统一应用程序">统一应用程序</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="扑">扑</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="安卓">安卓</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="iOS系统">iOS系统</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="迅速">迅速</a>
<a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="其它">其它</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" target="_blank" title="运维开发">运维开发</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Linux">Linux</a>
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="码头工人">码头工人</a>
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Php学习">Php学习</a>
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="git">git</a>
<a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="其它工具">其它工具</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/7/type/3.html" target="_blank" title="UI设计">UI设计</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="阿胡尔">阿胡尔</a>
<a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="多维控制">多维控制</a>
<a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="网页表格">网页表格</a>
<a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="聚苯乙烯">聚苯乙烯</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" target="_blank" title="计算机基础">计算机基础</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="设计模式">设计模式</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="正则表达式">正则表达式</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="HTTP协议">HTTP协议</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站建设指南">网站建设指南</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="浏览器信息">浏览器信息</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站主机">网站主机</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="万维网联盟">万维网联盟</a>
<a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="基本代码">基本代码</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" target="_blank" title="XML">XML</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="DTD">DTD</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML文档对象模型">XML文档对象模型</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSLT">XSLT</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X路径">X路径</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X查询">X查询</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="星联">星联</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X指针">X指针</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML模式">XML模式</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a>
<a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="静止无功发生器">静止无功发生器</a>
</div>
</dd>
<dd class="right-item-mouseover">
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" target="_blank" title="网页服务">网页服务</a>
<div class="phpcn-ps-a">
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="网页服务">网页服务</a>
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="WSDL">WSDL</a>
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="肥皂">肥皂</a>
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="RSS">RSS</a>
<a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="RDF">RDF</a>
</div>
</dd>
</dl></li>
</ul>
</div>
</div>
<div id="codeMark"></div>
<div id="codeMain">
<div class="left">
<div id="codeEditor"></div>
<div class="editor-btn">
<div class="editor-btn-inner">
<a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提交">提交</a>
</div>
</div>
</div>
<div class="right">
<div id="codeResult"></div>
</div>
<div id="close"></div>
</div>
</body>
</html> 
