如何解析soccer.xml数据并在HTML页面展示足球队伍名称与比分

前置准备 #

首先在项目根目录创建soccer.xml文件，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<Soccer>
    <Details VisitingTeam="Argentina" VisitorScore="2" HomeTeam="USA" HomeScore="4" />
</Soccer>

原代码问题修正说明 #

你提供的原始代码存在三处逻辑错误，已全部修复：

• 错误使用childNodes读取属性：赛事相关信息是Details标签的自定义属性，需要用getAttribute()方法读取
• 节点索引越界：XML中仅存在1个Soccer节点，索引从0开始计数，原代码传入参数i=1会无法匹配到节点
• 重复读取Details节点：XML中仅存在1个Details节点，无需通过索引0/1/2/3匹配多个节点

完整可运行代码 #

<!doctype html>
<html lang="zh-CN">
<head>
  <title>足球赛事比分展示</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {max-width: 600px;margin: 50px auto;padding: 20px;border: 1px solid #eee;border-radius: 8px;}
    .score-wrap {display: flex;justify-content: space-around;align-items: center;margin-top: 30px;}
    .team {text-align: center;}
    .score {font-size: 32px;color: #f43f5e;margin-top: 10px;}
  </style>
</head>
<body>
  <div class="container">
    <h1>足球赛事比分</h1>
    <hr>
    <div class="score-wrap">
      <div class="team">
        <h3 id="HomeTeam"></h3>
        <div class="score" id="HomeScore"></div>
      </div>
      <div style="font-size: 24px;">VS</div>
      <div class="team">
        <h3 id="VisitingTeam"></h3>
        <div class="score" id="VisitorScore"></div>
      </div>
    </div>
  </div>
  <script>
    function displayFEED() {
      const xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          renderScore(this);
        }
      };
      xmlhttp.open("GET", "soccer.xml", true);
      xmlhttp.send();
    }

    function renderScore(xml) {
      const xmlDoc = xml.responseXML;
      const soccerNode = xmlDoc.getElementsByTagName("Soccer")[0];
      const detailNode = soccerNode.getElementsByTagName("Details")[0];
      // 读取属性值
      const homeTeam = detailNode.getAttribute("HomeTeam");
      const homeScore = detailNode.getAttribute("HomeScore");
      const visitingTeam = detailNode.getAttribute("VisitingTeam");
      const visitorScore = detailNode.getAttribute("VisitorScore");
      // 渲染到页面
      document.getElementById("HomeTeam").innerHTML = homeTeam;
      document.getElementById("HomeScore").innerHTML = homeScore;
      document.getElementById("VisitingTeam").innerHTML = visitingTeam;
      document.getElementById("VisitorScore").innerHTML = visitorScore;
    }
    window.onload = displayFEED;
  </script>
</body>
</html>

运行说明 #

直接用浏览器打开HTML文件即可看到渲染结果：主场队伍USA比分4，客场队伍Argentina比分2。

内容的提问来源于stack exchange，提问作者Chris 7