Question

如何更改JS元素以查看它是节点还是空变量？

Answer 1

这取决于空变量的含义。

如果您的意思是未分配值，则可以检查undefined

alert( someVariable !== "undefined" );

或者如果你知道它有一个值，并且需要查看它是否是一个元素，你可以这样做：

alert( someVariable && someVariable.nodeType );

或者，如果您需要验证它是类型1元素，您可以这样做：

alert( someVariable && someVariable.nodeType === Node.ELEMENT_NODE );

这消除了文本节点，属性节点，注释和a bunch of others。

Answer 2

一个节点？一个DOM元素？它将具有.nodeType属性。

关于另一个答案的nodeValue，nodeValue 可以为空，但总是的节点有nodeType。

Answer 3

使用HTML元素并查看Chrome开发工具中的“属性”标签我们可以看到后代：

的 HTML-＆GT; HTMLHtmlElement-＆GT; HTMLElement-＆GT;元素 - ＆GT;节点 - ＆GT; EventTarget-＆GT;对象 的

现在我们不想检查前两个，无论什么，太多不同的可能性所以给我们留下HTMLElement或Element。那有什么区别？

HTML，HEAD，SCRIPT，META，BODY，DIV，P和UL都具有相同的继承：

的 HTMLElement-＆GT;元素 - ＆GT;节点 - ＆GT; EventTarget-＆GT;对象 的

现在来自典型文档的一些负面结果：

<!DOCTYPE html> DocumentType->Node->EventTarget->Object  Comment->CharacterData->Node->EventTarget->Object

所以Node是常见的分母，但问题是如何检查有效的DOM节点，它是如何检查有效的DOM节点元素。所以HTMLElement的任何对象都返回true，否则返回false。

好了，现在使用Chrome开发工具可以查看HTML元素：

$obj.nodeType; //1 No help what so ever $obj.nodeName; //HTML Gives use the tag names $obj.nodeValue; //null Waste of DOM space

让我们检查原型或__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

好的，所以使用节点已经死了。让我们转移到构造函数。

$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

现在让我们用一个干净有效的实用函数来包装。

//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}};

试验：

$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"

检查变量是否是有效的节点元素

3 个答案: