10
Wie kann ich ein JS-Element ändern, um zu sehen, ob es sich um einen Knoten oder eine leere Variable handelt?Überprüfen, ob die Variable ein gültiges Knotenelement ist
A
Antwort
17
Es hängt davon ab, was Sie mit einer leeren Variable meinen.
Wenn Sie meinen, es kein Wert zugewiesen hatte, können Sie überprüfen undefined
alert(someVariable !== "undefined");
Oder wenn Sie wissen, dass es einen Wert hat, und müssen sehen, ob es ein Element ist, könnten Sie tun so etwas wie dieses:
alert(someVariable && someVariable.nodeType);
Oder wenn Sie überprüfen müssen, dass es sich um eine Typ-1-Element ist, könnten Sie dies tun:
alert(someVariable && someVariable.nodeType === Node.ELEMENT_NODE);
Dadurch werden Textknoten, Attributknoten, Kommentare und a bunch of others entfernt.
5
Ein Knoten? Ein DOM-Element? es würde eine .nodeType Eigenschaft haben.
In Bezug auf nodeValue für die andere Antwort, die nodeValue kann leer sein, aber ein Knoten wird immer eine nodeType.
5
mit dem HTML-Element und einen Blick auf die Registerkarte Eigenschaften in Chrome Dev-Tools nehmen, können wir die Nachkommen sehen:
html-> HTMLHtmlElement-> HTMLElement-> Element-> Knoten-> EventTarget- > Objekt
Nun, was auch viele verschiedene Möglichkeiten, die wir wollen nicht die ersten 2 ganz gleich überprüfen dass uns mit Htmlelement oder Element so lassen. Was ist der Unterschied?
HTML, HEAD, SCRIPT, META, BODY, DIV, P und UL haben alle das gleiche Erbe:
HTMLElement-> Element-> Knoten-> EventTarget-> Objekt
jetzt ein paar negative Ergebnisse aus einem typischen Dokument, in dem:
<!DOCTYPE html> DocumentType->Node->EventTarget->Object
<!-- COMMENT --> Comment->CharacterData->Node->EventTarget->Object
Also Knoten ist der gemeinsame Nenner, aber die Frage ist, wie man nach einem gültigen DOM-Knoten sucht, wie man nach einem gültigen DOM-Knotenelement sucht. Also jedes Objekt mit HTMLElement, um wahr zurückzugeben, andernfalls gibt false zurück.
Ok jetzt die Chrome Dev-Tools auf der HTML-Element aussehen lässt:
$obj.nodeType; //1 No help what so ever
$obj.nodeName; //HTML Gives use the tag names
$obj.nodeValue; //null Waste of DOM space
wir den Prototyp oder __proto überprüfen?
$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, also Knoten verwenden ist tot zu verwenden. Lass uns zum Konstruktor gehen.
$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
kann nun in einer schönen, sauberen effizienten Nutzenfunktion umwickeln.
//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"
+1
meder weist darauf hin, dass es immer einen nodeType gibt und das ist richtig. Das war die erste Sache, die ich überprüft habe und der Wert ist 1. Der Standard definiert nodeType 1 als "Element \t Stellt ein Element \t Element, Text, Kommentar, ProcessingInstruction, CDATASection, EntityReference". Die Frage war für 'Element' nicht Text, Kommentar, usw. Also ist meine isElement() Funktion der richtige Weg? oder liege ich falsch? – NlaakALD
Die nodeValue könnte leer/leer/null, sein oder? '!! (document.createElement ('p')). nodeValue' –
Solange es kein anderes Objekt mit der Eigenschaft' nodeType' ist. Die Chancen sind jedoch gering. – crush