javascript - getElementById 找不到结果

Question

我正在尝试通过所有标签的 id 解析 xml 文件。这是我的xml

    <?xml version="1.0" encoding="UTF-8"?>
    <zones>
    <bedroom id="0">
       <fan id="00">on</fan>
       <tv id="01">off</tv>
    </bedroom>
    <hall id="1">
    <tube id="10">on</tube>
    <bulb id="11">off</bulb>
    <fan id="12">on</fan>
    <tv id="13">on</tv>
    <ac id="14">on</ac>
    </hall>
    <kitchen id="2">
    <freez id="20">on</freez>
    </kitchen>
    <toilet id="3">
        <bulb id="30">on</bulb>
    </toilet>
    <bathroom id="4">
        <heater id="40">on</heater>
    </bathroom>
   </zones>

这是我的代码..

     <html>
     <head> <meta http-equiv="refresh" content="1" > </head>
     <body>

      <script type="text/javascript" for="window" event="onload">
       if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp=new XMLHttpRequest();
       }
        xmlhttp.open("GET","home.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML; 

        document.write("<table border='1'>");
        var x=xmlDoc.getElementById("0");
        for (i=0;i<x.length;i++)
        { 
            document.write("<tr><td>");
                document.write("fan");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);
               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);
               document.write("</td></tr>");
       }

       var x=xmlDoc.getElementsByTagName("hall");
       for (i=0;i<x.length;i++)
       { 
            document.write("<tr><td>");
                document.write("tube");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("tube")  [0].childNodes[0].nodeValue);

                document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");
                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("fan");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("fan")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("tv");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("tv")[0].childNodes[0].nodeValue);

               document.write("<tr><td>");
               document.write("ac");
               document.write("</td><td>");
               document.write(x[i].getElementsByTagName("ac")[0].childNodes[0].nodeValue);

               document.write("</td></tr>");
         }

         var x=xmlDoc.getElementsByTagName("kitchen");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("freez");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("freez") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("toilet");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("bulb");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("bulb") [0].childNodes[0].nodeValue);
         }

         var x=xmlDoc.getElementsByTagName("bathroom");
         for (i=0;i<x.length;i++)
         { 
            document.write("<tr><td>");
                document.write("heater");
                document.write("</td><td>");

                document.write(x[i].getElementsByTagName("heater") [0].childNodes[0].nodeValue);
         }

       document.write("</table>");

</script>
</body>
</html>

问题是当我用

var x=xmlDoc.getElementByTagName("bedroom");

一切正常。但是当我把它改成

var x=xmlDoc.getElementById("0");

浏览器中没有显示任何内容。所以请帮我解决这个问题，我坚持这一点。

score 4 · Accepted Answer

getElementById 返回具有“ID”类型属性的元素，而不是名称为“ID”的属性。如果没有与 XML 文件一起使用的 DTD，则没有具有已定义类型的属性，因此 getElementById 将始终返回 null。http://reference.sitepoint.com/javascript/Document/getElementById

W3Schools 很好地解释了如何使用 DTD。http://www.w3schools.com/dtd/default.asp

我建议如果你走这条路线，你可以考虑为你的 XML 元素使用更通用的名称，并使用属性来描述该元素所指的房间或设备（例如，而不是 <bedroom id="0">使用 <zone room="bedroom" id="0"> 或代替 <fan id="00"> 使用 <appliance name="fan" id="00">)，否则你的 DTD 会更大更难维护比它真正需要的。

score 3 · Accepted Answer

看起来你有三个错误：

在第 15 行，您正在使用：
```
var x=xmlDoc.getElementsById("0");
```
它应该是：
```
var x=xmlDoc.getElementById("0");
```
如果您还没有发现差异：

您正在使用getElementsById

当你应该使用getElementById()

这是 MDN 文档getElementById()
文件是在您的计算机上，还是在服务器上（包括家庭服务器（XAMPP、easyPHP 等））

XMLHttpRequest()仅当它位于 HTTP 服务器上时才有效。

我收到这些错误：

您可以安装以下之一：
我推荐使用 XAMPP 或 easyPHP，因为它们更容易设置。

然后将您的 XML 和 HTML 文件放入您的 htdocs 文件夹中。

最后，转到您的服务器并导航到您的 HTML 文件。

它适用于我的：

HTML 文件上的输出：
您将需要文件中的 DTD 以使其在某些浏览器中工作，或者您可以将id属性更改为xml:id. 它适用于大多数（也许是所有）现代浏览器。

更新： OP 已将代码从更改getElementsById()为getElementById().

score 2 · Accepted Answer

2

请使用 getElementById

不是 getElementsById

于 2012-04-09T10:08:46.187 回答

score 2 · Accepted Answer

var x=xmlDoc.getElementsById("0")

它应该是

var x=xmlDoc.getElementById("0")

不是getElementsbyId

score 0 · Accepted Answer

0

var x=xmlDoc.getElementById("0");

字母字符非常重要

于 2014-03-11T07:10:49.530 回答

javascript - getElementById 找不到结果

5 回答 5

Related

Reference