Menu
How can I change a JS element to see if it is a node or an empty variable?
828
The Node.contains() method checks if an element is inside another, and returns a boolean: true if it is, and false if it's not. Call it on the parent element, and pass the element you want to check for in as an argument.
In a JavaScript program, the correct way to check if an object property is undefined is to use the typeof operator. If the value is not defined, typeof returns the 'undefined' string.
Use the tagName property to check if an element is a div, e.g. if (div. tagName === 'DIV') {} .
The typeof operator will check whether a variable is defined or not. The typeof operator doesn't throw a ReferenceError exception when it is used with an undeclared variable. The typeof null will return an object. So, check for null also.
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.
60
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
