我想要:
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;
}
}
有好的替代品吗?
当前回答
您可以查看所讨论的对象或节点是否返回字符串类型。
typeof (array).innerHTML === "string" => false
typeof (object).innerHTML === "string" => false
typeof (number).innerHTML === "string" => false
typeof (text).innerHTML === "string" => false
//any DOM element will test as true
typeof (HTML object).innerHTML === "string" => true
typeof (document.createElement('anything')).innerHTML === "string" => true
其他回答
这里有一个使用jQuery的技巧
var obj = {};
var element = document.getElementById('myId'); // or simply $("#myId")
$(obj).html() == undefined // true
$(element).html() == undefined // false
把它放到一个函数里
function isElement(obj){
return (typeOf obj === 'object' && !($(obj).html() == undefined));
}
不是为了强调这一点，而是为了兼容es5的浏览器，为什么不直接:
function isDOM(e) {
return (/HTML(?:.*)Element/).test(Object.prototype.toString.call(e).slice(8, -1));
}
不会工作在文本节点和不确定的影子DOM或DocumentFragments等，但将工作在几乎所有的HTML标签元素。
区分一个原始js对象和一个HTMLElement
function isDOM (x){
return /HTML/.test( {}.toString.call(x) );
}
使用:
isDOM( {a:1} ) // false
isDOM( document.body ) // true
/ /或
Object.defineProperty(Object.prototype, "is",
{
value: function (x) {
return {}.toString.call(this).indexOf(x) >= 0;
}
});
use:
o = {};o.is("HTML") // false o = document.body;o.is("HTML") // 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.
您可以查看所讨论的对象或节点是否返回字符串类型。
typeof (array).innerHTML === "string" => false
typeof (object).innerHTML === "string" => false
typeof (number).innerHTML === "string" => false
typeof (text).innerHTML === "string" => false
//any DOM element will test as true
typeof (HTML object).innerHTML === "string" => true
typeof (document.createElement('anything')).innerHTML === "string" => true
