Fatal编程技术网
  • javascript/
  • Javascript 检查变量是否为有效的节点元素

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

javascript

Javascript 检查变量是否为有效的节点元素,javascript,dom-node,Javascript,Dom Node,如何更改JS元素以确定它是节点还是空变量？这取决于空变量的含义 如果您的意思是它没有指定值，您可以检查未定义的 alert( someVariable !== "undefined" ); 或者，如果您知道它有一个值，并且需要查看它是否是一个元素，则可以执行以下操作： alert( someVariable && someVariable.nodeType ); 或者，如果需要验证它是否为类型1元素，可以执行以下操作： alert( someVariable &&

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

这取决于空变量的含义

如果您的意思是它没有指定值，您可以检查
未定义的

alert( someVariable !== "undefined" );
或者，如果您知道它有一个值，并且需要查看它是否是一个元素，则可以执行以下操作：

alert( someVariable && someVariable.nodeType );
或者，如果需要验证它是否为类型1元素，可以执行以下操作：

alert( someVariable && someVariable.nodeType === Node.ELEMENT_NODE );
这将消除文本节点、属性节点、注释和。

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

关于另一个答案的
nodeValue
，nodeValue可以是空的，但是使用HTML元素并查看Chrome开发工具中的属性选项卡，节点将始终具有
nodeType

我们可以看到后代：

html->HTMLHtmlElement->HTMLElement->Element->Node->EventTarget->Object

现在我们不想检查前2个，不管怎样，有太多不同的可能性 这就给我们留下了HTMLElement或Element。那么有什么区别呢

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

HTMLElement->Element->Node->EventTarget->Object

下面是一份典型文件的一些负面结果，其中：

让我们检查一下原型还是原型

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

$html=get（'html'）[0]//[​…​​]
iElement（$html）；/“HTMLElement”
isElement（$html.dataset）；//false
iElement（$html.firstChild）；/“HTMLElement”
isElement（$html.textContent）；//false
$tail=gei（“tail”）//​…​​
iElement（$tail）；/“HTMLElement”
iElement（get（'title'）[0]）；/“HTMLElement”
节点值可以为空/空/null，否？
！！（document.createElement（'p'））.nodeValue
只要它不是其他具有属性
nodeType
的对象。不过，可能性很小。meder指出，总是存在一个nodeType，这是正确的。这是我检查的第一件事，值为1。标准将nodeType 1定义为“元素表示元素元素、文本、注释、ProcessingInstruction、CDATA节、EntityReference”。问题是针对“元素”而不是文本、注释等。因此，我的isElement（）函数是正确的方法？还是我错了？相关： 
//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"