当前位置：文江博客话题详情

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

发布于 2024-09-24 08:32:06 字数 30 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮凉 2024-10-01 08:32:06

这取决于空变量的含义。

如果您的意思是它还没有分配值，您可以检查 undefined

alert( someVariable !== "undefined" );

或者如果您知道它有一个值，并且需要查看它是否是一个元素，您可以执行以下操作：

alert( someVariable && someVariable.nodeType );

或者，如果您需要验证它是否是类型 1 元素，您可以这样做：

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

这消除了文本节点、属性节点、注释和其他一些。

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.

回复收藏 0 原文

煮酒 2024-10-01 08:32:06

一个节点？ DOM 元素？它有一个 .nodeType 属性。

关于另一个答案的nodeValue，nodeValue可以为空，但节点总是有一个nodeType。

回复收藏 0 原文

感性不性感 2024-10-01 08:32:06

使用 HTML 元素并查看 Chrome 开发工具中的“属性”选项卡
我们可以看到后代：

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

现在我们不希望无论如何都要检查前两个，太多不同的可能性
这样我们就只剩下 HTMLElement 或 Element。那么有什么区别呢？

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

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

现在，来自典型文档的一些负面结果如下：

<!DOCTYPE html>     DocumentType->Node->EventTarget->Object
<!-- COMMENT -->    Comment->CharacterData->Node->EventTarget->Object

因此，节点是共同点，但问题是如何检查有效的 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

让我们检查原型还是 __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

好吧，所以使用节点已经无法使用了。让我们转到构造函数。

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

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"

回复收藏 0 原文

~没有更多了~