Question

我有一个看起来像这样的test.html文件：

<!DOCTYPE html>
<html>
<body>
  <div class="outside">
    <div class="inside">
      FOO
    </div>
  </div>

  <div class="outside">
    <div class="inside">
      BAR
    </div>
  </div>
</body>
</html>

我可以简单地解析这个：

<script>
    var x = document.getElementsByClassName("outside");
    for (var i=0;i<x.length;i++)
    document.write(x[i].getElementsByClassName("inside")[0].childNodes[0].nodeValue);
</script>

获得我想要的结果：

FOO
BAR

但我想在另一个HTML文件中解析test.html的内容。我尝试过像这样使用XMLHttpRequest：

if (window.XMLHttpRequest) {
  xmlhttp=new XMLHttpRequest();
  }

xmlhttp.open("GET","test.html",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByClassName("outside");
for (var i=0;i<x.length;i++) 
document.write(x[i].getElementsByClassName("inside")[0].childNodes[0].nodeValue);

但是这给了我以下错误：

TypeError: null is not an object (evaluating 'xmlDoc.getElementsByClassName')

使用本地Web服务器上的所有文件，因此不应该存在任何访问问题。我知道这肯定不是最现代的解析方式，但它本来就是在本地用于业余爱好项目。但是，如果您对如何使用jQuery解决此问题有任何建议，我可以接受任何想法。

Answer 1

当文档不是HTML时，很难使用responseXML。

您需要使用responseText设置div的html并查询。

var str = "<ul><li>1</li><li>2</li>";  //xmlhttp.responseText;
var div = document.createElement("div");
div.innerHTML = str;
var lis = div.getElementsByTagName("li");
for (var i=0;i<lis.length; i++) {
    console.log(lis[i].textContent);
}

可以将getElementsByClassName与外部HTML文件一起使用吗？

1 个答案: