代码之家 › 专栏 › 技术社区 › Ben

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

dom-node javascript

Ben · 技术社区 · 14 年前

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

3 回复 | 直到 14 年前

Dave Jarvis James Eichele 7 年前

undefined

alert( someVariable !== "undefined" );

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

alert( someVariable && someVariable.nodeType );

或者,如果需要验证它是否为类型1元素,可以执行以下操作:

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

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

NlaakALD 11 年前

使用HTML元素并查看chromedev工具中的Properties选项卡我们可以看到后代:

html->HTMLHtmlElement->HTMLElement->元素->节点->事件目标->对象

现在我们不想检查前2个无论什么,太多不同的可能性

HTML、HEAD、SCRIPT、META、BODY、DIV、P和UL都具有相同的继承性:

HTMLElement->元素->节点->事件目标->对象

下面是一个典型文档的一些负面结果,其中:

<!DOCTYPE html>     DocumentType->Node->EventTarget->Object
<!-- COMMENT -->    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

我们来看看原型机还是原型机?

$obj.prototype.nodeType;    //TypeError
$obj.prototype.nodeName;    //TypeError
$obj.prototype.nodeValue;   //TypeError

$obj.__proto__.nodeType;    //undefined
$obj.__proto__.nodeName;    //undefined
$obj.__proto__.nodeValue;   //undefined

好的,所以使用node是死的。让我们转到构造函数。

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

meder omuraliev 14 年前

一个节点?DOM元素?它会有一个 .nodeType

关于 nodeValue 可以为空,但节点将总是有一个 nodeType .