尝试读取空节点时，JavaScript 出现 XML 错误

Question

我正在尝试从 XML 文档渲染目录，并且一切正常，尽管当尝试显示默认图像时，如果 XML 节点中没有图像，它会禁用父节点，因此强制它不显示任何它在我的控制台中读到一个错误:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined

它指向这部分代码:

if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

所以我的问题是下面的代码中的哪里是我的错误导致它无法加载 XML 节点？

PS:如果有人需要更多我的代码，请告诉我，我很乐意发布。

for (var i = fromItem; i < nextMaxItem; i++) {
            if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

                xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                    + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                    + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
                    + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
                    + '<div class="caption">'
                    + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                    + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                    + '</div>'
                    + "</a></div></div></article>";

            } else {

                xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                    + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                    + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
                    + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
                    + '<div class="caption">'
                    + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                    + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                    + '</div>'
                    + "</a></div></div></article>";

            }

        }

这是完整的 JavaScript 代码:

var page = 1, perPage = 12, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;

function paganation(page) {
    var nextMaxItem = perPage * page,
        fromItem = (page - 1) * perPage,
        maxPages = Math.ceil(records.length / perPage);

    var xmlContent = '<div class="row">';
    for (var i = fromItem; i < nextMaxItem; i++) {
        if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {

            xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
                + '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
                + '<div class="caption">'
                + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                + '</div>'
                + "</a></div></div></article>";

        } else {

            xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
                + '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
                + '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
                + '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
                + '<div class="caption">'
                + '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
                + '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
                + '</div>'
                + "</a></div></div></article>";

        }

    }
    xmlContent += "</div>";
    content.innerHTML = xmlContent;

    var paginationContent = '<nav><ul class="pagination">';
    if (page > 1) {

        paginationContent += '<li>';
        paginationContent += '<a href="javascript:paganation(' + (page - 1) + ');" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
        paginationContent += '</li>';

    } else {

        paginationContent += '<li class="disabled">';
        paginationContent += '<a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>';
        paginationContent += '</li>'

    }



    var prevPosition = page - 3;
    var nextPosition = page + 3;

    for (var i = 1; i <= maxPages; i++) {
        if (i != page) {
            if (i >= prevPosition && i <= nextPosition) {

                var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i;
                var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i;

                paginationContent += "<li>";
                paginationContent += '<a href="javascript:paganation(' + linkToPage + ');">' + linkText + '</a>';
                paginationContent += "</li>";

            }
        } else {

            paginationContent += "<li class='active'>";
            paginationContent += '<a href="javascript:paganation(' + i + ');">' + i + '</a>';
            paginationContent += "</li>";

        }
    }

    var next = page + 1;
    if (next <= maxPages) {

        paginationContent += '<li>';
        paginationContent += '<a href="javascript:paganation(' + next + ');" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
        paginationContent += '</li>';

    } else {

        paginationContent += '<li class="disabled">';
        paginationContent += '<a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>';
        paginationContent += '</li>';

    }

    paginationContent += '</ul></nav>';
    pagination.innerHTML = paginationContent;
}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

    xmlhttp = new XMLHttpRequest();

}
else {// code for IE6, IE5

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET", xmlUrl, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName(xmlNode);

records = Array.prototype.slice.call(records).sort(function () {
    return Math.random() > 0.5 ? 1 : -1
});

paganation(1);

Answer 1

如果我们假设 records 的长度为 18，那么对于第二页，您将拥有:

fromItem - 12
nextMaxItem - 24

您正在从 fromItem 迭代 i 到 nextMaxItem，但一旦超过 i = 18 ，您已经超出了记录的末尾。您需要确保不会发生这种情况。您需要确保迭代不会超出数组的末尾:

var max = Math.min(nextMaxItem, records.length);
for (var i = fromItem; i < max; i++) {
    ....
}