关于getElementsByTagName的2个问题

eisldkw 2019-06-13 05:11:42

以下代码中

1、XML数据user.xml
<?xml version="1.0" encoding="utf-8" ?>
<users>
<user>
<username>张三XML</username>
<age>33</age>
</user>
<user>
<username>李四XML</username>
<age>34</age>
</user>
</users>
2、HTML页面代码
<html>
<head>
<script type="text/javascript">
function GetXML() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("get", "XML/user.xml?random=" + Math.random(), true);
// 绑定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 获取返回的XML数据主体内容
var result = xmlHttp.responseXML.documentElement;
// 获取user节点元素
var users = result.getElementsByTagName("user");
问题一：此处为什么不是 result.getElementsByTagName("users")
for (var i = 0; i < users.length; i++) {
// 获取单个user
var user = users[i];
// 获取user的具体信息
var userName = user.getElementsByTagName("username")[0].childNodes[0].nodeValue;
问题二：此处不是已经指定了“username"，为什么后面还带 childNodes[0]，这个 childNodes[0] 是代指什么？

var age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
// 添加行
appendRow(userName, age);
}
}
}
// 发送请求
xmlHttp.send();
}
// 添加新行
function appendRow(username, age) {
var ui = document.getElementById("userinfo");
// 添加新行
var newRow = ui.insertRow(ui.rows.length);
// 添加新的单元格
newRow.insertCell(0).innerHTML = username;
newRow.insertCell(1).innerHTML = age;
}
</script>
</head>
<body>
<input type="button" value="加载XML数据" onclick="GetXML();" />
<br />
<br />
<table id="userinfo">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
</table>
</body>
</html>

...全文

397 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

河南棒小伙 2019-06-14

打赏
举报

建议楼主区分一下XML和HTML中所谓的节点，XML中 1、整个文档是一个文档节点 2、每个 XML 标签是一个元素节点 3、包含在 XML 元素中的文本是文本节点 4、每一个 XML 属性是一个属性节点 5、注释属于注释节点本文中username叫元素节点，它的chidNode[0]，就获取到了它里面的文本节点，对应的就是具体名字。你的第一个问题，为什么要getElementsByTagName('user'),而不是（"users"），你也可以获取users，这样获取的就是最外层的users节点，然后你还得再获取一次childNodes来获取里面的users，然后效果一样的。

天际的海浪 2019-06-14

打赏
举报

html中也有文本节点，只是没有属性节点

countstars 2019-06-14

打赏
举报

标签里 a=b，a就是属性，比如width=“100”，width就是属性，100就是属性的值，属性就是你的状态，比如人的身高就是人的属性。

河南棒小伙 2019-06-14

打赏
举报

引用 6 楼 eisldkw 的回复:

[quote=引用 5 楼河南棒小伙的回复:] 建议楼主区分一下XML和HTML中所谓的节点，XML中 1、整个文档是一个文档节点 2、每个 XML 标签是一个元素节点 3、包含在 XML 元素中的文本是文本节点 4、每一个 XML 属性是一个属性节点 5、注释属于注释节点本文中username叫元素节点，它的chidNode[0]，就获取到了它里面的文本节点，对应的就是具体名字。你的第一个问题，为什么要getElementsByTagName('user'),而不是（"users"），你也可以获取users，这样获取的就是最外层的users节点，然后你还得再获取一次childNodes来获取里面的users，然后效果一样的。

非常感谢，请问属性节点是什么，可否提供个实例。您所讲的上述知识点，什么资料上有讲，有没有相关的资料提供个链接。非常感谢。[/quote] 属性节点，跟HTML很像了，<div class="123"></div>，class就是属性节点了，参考网址，一百度一大堆。。。http://www.w3school.com.cn/xmldom/dom_nodes.asp

eisldkw 2019-06-14

打赏
举报

引用 5 楼河南棒小伙的回复:

建议楼主区分一下XML和HTML中所谓的节点，XML中
1、整个文档是一个文档节点
2、每个 XML 标签是一个元素节点
3、包含在 XML 元素中的文本是文本节点
4、每一个 XML 属性是一个属性节点
5、注释属于注释节点
本文中username叫元素节点，它的chidNode[0]，就获取到了它里面的文本节点，对应的就是具体名字。
你的第一个问题，为什么要getElementsByTagName('user'),而不是（"users"），你也可以获取users，这样获取的就是最外层的users节点，然后你还得再获取一次childNodes来获取里面的users，然后效果一样的。

非常感谢，请问属性节点是什么，可否提供个实例。您所讲的上述知识点，什么资料上有讲，有没有相关的资料提供个链接。非常感谢。

天际的海浪 2019-06-13