| 导读 |
通过 DOM，能够访问 XML 文档中的每个节点。 |
访问节点
您可以通过三种方式来访问节点：
- 通过使用 getElementsByTagName() 方法。
- 通过循环（遍历）节点树。
- 通过利用节点的关系在节点树中导航。
getElementsByTagName() 方法
getElementsByTagName() 返回拥有指定标签名的所有元素。
语法
node.getElementsByTagName("tagname");
实例
下面的实例返回 x 元素下的所有
元素：</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">x.getElementsByTagName("title");</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">请注意，上面的实例仅返回 x 节点下的 <title>元素。如需返回 XML 文档中的所有 <title> 元素，请使用：</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">xmlDoc.getElementsByTagName("title");</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">在这里，xmlDoc 就是文档本身（文档节点）。</p>
<div style="box-sizing: border-box; font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; white-space: normal; font-size: 14pt; color: white; background-color: black; border-left: 10px solid red; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">
<strong style="box-sizing: border-box;">DOM 节点列表（Node List）</strong></div>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">getElementsByTagName() 方法返回节点列表。节点列表是节点的数组。</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">下面的代码使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中，然后在变量 x 中存储 <title>节点的一个列表：</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">可通过索引号访问 x 中的 <title> 元素。如需访问第三个<title>，您可以编写：</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">y=x[2];</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">注意：该索引从 0 开始。</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">在本教程后面的章节中，您将学习更多有关节点列表（Node List）的知识。</p>
<div style="box-sizing: border-box; font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; white-space: normal; font-size: 14pt; color: white; background-color: black; border-left: 10px solid red; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">
<strong style="box-sizing: border-box;">DOM 节点列表长度（Node List Length）</strong></div>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">length 属性定义节点列表的长度（即节点的数量）。</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">您可以通过使用 length 属性来遍历节点列表：</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">实例</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");for (i=0;i<x.length;i++){
document.write(x[i].childNodes[0].nodeValue); document.write("");}</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">实例解释：</p>
<ol style="box-sizing: border-box; overflow-wrap: break-word; margin-bottom: 10px; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box;">使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</li>
<li style="box-sizing: border-box;">获取所有</li>
<li style="box-sizing: border-box;">输出每个</li></ol>
<div style="box-sizing: border-box; font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; white-space: normal; font-size: 14pt; color: white; background-color: black; border-left: 10px solid red; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">
<strong style="box-sizing: border-box;">节点类型（Node Types）</strong></div>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">XML 文档的 documentElement 属性是根节点。</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">节点的 nodeName 属性是节点的名称。</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">节点的 nodeType 属性是节点的类型。</p>
<div style="box-sizing: border-box; font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; white-space: normal; font-size: 14pt; color: white; background-color: black; border-left: 10px solid red; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">
<strong style="box-sizing: border-box;">遍历节点</strong></div>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">下面的代码遍历根节点的子节点，同时也是元素节点：</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">实例</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;for (i=0;i<x.length;i++){
if (x[i].nodeType==1)
{
// 执行一次
document.write(x[i].nodeName); document.write(""); }}</pre>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">实例解释：</p>
<ol style="box-sizing: border-box; overflow-wrap: break-word; margin-bottom: 10px; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box;">使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</li>
<li style="box-sizing: border-box;">获取根元素的子节点</li>
<li style="box-sizing: border-box;">检查每个子节点的节点类型。如果节点类型是 "1"，则是元素节点</li>
<li style="box-sizing: border-box;">如果是元素节点，则输出节点的名称</li></ol>
<div style="box-sizing: border-box; font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; white-space: normal; font-size: 14pt; color: white; background-color: black; border-left: 10px solid red; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;">
<strong style="box-sizing: border-box;">导航节点的关系</strong></div>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">下面的代码使用节点关系导航节点树：</p>
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; line-height: 23px; text-indent: 1em; text-align: justify; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">实例</p>
<pre style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 14.4px; white-space: pre-wrap; padding: 9.5px; margin-top: 0px; margin-bottom: 10px; line-height: 1.42857; color: rgb(51, 51, 51); word-break: break-all; overflow-wrap: break-word; background-color: rgb(245, 245, 245); border: 1px solid rgb(204, 204, 204); border-radius: 4px;">xmlDoc=loadXMLDoc("books.xml");x=xmlDoc.getElementsByTagName("book")[0].childNodes;y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i<x.length;i++){
if (y.nodeType==1)
{
// 输出节点名
document.write(y.nodeName + ""); }
y=y.nextSibling;}</pre>
<ol style="box-sizing: border-box; overflow-wrap: break-word; margin-bottom: 10px; color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">
<li style="box-sizing: border-box;">使用 loadXMLDoc() 把 "books.xml" 载入 xmlDoc 中</li>
<li style="box-sizing: border-box;">获取第一个 book 元素的子节点</li>
<li style="box-sizing: border-box;">把 "y" 变量设置为第一个 book 元素的第一个子节点</li>
<li style="box-sizing: border-box;">对于每个子节点（第一个子节点从 "y" 开始），检查节点类型，如果节点类型为 "1"，则是元素节点</li>
<li style="box-sizing: border-box;">如果是元素节点，则输出该节点的名称</li>
<li style="box-sizing: border-box;">把 "y" 变量设置为下一个同级节点，并再次运行循环</li></ol>
<blockquote style="box-sizing: border-box; padding: 10px 20px; margin: 0px 0px 20px; border-left: 5px solid rgba(0, 0, 0, 0.15); border-top-color: rgba(0, 0, 0, 0.15); border-right-color: rgba(0, 0, 0, 0.15); border-bottom-color: rgba(0, 0, 0, 0.15); color: rgb(61, 68, 80); font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif; font-size: 14.4px; white-space: normal; background-color: rgb(255, 255, 255);">
<p style="box-sizing: border-box; overflow-wrap: break-word; margin-top: 0px; margin-bottom: 10px; font-size: 14px; line-height: 23px; text-indent: 1em; color: rgb(136, 166, 164);">原文来自：
<a href="https://www.linuxprobe.com/of-accessing-nodes.html" target="_blank" style="text-indent: 1em; box-sizing: border-box; color: rgb(210, 50, 45); text-decoration-line: none;">https://www.linuxprobe.com/of-accessing-nodes.html</a></p></blockquote> </div>
</div>
<!-- m3 END -->
<div class="page">
<ul class="clearfix m01">
<li>
<a href="/69955379/viewspace-2859870/">XML DOM 节点信息概述</a> </li>
<li>
<a href="/69955379/viewspace-2861616/">了解下C# 循环</a> </li>
</ul>
</div>
</div>
<footer>
<a href="http://www.itpub.net">ITPUB论坛</a> | <a href="http://blog.chinaunix.net/">chinaunix博客</a> | <a href="http://bbs.chinaunix.net/">chinaunix论坛</a><br>
北京皓辰网域网络信息技术有限公司. 版权所有
</footer>
<script>
$(function(){
$("#fenlei").click(function(){
$("#left_1").show();
$("#left_2").show();
});
})
</script>
</body>
</html>
<script language="javascript" src="http://stat.it168.com/pv.js"></script>
<script>
function sendPV(){
var pvTrack = new PvTrack();
pvTrack.type = 35; // 频道类别ID
pvTrack.channel = 532; // 频道ID
pvTrack.pageType = 0;
pvTrack.track();
}
window.setTimeout("sendPV()", 1000);
</script>
<div class="share_box">
<div class="share">
<div class="share_tit">分享到</div>
<div class="share_close"></div>
<ul class="share_list">
<a href="http://service.weibo.com/share/share.php?url=http://m.blog.itpub.net/69955379/viewspace-2859871&appkey=&title=XML DOM – 访问节点概述&language=zh_cn"><li><span class="weibo">新浪微博</span></li></a>
<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://m.blog.itpub.net/69955379/viewspace-2859871&title=XML DOM – 访问节点概述&desc=导读通过 DOM，能够访问 XML 文档中的每个节点。访问节点您可以通过三种方式来访问节点：通过使用 getElementsByTagName() 方法。通过循环（遍历）节点树。通过利用节点的关系在节点树中导航。getElementsByTagName() 方法getElementsByTagName() 返回拥有指定标签名的所有元素。语法node.getElementsByTagName(&qu&summary=&site=&pics="><li><span class="qq"> QQ空间</span></li></a>
</ul>
<div class="weixin2"> <em></em> <i>请使用浏览器的分享功能分享到微信等</i></div>
</div>
</div>
<script>
$(".fenxiang").click(function(){
$(".share_box").show();
});
$(".share_close").click(function(){
$(".share_box").hide();
});
$(".backTop").click(function(){
$('html,body').animate({ scrollTop: 0 }, 300)
})
$('.content p br').parents('p').each(function (k,v) {
if ($(v).html() == '') {
$(v).css('display','none')
}
})
</script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var videoContainer = {};
$(document).delegate('.fake-video-btn', 'click', function () {
var width = $(this).parent('.video-container').width();
var height = $(this).parent('.video-container').height();
var $this = $(this);
var videoid = $(this).data('videoid');
var aliplayerid = $this.closest('.video-container').attr('id');
$.ajax({
url: 'http://blog.itpub.net/getvidoeinfo?videoid=' + videoid
, type: 'get'
, success: function (ret) {
if (ret.code == 200) {
videoContainer[videoid] = new Aliplayer({
id:aliplayerid,
autoplay:true,
width:width + 'px',
height:height + 'px',
format: "",
vid:videoid,
playauth:ret.data.PlayAuth,
cover:ret.data.VideoMeta.CoverURL,
skinLayout:[ //按钮UI
{name:"bigPlayButton","align":"cc","x":15,"y":12},//播放
{name: "H5Loading", align: "cc"},
{name: "errorDisplay", align: "tlabs", x: 0, y: 0},
{name: "infoDisplay"},
{name:"tooltip", align:"blabs",x: 0, y: 56},
{name: "thumbnail"},
{
name: "controlBar", align: "blabs", x: 0, y: 0,
children: [
{name: "progress", align: "blabs", x: 0, y: 44},
{name: "playButton", align: "tl", x: 15, y: 12},
{name: "timeDisplay", align: "tl", x: 10, y: 7},
{name: "fullScreenButton", align: "tr", x: 10, y: 12},
{name:"subtitle", align:"tr",x:15, y:12},
{name:"setting", align:"tr",x:15, y:12},
{name: "volume", align: "tr", x: 5, y: 10}
]
}
]
},function(player){
$this.siblings('img').remove();
$this.remove();
player.on('play',function(e) {
for (var key in videoContainer) {
if (videoid != key) {
videoContainer[key].pause();
}
}
});
});
} else {
alert(ret.msg);
}
}
})
});
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4d058320abe98d01', // 必填，公众号的唯一标识
timestamp: 1735059546, // 必填，生成签名的时间戳
nonceStr: '0YlTnTUrlWMzmzch', // 必填，生成签名的随机串
signature: '3e1a96819d766dbbd2b2a06df682d8a99efebb9f',// 必填，签名，见附录1
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
var title = 'XML DOM – 访问节点概述';
var desc = "";
var link = 'http://m.blog.itpub.net/69955379/viewspace-2859871/';
var imgUrl = $(".main img:first").attr('src');
if(!imgUrl){
imgUrl = 'http://m.blog.itpub.net/static/images/share.png?v1';
}
console.log(imgUrl);
wx.onMenuShareAppMessage({ //分享给朋友
title: title, // 分享标题,可在控制器端传递
desc: desc,//分享的描述，可在控制器端传递
link: link, // 分享链接，可在控制器端传递
imgUrl: imgUrl, // 分享图标 ，可在控制器端传递
success: function() {},
cancel: function() {}
});
wx.onMenuShareTimeline({ //分享到朋友圈
title: title, // 分享标题,可在控制器端传递
desc: desc,//分享的描述，可在控制器端传递
link: link, // 分享链接，可在控制器端传递
imgUrl: imgUrl, // 分享图标 ，可在控制器端传递
success: function() {},
cancel: function() {}
});
});
</script>
</body>
</html>