Проверьте, является ли переменная допустимым элементом узла - PullRequest
Новая
       16

Проверьте, является ли переменная допустимым элементом узла

11 голосов
/ 23 сентября 2010

Как я могу изменить элемент JS, чтобы увидеть, является ли он узлом или пустой переменной?

Ответы [ 3 ]

19 голосов
/ 23 сентября 2010

Это зависит от того, что вы подразумеваете под пустой переменной.

Если вы имеете в виду, что ему не было присвоено значение, вы можете проверить на undefined

alert( someVariable !== "undefined" );

Или есливы знаете, что у него есть значение, и вам нужно посмотреть, является ли он элементом, вы можете сделать что-то вроде этого: 

alert( someVariable && someVariable.nodeType );

Или, если вам нужно убедиться, что это элемент типа 1, вы можете сделатьthis: 

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

Это исключает текстовые узлы, узлы атрибутов, комментарии и кучу других .

5 голосов
/ 22 февраля 2014

Использование элемента HTML и просмотр вкладки «Свойства» в Chrome Dev Tools мы можем видеть потомков:

html-> HTMLHtmlElement-> HTMLElement-> элемент-> node-> EventTarget-> Object

Теперь мы не хотим проверять первые 2, несмотря ни на что, слишком много разных возможностей так что оставьте нас с HTMLElement или Element. Так в чем же разница?

HTML, HEAD, SCRIPT, META, BODY, DIV, P и UL имеют одинаковое наследование:

HTMLElement-> элемент-> node-> EventTarget-> Object

Теперь несколько негативных результатов из типичного документа, где: 

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

Итак, Node является общим знаменателем, но вопрос в том, как проверить действительный узел 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">​…​</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"
5 голосов
/ 23 сентября 2010

узел? Элемент DOM? у него будет свойство .nodeType.

Что касается nodeValue для другого ответа, nodeValue может быть пустым, но узел будет всегда иметь nodeType.

...