Check if variable is a valid node element
How can I change a JS element开发者_StackOverflow中文版 to see if it is a node or an empty variable?
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
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:
alert( someVariable && someVariable.nodeType === Node.ELEMENT_NODE );
This eliminates text nodes, attribute nodes, comments, and a bunch of others.
A node? A DOM element? it would have a .nodeType property.
Regarding nodeValue for the other answer, the nodeValue can be empty but a node will always have a nodeType.
Using the HTML Element and taking a look at the Properties tab in Chrome Dev Tools we can see the descendants:
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?
HTML, HEAD, SCRIPT, META, BODY, DIV, P and UL all have the same inheritance:
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.
Ok now using the Chrome Dev Tools lets look at the HTML Element:
$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?
$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"
加载中,请稍侯......
精彩评论