“getElementsByTagName”出现未定义答案

【问题标题】：'getElementsByTagName' comes up undefined“getElementsByTagName”出现未定义
【发布时间】：2014-07-27 01:39:47
【问题描述】：

我正在研究基于 xml 内容显示图像的内容流。我将它构建为一个站点，所以它是 html 和 javascript，并且出于某种未知的原因 - 相信我，我已经用尽可能精细的齿梳梳理了它 - 我的 javascript 只是没有加载我的 xml （这就是我相当确定问题所在，但我可能是错的）它向我抛出了“getElementsByTagName”为空的错误。现在我还没有内置完整的功能，我只是想通过将 xml 读取为文本来测试它，所以请耐心等待。

加载XMLDoc.js：

function loadXMLDoc(filename)
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}

我在 html 中的内部 java:

<script>
xmlDoc = loadXMLDoc("test.xml");
    var x = xmlDoc.getElementsByTagName("song");
    for (i=0; i<x.length; i++);
    {
     var a = (x[i].getElementsByTagName("source")[0].childnodes[0].nodeValue);
     var b = (x[i].getElementsByTagName("artist")[0].childnodes[0].nodeValue);
     var c = (x[i].getelementsByTagName("title")[0].childnodes[0].nodeValue);
     var par = '<img class= "item" href ="#" ondblclick = "confirm()" src ="' +'" "title="' +b+ '"-"'+ c+ ' " />';
     document.getElementById("demo").innerHTML += par;
     }
</script>

以及完整的错误：

未捕获的类型错误：无法读取未定义专辑的属性“getElementsByTagName”。html:24 （匿名函数）

为了好玩，我的 xml 示例：

<song>
<source>imgs/Beck.jpg</source>
<title>Modern Guilt</title>
<artist>Beck</artist>
</song>

希望我涵盖了所有需要的内容，我知道这可能很愚蠢，但我无法确定。

【问题讨论】：

也许xmlDoc 是undefined。你在哪个浏览器中测试过这个？请参阅 MDN 中的注释：“注意：从 Gecko 30.0（Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27）开始，由于对用户体验的负面影响，主线程上的同步请求已被弃用。”
您是否进行了基本调试以查看它是哪一行代码以及是xmlDoc 还是x[i] 是undefined？在此处发布之前，应完成基本的调试和故障排除。
顺便说一句，将xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 包装在 try..catch 中是很常见的，因为您无法对其进行测试，如果不支持它，则会引发错误（尽管很少有浏览器应该采用该分支） .

标签： javascript html xml xmlhttprequest getelementsbytagname

【解决方案1】：

首先你有一个“;”在你的 for 循环之后不应该在这里：

for (i=0; i<x.length; i++);
    {

应该是

for (i=0; i<x.length; i++) {

因为这里发生的是你 for 循环迭代 x 的元素但没有执行你的身体。

其次，你的

var c = (x[i].getelementsByTagName("title")[0].childnodes[0].nodeValue);

包含一个错字，应该是getElementsByTagName，e大写

这是我使用的代码，它工作正常：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>

<div id="demo"></div>

<script>
var loadXMLDoc = function (filename) {
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",filename,false);
        xhttp.send();

        if (xhttp.readyState === 4 && xhttp.status === 200) {
            return xhttp.responseXML;
        }
        return {error : 'file not found'};

    },
    xmlDoc = loadXMLDoc("test.xml"),
    testObj = xmlDoc,
    x = testObj.getElementsByTagName("song");
for (i=0; i<x.length; i++) {
    var objectElem = x[i];
     var a = (objectElem.getElementsByTagName("source")[0].textContent),
         b = (objectElem.getElementsByTagName("artist")[0].textContent),
         c = (objectElem.getElementsByTagName("title")[0].textContent),
         par = '<img class="item" href="#" ondblclick="confirm()" src="'+ a +'" title="' +b+ '-'+ c+ '" />';
     console.log(par);
     document.getElementById("demo").innerHTML += par;
 }
</script>

</body>

</html>

这是我的 test.xml（与上述代码放在同一文件夹中）：

<songlist>
    <song>
        <source>imgs/Beck.jpg</source>
        <title>Modern Guilt</title>
        <artist>Beck</artist>
    </song>
    <song>
        <source>imgs/Beck2.jpg</source>
        <title>Modern Guilt2</title>
        <artist>Beck2</artist>
    </song>
</songlist>

【讨论】：

鹰眼！好工作。在访问x[i] 时，i 已经是x.length，因此x[i] 返回undefined。
答案中有错字：it should be getElementByTagName... 应该是getElementsByTagName。

【解决方案2】：

以防万一它实际上是异步请求的问题，这就是您异步执行的方式（我也冒昧地在本地声明了 xhttp）：

function loadXMLDoc(filename, callback)
{
    var xhttp;
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else // code for IE5 and IE6
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",filename,true);
    xhttp.onreadystatechange = function()
    {
        if(xhttp.readyState === 4)
        {
            callback(xhttp.responseXML);
        }
    }
    xhttp.send();
}

loadXMLDoc("test.xml", function(xmlDoc)
{
    var x = xmlDoc.getElementsByTagName("song");
    for (i=0; i<x.length; i++)
    {
        var a = (x[i].getElementsByTagName("source")[0].childnodes[0].nodeValue);
        var b = (x[i].getElementsByTagName("artist")[0].childnodes[0].nodeValue);
        var c = (x[i].getElementsByTagName("title")[0].childnodes[0].nodeValue);
        var par = '<img class= "item" href ="#" ondblclick = "confirm()" src ="' +'" "title="' +b+ '"-"'+ c+ ' " />';
        document.getElementById("demo").innerHTML += par;
    }
});

但请确保 web-request 的结果具有 text/xml 的 Content-Type 标头，否则将不会设置 resultXML。无论如何，您可能想查看文档：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

编辑：还修正了 Adrien Vinches 提到的拼写错误。

【讨论】：