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

JavaScript error with XML when trying to read empty node

本文关键字:XML JavaScript 错误 读取 节点      更新时间:2023-09-26

我正在尝试从 XML 文档呈现目录并且一切正常,尽管在尝试显示默认图像时,如果 XML 节点中不存在图像,它会禁用父节点,因此强制它不显示任何图像,并在控制台中向我读取错误说:

未捕获的类型错误: 无法读取属性"getElementsByTagName" 的 定义

它指向代码的这一部分:

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);

如果我们想象records的长度为 18,那么对于第二页,您将有:

fromItem - 12
nextMaxItem - 24

你正在迭代ifromItemnextMaxItem,但一旦你过去i = 18,你就已经过了records的终点。你需要确保这种情况不会发生。您需要确保不会迭代到数组的末尾:

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