16

JS 要素を変更して、それがノードであるか空の変数であるかを確認するにはどうすればよいですか?

4

3 に答える 3

29

空の変数の意味によって異なります。

値が割り当てられていないことを意味する場合は、確認できますundefined

alert( someVariable !== "undefined" );

または、値があることがわかっていて、それが要素かどうかを確認する必要がある場合は、次のようにすることができます。

alert( someVariable && someVariable.nodeType );

または、それがタイプ 1 要素であることを確認する必要がある場合は、次のようにすることができます。

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

これにより、テキスト ノード、属性ノード、コメント、その他多数のノードが削除されます。

于 2010-09-23T17:44:54.367 に答える
7

HTML 要素を使用し、Chrome 開発ツールの [プロパティ] タブを見ると、子孫を確認できます。

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

ここで、最初の 2 つは何があってもチェックしたくありません。あまりにも多くの異なる可能性があるため、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 Dev Tools を使用して 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">​…​&lt;/html>​]
isElement($html);               //"HTMLElement"
isElement($html.dataset);       //false
isElement($html.firstChild);    //"HTMLElement"
isElement($html.textContent);   //false

$tail=gei('tail');              //<tail id=​"tail">​…​&lt;/tail>​
isElement($tail);               //"HTMLElement"

isElement(get('title')[0]);     //"HTMLElement"
于 2014-02-22T03:15:22.407 に答える
6

ノード？DOM要素？プロパティを持つことになり.nodeTypeます。

他の答えに関してnodeValueは、 nodeValueは空にすることができますが、ノードには常にnodeType.

于 2010-09-23T17:44:58.527 に答える