我想要:
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;
}
}
有好的替代品吗?
当前回答
如果你正在使用jQuery，试试这个
$('<div>').is('*') // true
$({tagName: 'a'}).is('*') // false
$({}).is('*') // false
$([]).is('*') // false
$(0).is('*') // false
$(NaN).is('*') // false
其他回答
每个DOMElement。构造函数返回函数HTML…元素)所以…
function isDOM(getElem){
if(getElem===null||typeof getElem==="undefined") return false;
var c = getElem.constructor.toString();
var html = c.search("HTML")!==-1;
var element = c.search("Element")!==-1;
return html&&element;
}
在Firefox中，您可以使用Node实例。该节点在DOM1中定义。
但在IE中就没那么容易了。
"instanceof ActiveXObject"只能说明它是一个本机对象。 “typeof document.body。appendChild=='object'"说明它可以是DOM对象，也可以是其他具有相同功能的对象。
如果有任何异常，只能使用DOM函数和catch来确保它是DOM元素。然而，它可能有副作用(例如改变对象内部状态/性能/内存泄漏)
也许这是另一种选择?在Opera 11, FireFox 6, Internet Explorer 8, Safari 5和谷歌Chrome 16中测试。
function isDOMNode(v) {
if ( v===null ) return false;
if ( typeof v!=='object' ) return false;
if ( !('nodeName' in v) ) return false;
var nn = v.nodeName;
try {
// DOM node property nodeName is readonly.
// Most browsers throws an error...
v.nodeName = 'is readonly?';
} catch (e) {
// ... indicating v is a DOM node ...
return true;
}
// ...but others silently ignore the attempt to set the nodeName.
if ( v.nodeName===nn ) return true;
// Property nodeName set (and reset) - v is not a DOM node.
v.nodeName = nn;
return false;
}
函数不会被例如这个所欺骗
isDOMNode( {'nodeName':'fake'} ); // returns false
对于那些使用Angular的:
angular.isElement
https://docs.angularjs.org/api/ng/function/angular.isElement
这是我想出来的:
var isHTMLElement = (function () {
if ("HTMLElement" in window) {
// Voilà. Quick and easy. And reliable.
return function (el) {return el instanceof HTMLElement;};
} else if ((document.createElement("a")).constructor) {
// We can access an element's constructor. So, this is not IE7
var ElementConstructors = {}, nodeName;
return function (el) {
return el && typeof el.nodeName === "string" &&
(el instanceof ((nodeName = el.nodeName.toLowerCase()) in ElementConstructors
? ElementConstructors[nodeName]
: (ElementConstructors[nodeName] = (document.createElement(nodeName)).constructor)))
}
} else {
// Not that reliable, but we don't seem to have another choice. Probably IE7
return function (el) {
return typeof el === "object" && el.nodeType === 1 && typeof el.nodeName === "string";
}
}
})();
为了提高性能，我创建了一个自调用函数，它只测试浏览器的功能一次，并相应地分配适当的函数。
第一个测试应该可以在大多数现代浏览器中工作，这里已经讨论过了。它只是测试元素是否是HTMLElement的实例。非常简单。
第二个是最有趣的一个。这是它的核心功能:
return el instanceof (document.createElement(el.nodeName)).constructor
它测试el是构造函数的实例还是它假装是实例。为此，我们需要访问元素的构造函数。这就是为什么我们在if-Statement中测试这个。例如，IE7就失败了，因为(document.createElement("a"))。构造函数在IE7中未定义。
The problem with this approach is that document.createElement is really not the fastest function and could easily slow down your application if you're testing a lot of elements with it. To solve this, I decided to cache the constructors. The object ElementConstructors has nodeNames as keys with its corresponding constructors as values. If a constructor is already cached, it uses it from the cache, otherwise it creates the Element, caches its constructor for future access and then tests against it.
第三个考验是令人不快的退路。它测试el是否是一个对象，是否有一个nodeType属性设置为1，是否有一个字符串作为nodeName。当然，这不是很可靠，但绝大多数用户甚至不应该倒退到这么远。
这是我想到的最可靠的方法，同时还能保持尽可能高的性能。
