javascript 检查变量是否是有效的节点元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3781096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if variable is a valid node element
提问by Webnet
How can I change a JS element to see if it is a node or an empty variable?
如何更改 JS 元素以查看它是节点还是空变量？
回答by user113716
It depends on what you mean by an empty variable.
这取决于您所说的空变量是什么意思。
If you mean it hasn't had a value assigned, you can check for undefined
如果你的意思是它没有分配一个值，你可以检查 undefined
alert( someVariable !== "undefined" );
Or if you know it has a value, and need to see if it is an element, you could do something like this:
或者，如果您知道它有一个值，并且需要查看它是否是一个元素，则可以执行以下操作：
alert( someVariable && someVariable.nodeType );
Or if you need to verify that it is a type 1 element, you could do this:
或者，如果您需要验证它是类型 1 元素，您可以这样做：
alert( someVariable && someVariable.nodeType === Node.ELEMENT_NODE );
This eliminates text nodes, attribute nodes, comments, and a bunch of others.
这消除了文本节点、属性节点、注释和其他一堆。
回答by meder omuraliev
A node? A DOM element? it would have a .nodeTypeproperty.
一个节点？一个 DOM 元素？它会有一个.nodeType属性。
Regarding nodeValuefor the other answer, the nodeValue canbe empty but a node will alwayshave a nodeType.
关于nodeValue另一个答案， nodeValue可以为空，但节点将始终具有nodeType.
回答by NlaakALD
Using the HTML Element and taking a look at the Properties tab in Chrome Dev Tools we can see the descendants:
使用 HTML 元素并查看 Chrome Dev Tools 中的 Properties 选项卡，我们可以看到后代：
html->HTMLHtmlElement->HTMLElement->Element->Node->EventTarget->Object
html->HTMLHtmlElement->HTMLElement->Element->Node->EventTarget->Object
Now we do not want to check the first 2 no matter what, too many different possibilities so that leave us with HTMLElement or Element. So what is the difference?
现在我们无论如何都不想检查前两个，因为有太多不同的可能性，所以我们只剩下 HTMLElement 或 Element。那么区别是什么呢？
HTML, HEAD, SCRIPT, META, BODY, DIV, P and UL all have the same inheritance:
HTML、HEAD、SCRIPT、META、BODY、DIV、P 和 UL 都有相同的继承：
HTMLElement->Element->Node->EventTarget->Object
HTMLElement->Element->Node->EventTarget->Object
Now a few negative results from a typical document where:
现在来自典型文档的一些负面结果，其中：
<!DOCTYPE html> DocumentType->Node->EventTarget->Object
<!-- COMMENT --> Comment->CharacterData->Node->EventTarget->Object
So Node is the common denominator, but the question is to how to check for a Valid DOM Node it is how to check for a valid DOM Node Element. So any object with HTMLElement to return true, otherwise return false.
所以 Node 是共同点，但问题是如何检查一个有效的 DOM 节点，它是如何检查一个有效的 DOM 节点元素。所以任何带有 HTMLElement 的对象返回 true，否则返回 false。
Ok now using the Chrome Dev Tools lets look at the HTML Element:
好的，现在使用 Chrome Dev Tools 让我们看看 HTML 元素：
$obj.nodeType; //1 No help what so ever
$obj.nodeName; //HTML Gives use the tag names
$obj.nodeValue; //null Waste of DOM space
let's check the prototype or __proto?
让我们检查原型或__proto？
$obj.prototype.nodeType; //TypeError
$obj.prototype.nodeName; //TypeError
$obj.prototype.nodeValue; //TypeError
$obj.__proto__.nodeType; //undefined
$obj.__proto__.nodeName; //undefined
$obj.__proto__.nodeValue; //undefined
Ok so using node is dead to use. Lets move to the constructor.
好的，所以使用节点已经死了。让我们转到构造函数。
$obj.constructor.name
//"HTMLHtmlElement" promising...
$obj.constructor.__proto__.prototype.toString()
//[object Object]
$obj.constructor.__proto__.constructor.name
Function
$obj.constructor.__proto__.prototype.constructor.name
HTMLElement
//BINGO
Now lets wrap in in a nice clean efficient utility function.
现在让我们用一个干净、高效的实用函数来包装。
//readable version
isElement=function($obj){
try {
return ($obj.constructor.__proto__.prototype.constructor.name)?true:false;
}catch(e){
return false;
}
}
/**
* PRODUCTION
* Return true if object parameter is a DOM Element and false otherwise.
*
* @param {object} Object to test
* @return {boolean}
*/
isElement=function(a){try{return a.constructor.__proto__.prototype.constructor.name?!0:!1}catch(b){return!1}};
Tests:
测试：
$html=get('html')[0]; //[<html data-role=?"webpage" data-theme=?"dark" data-require=?"fa" data-hello=?"world">?…?</html>?]
isElement($html); //"HTMLElement"
isElement($html.dataset); //false
isElement($html.firstChild); //"HTMLElement"
isElement($html.textContent); //false
$tail=gei('tail'); //<tail id=?"tail">?…?</tail>?
isElement($tail); //"HTMLElement"
isElement(get('title')[0]); //"HTMLElement"
