我想要:
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;
}
}
有好的替代品吗?
当前回答
var isElement = function(e){
try{
// if e is an element attached to the DOM, we trace its lineage and use native functions to confirm its pedigree
var a = [e], t, s, l = 0, h = document.getElementsByTagName('HEAD')[0], ht = document.getElementsByTagName('HTML')[0];
while(l!=document.body&&l!=h&&l.parentNode) l = a[a.push(l.parentNode)-1];
t = a[a.length-1];
s = document.createElement('SCRIPT'); // safe to place anywhere and it won't show up
while(a.length>1){ // assume the top node is an element for now...
var p = a.pop(),n = a[a.length-1];
p.insertBefore(s,n);
}
if(s.parentNode)s.parentNode.removeChild(s);
if(t!=document.body&&t!=h&&t!=ht)
// the top node is not attached to the document, so we don't have to worry about it resetting any dynamic media
// test the top node
document.createElement('DIV').appendChild(t).parentNode.removeChild(t);
return e;
}
catch(e){}
return null;
}
I tested this on Firefox, Safari, Chrome, Opera and IE9. I couldn't find a way to hack it. In theory, it tests every ancestor of the proposed element, as well as the element itself, by inserting a script tag before it. If its first ancestor traces back to a known element, such as <html>, <head> or <body>, and it hasn't thrown an error along the way, we have an element. If the first ancestor is not attached to the document, we create an element and attempt to place the proposed element inside of it, (and then remove it from the new element). So it either traces back to a known element, successfully attaches to a known element or fails. It returns the element or null if it is not an element.
其他回答
接受的答案有点复杂，并且没有检测到所有类型的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
测试obj是否继承自Node。
if (obj instanceof Node){
// obj is a DOM Object
}
Node是HTMLElement和Text继承的一个基本接口。
你可能会感兴趣:
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrome)
return obj instanceof HTMLElement;
}
catch(e){
//Browsers not supporting W3 DOM2 don't have HTMLElement and
//an exception is thrown and we end up here. Testing some
//properties that all elements have (works on IE7)
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
它是DOM的一部分，第2层。
更新2:这是我如何在我自己的库中实现它: (之前的代码在Chrome中不起作用，因为Node和HTMLElement是函数而不是预期的对象。这段代码在FF3, IE7, Chrome 1和Opera 9中进行了测试。
//Returns true if it is a DOM node
function isNode(o){
return (
typeof Node === "object" ? o instanceof Node :
o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string"
);
}
//Returns true if it is a DOM element
function isElement(o){
return (
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}
对于那些使用Angular的:
angular.isElement
https://docs.angularjs.org/api/ng/function/angular.isElement
