javascript - 检查 DIV 的内容是否只是图像

Question

我有一个 div，最初包含一个加载器图像标签。

  <img src="/images/indicator_big.gif" style="display:block;margin:auto">

我想检查 DIV 是否仅包含加载器图像，然后该函数应该触发 Ajax 请求。

如果我做一些事情，比如div.innerHTML我把它当作一个字符串。

测试 innerHTML 是否只是加载器图像的最佳方法是什么？

Answer 1

您可以检查元素中有多少元素

var children = document.querySelector("#yourDiv > *");
if (children.length == 1 && children[0].tagName.toLowerCase() == "img") {
    //you only have one child in here, and that's an image
}

如果它只包含您的初始图像，它将为 1。

但请注意浏览器支持：http ://www.quirksmode.org/dom/w3c_core.html#t13

Answer 2

这种方法会按照您的要求进行，尽管我不确定一般方法是否是最好的。

function hasOnlyImg(div) {
  if (div.children.length != 1)
    return false;
  return div.children[0].tagName == "IMG";
}

Answer 3

我假设该加载程序图像的“style.display”会改变？你可以检查一下吗？

function checkDiv(div,func) {
    var thisDiv = div;
    var imgLink = thisDiv.getElementsByTagName("img");
    if (imgLink.length == 1 && imgLink[0].style.display !== "block") {
        func();
    }
}
checkDiv(document.getElementById("mydiv"),function() {
    //call ajax code
});

或者，如果您仍想检查 div 中 HTML 标记的数量，只需执行以下操作：

var allDivTags = mydiv.getElementsByTagName("*");
if (allDivTags.length == 1 && allDivTags.nodeName.toLowerCase() == "img") {
    //only 1 html element exists in the div, and it's an image.
    //run code
}

希望这可以帮助。