使用JavaScript过滤DOM中的XML数据

Question

我有一个正在尝试学习JavaScript的简单项目。 我能够使用JavaScript将数据调用到html文档中。 接下来，我想使用搜索功能过滤该列表。 但是，我在JavaScript文件的第38行收到错误。

if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {

我不明白为什么类型是不确定的。 我确实发现这意味着它尚未分配值。 如果我误解了所读内容，请纠正我。 不确定接下来要去哪里。 任何帮助将不胜感激。 我不是一个只想学习的菜鸟的上师。

的HTML

<!html doctype>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2>XMLHttpRequest</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search 
for names.."/>
<div id="output"></div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>

的JavaScript

function init(){

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function (){
        if (this.readyState ==4 && this.status == 200){
            console.log(this.responseXML);
            var schools = this.responseXML.getElementsByTagName("school");
            var strOut = "<ul id='myUL'>";
            for(i=0; i<schools.length; i++){
                var name = schools[i].getElementsByTagName("name") 
[0].innerHTML;
                var web = schools[i].getElementsByTagName("web") 
[0].innerHTML;
                strOut += "<li><ahref='"+web;
                strOut += "' target='_blank'>" + name + "</a></li>";
        }
        strOut += "</ul>";
        document.getElementById("output").innerHTML = strOut;
    }

};

xhttp.open('get', 'myXML.xml', true);
xhttp.send();
}
window.onload = init;

//Filter List
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search 
query
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("li")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}

XML格式

<?xml version="1.0" encoding="UTF-8"?>
<sites>
    <school>
        <name>Middle Georgia State University</name>
        <web>http://www.mga.edu</web>
    </school>
    <school>
        <name>Columbus State University</name>
        <web>http://www.columbusstate.edu</web>
    </school>
    <school>
        <name>University of Georgia</name>
        <web>http://www.uga.edu</web>
    </school>
</sites>

Answer 1

由于您已经在代码的下面一行中提取了一个li标签数组：

li = ul.getElementsByTagName('li');

因此，无需在for循环内再次使用“ getElementsByTagName”函数，而只需使用以下数组索引即可访问li元素：

a = li[i];

另外，如果条件使用innerText函数，则不要使用innerHTML函数，因为innerHTML将返回li元素内部的完整锚标记，而innerText仅返回li元素中的学校名称。

完成此操作后，您的for循环将如下所示：

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
    a = li[i];
    if (a.innerText.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}

Answer 2

您有两种错别字：
1. strOut += "<li><ahref='"+web; 应该是strOut += "<li><a href='"+web;
2. a = li[i].getElementsByTagName("li")[0]; 应该是a = li[i].getElementsByTagName("a")[0];

使用JavaScript过滤DOM中的XML数据

问题描述

2 个解决方案

解决方案1
0 2018-08-09 17:26:00

解决方案2
-1 已采纳 2018-08-09 17:04:49

使用JavaScript过滤DOM中的XML数据

问题描述

2 个解决方案

解决方案1 0 2018-08-09 17:26:00

解决方案2 -1 已采纳 2018-08-09 17:04:49

解决方案1
0 2018-08-09 17:26:00

解决方案2
-1 已采纳 2018-08-09 17:04:49