JS:解析XML并基于节点更新控件
JS:解析XML并基于节点更新控件
提问于 2018-05-29 16:39:50
我在一次面试中被问到了这个问题。任务是在客户端解析xml，并用其内容填充html页面。此外，还要求而不是使用jQuery。
理想情况下，我甚至不知道XML上有什么，只是简单地为其中的每个节点/元素添加一个标签。但是假设我确实知道xml是什么样子的：
<?xml version="1.0" encoding="UTF-8"?>
<cv>
<FirstName>David</FirstName>
<LastName>Refaeli</LastName>
<Jobs>Worst JS Programmer</Jobs>
</cv>我的服务器端html是：
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="185px" Width="279px"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return ParseXml();" /><br />
<br />
<asp:Label ID="FirstName" runat="server" Text=""></asp:Label><br />
<asp:Label ID="LastName" runat="server" Text=""></asp:Label><br />
<asp:Label ID="Jobs" runat="server" Text=""></asp:Label><br />
</div>
</form>
</body>
</html>让我们假设textbox包含xml。并且我已经为xml中的文本设置了占位符标签。
我尝试运行这个JS (和许多其他变体)，但它失败了，并且在VS中调试它似乎找不到原因(它确实突然将我弹出到一个jQuery文件中……)所以我猜我走错路了。
<script>
function ParseXml() {
var text = document.getElementById('<% = TextBox1.ClientID %>');
parser = new DOMParser();
xmlDoc = parser.parseFromString(text.textContent, "text/xml");
var a1 = xmlDoc.getElementsByTagName("cv")[0].childNodes[0].nodeValue;
var a2 = xmlDoc.getElementsByTagName("cv")[0].childNodes[1].nodeValue;
var a3 = xmlDoc.getElementsByTagName("cv")[0].childNodes[2].nodeValue;
document.getElementById('<% = FirstName.ClientID %>').textContent = a1;
document.getElementById('<% = LastName.ClientID %>').textContent = a2;
document.getElementById('<% = Jobs.ClientID %>').textContent = a3;
return true;
}
</script>任何帮助都将不胜感激。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50579901
复制相关文章
相似问题