Check if variable is a valid node element

问题

How can I change a JS element to see if it is a node or an empty variable?

回答1:

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.

回答2:

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.

回答3:

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"

来源：https://stackoverflow.com/questions/3781096/check-if-variable-is-a-valid-node-element

标签

javascript

dom-node