XML DOM 高级
XML DOM - 高级
在本教程的较早章节中，我们介绍了 XML DOM，并使用了 XML DOM 的 getElementsByTagName() 方法从 XML 文档中取回数据。
在本章中我们将结合一些其他重要的 XML DOM 方法。
您可以在我们的 XML DOM 教程 中学习更多有关 XML DOM 的知识。
获取元素的值
下面的实例中使用的 XML 文件：books.xml。
下面的实例检索第一个
元素的文本值：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;</div> <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryxml_dom_getelement" class="tryitbtn">尝试一下 »</a></div><hr> <h2>获取属性的值</h2> <p>下面的实例检索第一个 <title> 元素的 "lang" 属性的文本值：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); </div> <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryxml_dom_getattribute" class="tryitbtn">尝试一下 »</a></div><hr> <h2>改变元素的值</h2> <p> 下面的实例改变第一个 <a href="https://www.w3cschool.cn/htmltags/tag-title.html" target="_blank"><title> 元素</a>的文本值：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];<br> x.nodeValue="Easy Cooking"; </div> <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryxml_dom_changeelement" class="tryitbtn">尝试一下 »</a></div><hr> <h2>创建新的属性</h2> <p>XML DOM 的 <a href="https://www.w3cschool.cn/jsref/met-element-setattribute.html" target="_blank">setAttribute() 方法</a>可用于改变现有的属性值，或创建一个新的属性。</p> <p>下面的实例创建了一个新的属性（edition="first"），然后把它添加到每一个 <book> 元素中：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> x=xmlDoc.getElementsByTagName("book");<br><br> for(i=0;i<x.length;i++)<br> {<br> x[i].setAttribute("edition","first");<br> } </div> <br><a target="_blank" class="tryitbtn" showtry="1" href="/tryrun/showhtml/tryxml_dom_addattribute">尝试一下 »</a></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"> <h2 class="example">实例</h2> <div class="example_code notranslate"> newel=xmlDoc.createElement("edition");<br> newtext=xmlDoc.createTextNode("First");<br> newel.appendChild(newtext);<br><br> x=xmlDoc.getElementsByTagName("book");<br> x[0].appendChild(newel); </div> <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryxml_dom_createelement" class="tryitbtn">尝试一下 »</a> </div> <p>实例解释</p> <ul> <li>创建一个 <edition> 元素</li> <li>创建值为 "First" 的文本节点</li> <li>把这个文本节点追加到新的 <edition> 元素</li> <li>把 <edition> 元素追加到第一个 <book> 元素</li> </ul> <hr> <h2>删除元素</h2> <p>下面的实例删除第一个 <book> 元素的第一个节点：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code notranslate"> x=xmlDoc.getElementsByTagName("book")[0];<br> x.removeChild(x.childNodes[0]); </div> <br><a target="_blank" showtry="1" href="/tryrun/showhtml/tryxml_dom_removeelement" class="tryitbtn">尝试一下 »</a> </div> <p><strong>注释：</strong>上面实例的结果可能会根据所用的浏览器而不同。Firefox 把新行字符当作空的文本节点，而 Internet Explorer 不是这样。您可以在我们的 <a href="#">XML DOM 教程</a> 中阅读到更多有关这个问题以及如何避免它的知识。</p></div>
</article>
</div>
</div>
</ggg>
<aside class="d-none d-lg-block col-lg-2">
<section>
<div class="">
<form action="/helpdoc/Search" target="_blank" autocomplete="off">
<div class="input-group">
<input type="text" name="kw" value="" class="form-control" placeholder="输入关键词搜索">
<button class="btn btn-outline-secondary" type="submit">搜索</button>
</div>
</form>
</div>
<div class="list-group-item-heading mt-2">
<h4>推荐阅读</h4>
</div>
<ul class="list-group mb-2 sticky-top">
<li class="list-group-item">
<a href="/detail/2022/1104/332549EAE2333382" class="w-100 d-inline-block text-truncate" title=".NET(C#) 设计模式 桥接模式" target="_blank">
.NET(C#) 设计模式 桥接模式
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/25A1138878E59C74" class="w-100 d-inline-block text-truncate" title="Java Lombok 报错(IllegalAccessError: class lombok.javac.apt.LombokProcessor)解决方法" target="_blank">
Java Lombok 报错(IllegalAccessError: class lombok.javac.apt.LombokProcessor)解决方法
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1107/D3A930B7EF4ADA9F" class="w-100 d-inline-block text-truncate" title="Spring MVC - 资源包视图解析器示例" target="_blank">
Spring MVC - 资源包视图解析器示例
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/762233D40A118CF8" class="w-100 d-inline-block text-truncate" title="TestLink - 需求概述" target="_blank">
TestLink - 需求概述
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/099A15E207F5E995" class="w-100 d-inline-block text-truncate" title="Xamarin - 第一次申请" target="_blank">
Xamarin - 第一次申请
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/3CA56812C7B43031" class="w-100 d-inline-block text-truncate" title="Bulma - 列" target="_blank">
Bulma - 列
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/4A22BF395AC98A21" class="w-100 d-inline-block text-truncate" title="Django - Apache安装程序" target="_blank">
Django - Apache安装程序
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/F771CA7384B017C9" class="w-100 d-inline-block text-truncate" title="Excel DAX - 计算列" target="_blank">
Excel DAX - 计算列
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/0990685A049ABB90" class="w-100 d-inline-block text-truncate" title="Excel用于创建仪表板的功能" target="_blank">
Excel用于创建仪表板的功能
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/D721CD3C406F26C7" class="w-100 d-inline-block text-truncate" title="Teradata - FastLoad" target="_blank">
Teradata - FastLoad
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/F22E340C3A6E81FE" class="w-100 d-inline-block text-truncate" title="PyQt - 多文档界面" target="_blank">
PyQt - 多文档界面
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/4661D0BB499F10D5" class="w-100 d-inline-block text-truncate" title="Python - CGI编程" target="_blank">
Python - CGI编程
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/FD3958887ADB78EA" class="w-100 d-inline-block text-truncate" title="SAP NetWeaver - 流程集成选项" target="_blank">
SAP NetWeaver - 流程集成选项
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/8CB161B198C8BB03" class="w-100 d-inline-block text-truncate" title="SAP Web Dynpro - 概述" target="_blank">
SAP Web Dynpro - 概述
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/558313455CE2665F" class="w-100 d-inline-block text-truncate" title="Memcached - 环境" target="_blank">
Memcached - 环境
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/55F0246C78F43E7E" class="w-100 d-inline-block text-truncate" title="数据结构 - 索引查找" target="_blank">
数据结构 - 索引查找
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/B98F94B61EC63930" class="w-100 d-inline-block text-truncate" title="YouTube营销 - 粉丝查找器" target="_blank">
YouTube营销 - 粉丝查找器
</a>
</li>
<li class="list-group-item">
<a href="/detail/2023/0131/86C2D8F3FBD85ECF" class="w-100 d-inline-block text-truncate" title="F＃记录" target="_blank">
F＃记录
</a>
</li>
<li class="list-group-item">
<a href="/detail/2023/0306/4D490A2871D1682F" class="w-100 d-inline-block text-truncate" title="CSS font-size 属性" target="_blank">
CSS font-size 属性
</a>
</li>
<li class="list-group-item">
<a href="/detail/2023/0414/33988C05E7E2ECB0" class="w-100 d-inline-block text-truncate" title="jQuery UI 工作原理" target="_blank">
jQuery UI 工作原理
</a>
</li>
</ul>
</section>
</aside>
</article>
</main>
</section>
<footer class="footer">
<div class="container-fluid footer-widget">
<div class="container">
<div class="row">
<div class="col-12 col-md-4 col-lg-4">
<h3 class="text-start">幻海十年，专注互联网</h3>
<ul class="d-flex px-0" style="text-align: left; flex-wrap: wrap">
<li class="item-3 mb-1">
<a target="_blank" href="https://wx.jonvie.com" rel="noopener noreferrer" title="几微助手">
<span>几微助手</span>
</a>
</li>
<li class="item-3">
<a target="_blank" href="http://www.wonhero.com/" rel="noopener noreferrer" title="幻海官网">
<span>幻海官网</span>
</a>
</li>
<li class="item-3">
<a target="_blank" href="http://www.rssso.com/" rel="noopener noreferrer" title="幻海优品">
<span>幻海优品</span>
</a>
</li>
<li class="item-3 mb-1">
<a target="_blank" href="http://www.xct.cn" rel="noopener noreferrer" title="新彩天">
<span>新彩天</span>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h3 class="text-start">关于</h3>
<div class="text-start">
<span>
幻海科技成立于2009年，是一家集互联网基础技术服务、网络平台运营服务、软件产品研发、行业软件定制、自营电商平台于一体的专业互联网公司
</span>
</div>
</div>
<div class="col-12 col-md-4 col-lg-4">
<h3 class="text-center">联系</h3>
<div>
<img src="http://www.jonvie.com/static/images/rightbar/QRcode.png?v=23" width="80" height="80" alt="微信公众号" />
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 10px;">
<div class="row">
<div class="col-12 site-info">
<div class="item">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener external nofollow noreferrer">
粤ICP备09219857号
</a>
</div>
</div>
<div class="item">2009-2025 Copyright Wonhero.Com All Rights Reserved</div>
<div class="item">深圳幻海软件技术有限公司 版权所有</div>
</div>
</div>
</footer>
<div id="toTop" style="display: none">返回顶部</div>
<script src="//static.jonvie.com/wonhero/jquery/jquery.min.js"></script>
<script src="//static.jonvie.com/wonhero/bootstrap/bootstrap.min.js"></script>
<script>
document.querySelectorAll('pre.prettyprint').forEach(el => {
hljs.highlightElement(el);
});
</script>
<script>
const total = Number("31");
let loading = document.querySelector(".loading");
loading.style.display = "none";
let currentpage = 2;
let limit = 50;
let isMore = total > limit;
// 用于计算当前元素距离浏览器顶部距离
function getElementTop(el) {
if (el.offsetParent ) {
return getElementTop(el.offsetParent ) + el.offsetTop
}
return el.offsetTop
}
// 监听滚动条
document.addEventListener("scroll",init);
// 临界点判断
function init(){
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop // 滚动条
let sidebarTop = getElementTop(document.querySelector(".sort-sidebar"));
let sidebarHeight = document.querySelector(".classify").offsetHeight;
if (sidebarTop + sidebarHeight < (scrollTop + document.documentElement.clientHeight) && isMore) {
getSideBar(currentpage, limit) // 请求数据
}
}
init();
// 获取数据
function getSideBar(page, limit) {
try {
isMore = false;
fetch(`/api/ManagerApi/GetPageArtitlesByCls?page=${page}&limit=${limit}&channel=devdoc&clsId=944CEE1CFDE0B35B`)
.then(resp => resp.json())
.then(res => {
if (res.Success) {
isMore = (page - 1) * limit + res.Data.Item2.length < total;
if (isMore) currentpage += 1;
renderSidebar(res.Data.Item2); // 渲染列表
}
});
} catch (e) {
console.log(e, 23)
}
}
// 渲染列表
function renderSidebar(list = []) {
if (!list.length) return;
let template = list.map(item => {
return `<li class="list-group-item" style="border: 0px">
<a class="w-100 d-inline-block text-truncate" title="${item.ContentTitle}" href="/detail/${item.ContentID}" target="_blank">
${item.ContentTitle}
</a>
</li>`
}).join("");
document.querySelector(".classify").innerHTML = document.querySelector(".classify").innerHTML + template;
}
</script>
<script>
;(()=>{
var height = $(window).height();
$(window).scroll(function() {
if ($(window).scrollTop() > height) {
$("#toTop").fadeIn(500);
} else {
$("#toTop").fadeOut(500);
}
});
$("#toTop").click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
})();
</script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?843cad737da0ae856cb26e84eafcd9bb";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "Jzndc69N7BtnPgpT", ck: "Jzndc69N7BtnPgpT" })</script>
</body>
</html>