我想要:

document.createElement('div')  //=> true
{tagName: 'foobar something'}  //=> false

在我自己的脚本中,我曾经只使用这个,因为我从来不需要tagName作为属性:

if (!object.tagName) throw ...;

所以对于第二个目标,我想出了下面的快速解决方案——这基本上是有效的。;)

问题是,它依赖于浏览器强制执行只读属性,而并非所有浏览器都这样做。

function isDOM(obj) {
  var tag = obj.tagName;
  try {
    obj.tagName = '';  // Read-only for DOM, should throw exception
    obj.tagName = tag; // Restore for normal objects
    return false;
  } catch (e) {
    return true;
  }
}

有好的替代品吗?


当前回答

接受的答案有点复杂,并且没有检测到所有类型的HTML元素。例如,不支持SVG元素。相反,这个答案适用于HTML和SVG等。

在这里查看它的实际操作:https://jsfiddle.net/eLuhbu6r/

function isElement(element) {
    return element instanceof Element || element instanceof HTMLDocument;  
}

锦上添花:上面的代码与IE8兼容。

其他回答

测试变量是否是DOM元素的简单方法(冗长,但更传统的语法:-)

function isDomEntity(entity) {
  if(typeof entity  === 'object' && entity.nodeType !== undefined){
     return true;
  }
  else{
     return false;
  }
}

或者像HTMLGuy建议的那样(简洁的语法):

const isDomEntity = entity =>
  typeof entity === 'object' && entity.nodeType !== undefined

旧线程,但这里有一个更新的可能性为ie8和ff3.5用户:

function isHTMLElement(o) {
    return (o.constructor.toString().search(/\object HTML.+Element/) > -1);
}

我使用这个函数:

函数isHTMLDOMElement(obj) { if (Object.prototype.toString.call(obj).slice(-8) === 'Element]') { 如果(Object.prototype.toString.call (obj)。slice(0,12) === '[object HTML') { 返回true; } 返回错误; } 返回错误; }

https://jsfiddle.net/1qazxsw2/wz7e0fvj/9/

确保你检查的是一个实际的HTMLEement,而不是一个与HTML Element具有相同属性的对象,唯一的方法是确定它是否继承自Node,因为它不可能在JavaScript中创建一个新的Node()。(除非原生Node函数被覆盖,否则就不走运了)。所以:

function isHTML(obj) { return obj instanceof Node; } console.log( isHTML(test), isHTML(ok), isHTML(p), isHTML(o), isHTML({ constructor: { name: "HTML" } }), isHTML({ __proto__: { __proto__: { __proto__: { __proto__: { constructor: { constructor: { name: "Function" }, name: "Node" } } } } } }), ) <div id=test></div> <blockquote id="ok"></blockquote> <p id=p></p> <br id=o> <!--think of anything else you want--!>

上面和下面的所有解决方案(包括我的解决方案)都有可能是不正确的,特别是在IE上——(重新)定义一些对象/方法/属性来模拟DOM节点,使测试无效是很可能的。

所以我通常使用duck-typing风格的测试:我专门测试我使用的东西。例如,如果我想克隆一个节点,我这样测试它:

if(typeof node == "object" && "nodeType" in node &&
   node.nodeType === 1 && node.cloneNode){
  // most probably this is a DOM node, we can clone it safely
  clonedNode = node.cloneNode(false);
}

基本上,它是一个小的完整性检查+对我计划使用的方法(或属性)的直接测试。

顺便说一句,上面的测试对于所有浏览器上的DOM节点来说都是一个很好的测试。但是如果您想要安全起见,请始终检查方法和属性的存在并验证它们的类型。

编辑:IE使用ActiveX对象来表示节点,因此它们的属性行为不像真正的JavaScript对象,例如:

console.log(typeof node.cloneNode);              // object
console.log(node.cloneNode instanceof Function); // false

而它应该分别返回“function”和true。测试方法的唯一方法是查看是否定义了方法。