javascript - jQuery - 检查变量是否为 dom 元素

Question

有什么方法可以检查给定变量是非空 jQuery 对象还是原生 DOM 元素？

就是这样

isDomElem( $("#some-existing-element") ); //returns true
isDomElem( $("#some-existing-element")[0] ); //returns true
isDomElem( $("#non-existing-element")[0] ); //returns false
isDomElem( "#some-existing-element" ); //returns false
isDomElem( [0,1,2] ); //returns false
//etc... 

Answer 1

您可以使用 instanceof检查传入的对象是 instanceof jQuery 还是 instanceof HTMLElement。如果是返回true;。否则，返回 false。

function isDomElem(obj) {
      if(obj instanceof HTMLCollection && obj.length) {
          for(var a = 0, len = obj.length; a < len; a++) {
              if(!checkInstance(obj[a])) {
                  console.log(a);
                  return false;   
              }
          }     
          return true;                
      } else {
          return checkInstance(obj);  
      }

      function checkInstance(elem) {
          if((elem instanceof jQuery && elem.length) || elem instanceof HTMLElement) {
              return true;  
          }
          return false;        
      }
}

可选地，您可以执行一些其他操作，而不是返回 true 或 false。您还可以将每个选项分开并执行单独的操作，具体取决于对象是 jQuery 还是 HTMLElement 的实例。您有很多选择。

$(function () {
  var temp1 = $('div'),
      temp2 = $('div')[0],
      temp3 = "foo",
      temp4 = ['bar'],
      temp5 = $('span'),
      temp6 = document.getElementsByClassName("test");
  
  alert(isDomElem(temp1));
  alert(isDomElem(temp2));
  alert(isDomElem(temp3));
  alert(isDomElem(temp4));
  alert(isDomElem(temp5));
  alert(isDomElem(temp6));
  
  function isDomElem(obj) {
    
      if(obj instanceof HTMLCollection && obj.length) {
        
        for(var a = 0, len = obj.length; a < len; a++) {
            if(!checkInstance(obj[a])) {
                return false;   
            }
        }
               
        return true;
               
      } else {
          return checkInstance(obj);  
      }
        
      function checkInstance(elem) {
          if((elem instanceof jQuery && elem.length) || elem instanceof HTMLElement) {
              return true;  
          }
          return false;        
      }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p class="test"></p>
<p class="test"></p>

编辑:

@RickHitchcock 关于函数返回没有匹配元素的 jQuery 实例提出了一个非常有效的观点。出于这个原因，我更新了函数，不仅考虑对象是否是 jQuery 实例，而且考虑对象是否有长度，指示是否找到 DOM 元素。

编辑:

根据 @AdamPietrasiak 下面关于返回 false 的 HTMLCollections 实例的评论进行了额外的编辑。在这种情况下，如果传入的 obj 是 HTMLCollection 的实例，则每个元素都会传递给内部的 checkInstance 函数。任何不是 DOM 节点的元素都会触发函数抛出整体 false 而不管列表中是否有元素(即对于 HTMLCollection 的实例，函数会处理它作为全有或全无)。