Javascript 如何将数据从XML文件导入HTML表

我得到了一个XML文件，看起来像这样。我想制作一个HTML表，它将按顺序包含这些数据。知道怎么做吗？我对javascript知之甚少。现在，当我单击按钮时：

我得到一个错误：

js:16未捕获的TypeError:无法读取null的属性“getElementsByTagName”

函数loadDoc（）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
我的职能（本）；
}
};
open（“GET”，“examData.xml”，true）；
http.send（）；
}
函数myFunction（xml）{
var i；
var xmlDoc=xml.responseXML；
var table=“ExamCourseSemestStudentsFrom of examRoom的日期类型”；
var x=xmlDoc.getElementsByTagName（“检查”）；
对于（i=0；i您必须使用AJAX:

诸如此类：

const myTable   = document.getElementById('demo')
    , myXMLfile = 'examData.xml';
var xmlhttp     = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctGetXML(this);
    }
    else {
      console.warn("error %d on loading file: %s !", this.status, myXMLfile);
    }
  }
};


function loadDoc() {
  xmlhttp.open("GET", myXMLfile, true);
  xmlhttp.send();
}

function fctGetXML(xml) {
  let xmlDoc = xml.responseXML;

  xmlDoc.querySelectorAll('exam').forEach(exam => {
    let nRow = myTable.insertRow(-1) , rCell  = 0;

    nRow.insertCell(rCell++).textContent = exam.querySelector('date').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('type').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('course').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('semester').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('students').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('form').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('room').textContent;
  });
}

这只是一个XML片段，缺少根。请完成数据。同时添加一个您已尝试处理数据的代码示例。抱歉，我更改了它。现在代码应该可以了。添加一个您已尝试处理数据的代码示例…我提供了JS代码。您可以看一下吗？您尝试过我的答案了吗？您是s提供反馈并验证一个好的答案嘿！很抱歉反应太晚。我尝试了你的代码，但我得到了以下错误：hm.js:23 Uncaught TypeError:无法在XMLHttpRequest.xmlhttp.onreadystatechange（hm.js:8）的fctGetXML（hm.js:22）的NodeList.forEach（）处读取null属性'insertRow'
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<exams>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
  <exam>
    <date>2020-01-15</date><type>Written</type><course>SJD-1Z</course><semester>1</semester><students>0</students><form>Ordinary</form><room>DSADSADSA</room>
  </exam>
</exams>

<h1>Our first project</h1>
<button type="button" onclick="loadDoc()">Get Table</button>
<br><br>
<table id="demo"></table> 

const myTable   = document.getElementById('demo')
    , myXMLfile = 'examData.xml';
var xmlhttp     = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctGetXML(this);
    }
    else {
      console.warn("error %d on loading file: %s !", this.status, myXMLfile);
    }
  }
};


function loadDoc() {
  xmlhttp.open("GET", myXMLfile, true);
  xmlhttp.send();
}

function fctGetXML(xml) {
  let xmlDoc = xml.responseXML;

  xmlDoc.querySelectorAll('exam').forEach(exam => {
    let nRow = myTable.insertRow(-1) , rCell  = 0;

    nRow.insertCell(rCell++).textContent = exam.querySelector('date').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('type').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('course').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('semester').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('students').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('form').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('room').textContent;
  });
}