无法读取 null 的属性“getElementsByTagName”，这是怎么回事？答案

【问题标题】：Cannot read property 'getElementsByTagName' of null, what is happening?无法读取 null 的属性“getElementsByTagName”，这是怎么回事？
【发布时间】：2017-02-21 17:39:10
【问题描述】：

我的问题似乎在 LoadXML 的子函数调用之间。似乎 xml 数据由于某种奇怪的原因变为空，我不知道如何解决这个问题。 Stackexchange 似乎有很多类似的问题，但很多都没有答案，或者他们的答案对我的情况没有帮助。

function load() {
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    var idname = document.getElementById("name").value;
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this); //it obtains it here...
            LoadXML(this, idname);
        }
    };
    xmlhttp.open("GET", "helper_database.xml", false);
    xmlhttp.overrideMimeType('text/xml');
    xmlhttp.send();
}

function LoadXML(xml, name) {
    var x, i, xmlDoc, nametxt, areEqual;
    xmlDoc = xml.responseXML;
    nametxt = name;
    console.log("HERE \n" + xmlDoc); //...but it becomes null.
    x = xmlDoc.getElementsByTagName("name"); //this returns the error of "Cannot read property 'getElementsByTagName' of null"
    console.log("muuttujan x eka: " + x[0]);
    for (i = 0; i < x.length; i++) {
        if (areEqual = xmlDoc.getElementsByTagName("name").toUpperCase() === nametxt.toUpperCase()) {
            document.getElementById("ComFocus").value = x[i];
        }
    }
}

这里是 helper_database.xml

<Character>
    <name>test</name>
    <stats>
        <Com>1</Com>
        <Con>2</Con>
        <Cun>3</Cun>
        <Dex>4</Dex>
        <Mag>5</Mag>
        <Per>6</Per>
        <Str>7</Str>
        <Wil>8</wil>
    </stats>
</Character>

【问题讨论】：

这只是一个错字（我很惊讶您在 Web 控制台中没有收到错误，但我也没有）： XML 格式错误：<Wil>8</wil> 请注意结尾标签是wil，而不是</Wil>。修复它，它会解析并填写responseXML。
我建议不要使用console.log 手电筒在黑暗中磕磕绊绊，我建议使用浏览器内置的全功能调试器来打开灯。使用它，您可以在 onreadystatechange 处理程序中查看 this 并看到它的 responseXML 属性是 null。
喜欢 T.J. Crowder 写道，它是 XML 文件中的一种类型。此外，您将在平等检查中遇到问题。 xmlDoc.getElementsByTagName("name") 是一个集合，所以不会有 .toUpperCase()。你必须做类似xmlDoc.getElementsByTagName("name")[i].innerHTML.toUpperCase()或更短的x[i].innerHTML.toUpperCase()
除了其他cmets，给定xmlhttp.open("GET", "helper_database.xml", false);做同步请求，根本不需要设置onreadystatechange事件处理器，你也可以尝试处理响应在send() 通话之后。一般来说，你应该尝试通过xmlhttp.open("GET", "helper_database.xml", true)来使用异步请求，那么onreadystatechange处理程序至少是有意义的。
我非常感谢所有这些 cmets 和反馈。我不知道 xml 标签区分大小写。

标签： javascript xml xmlhttprequest

【解决方案1】：

您有一些 typeo 以及一些解析错误。
请注意：

getElementsByTagName().toUpperCase 无效，因为 gEBTN 返回对象数组。所以，你必须使用getElementsByTagName()[i].innerHTML.toUpperCase()。
不要使用console.log("muuttujan x eka: " + x[0]);，而是使用console.log("muuttujan x eka: " + x[0].innerHTML);

function load() {
  var xmlhttp;
  xmlhttp = new XMLHttpRequest();
  var idname = document.getElementById("name").value;
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      console.log(xmlhttp); //it obtains it here...
      LoadXML(xmlhttp, idname);
    }
  };
  xmlhttp.open("GET", "helper_database.xml", false);
  //xmlhttp.overrideMimeType('text/xml');
  xmlhttp.send();
}

function LoadXML(xml, name) {
  var x, i, xmlDoc, nametxt, areEqual;
  xmlDoc = xml.responseXML;
  nametxt = name;
  console.log("HERE \n" + xmlDoc); //...but it becomes null.
  x = xmlDoc.getElementsByTagName("name"); //this returns the error of "Cannot read property 'getElementsByTagName' of null"
  console.log("muuttujan x eka: " + x[0].innerHTML);
  for (i = 0; i < x.length; i++) {
    if (areEqual = xmlDoc.getElementsByTagName("name")[0].innerHTML.toUpperCase() === nametxt.toUpperCase()) {
      document.getElementById("ComFocus").value = x[i];
    }
  }
}

<html>
  <body>
    <input id="name" onblur="load();" />
    <div id="ComFocus"></div>
  </body>
</html>

XML

<?xml version="1.0" encoding="UTF-8"?>
<Character><name>test</name>
<stats>
<Com>1</Com>
<Con>2</Con>
<Cun>3</Cun>
<Dex>4</Dex>
<Mag>5</Mag>
<Per>6</Per>
<Str>7</Str>
<Wil>8</Wil>
</stats></Character>

【讨论】：