web-dev-qa-db-fra.com

Test du type d'un élément DOM en JavaScript

Est-il possible de tester le type d'un élément en JavaScript?

La réponse peut nécessiter ou non le prototype de bibliothèque, mais la configuration suivante utilise cette bibliothèque.

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}
javascriptprototypejs
94
Casey Watson

Vous pouvez utiliser typeof(N) pour obtenir le type d'objet réel, mais vous souhaitez vérifier la balise, pas le type de l'élément DOM.

Dans ce cas, utilisez le elem.tagName ou elem.nodeName propriété.

si vous voulez vraiment faire preuve de créativité, vous pouvez utiliser un dictionnaire de noms de variables et de fermetures anonymes à la place si vous utilisez un commutateur ou si/else.

121
FlySwat
if (element.nodeName == "A")
{
}
else if (element.nodeName == "TD")
{
}
65
bobwienholt

Peut-être devrez-vous également vérifier le type de nœud:

if(element.nodeType == 1){//element of type html-object/tag
  if(element.tagName=="a"){
    //this is an a-element
  }
  if(element.tagName=="div"){
    //this is a div-element
  }
}

Edit: Corrigé la valeur nodeType

19
roenving

roenving est correct MAIS vous devez changer le test en:

 if (element.nodeType == 1) {
 // code 
}

parce que nodeType of 3 est en réalité un nœud de texte et nodeType of 1 est un élément HTML. Voir http://www.w3schools.com/Dom/dom_nodetype.asp

6
Eric Wendelin

Je l'obtiens généralement à partir de la valeur de retour toString (). Cela fonctionne dans des éléments DOM accédés différemment:

var a = document.querySelector('a');

var img = document.createElement('img');

document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');

Object.prototype.toString.call(a);    // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img);  // "[object HTMLImageElement]"
Object.prototype.toString.call(div);  // "[object HTMLDivElement]"

Puis la pièce pertinente:

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

Cela fonctionne dans Chrome, FF, Opera, Edge, IE9 + (dans l'ancien IE il renvoie "[objet Objet]").

2
Herbertusz

Bien que les réponses précédentes fonctionnent parfaitement, je vais juste ajouter une autre façon de classer les éléments à l'aide de l'interface qu'ils ont implémentée.

Reportez-vous Org. W3 pour les interfaces disponibles

console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);
<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">

La vérification de l’interface peut être faite de 2 manières comme elem instanceof HTMLAnchorElement ou elem.constructor.name == "HTMLAnchorElement", les deux retournent true

1
Vignesh Raja

J'ai une autre façon de tester la même chose.

Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
   return true; 
   // this is a dom element
}
else{
  return false; 
  // this isn't a dom element
}
0
nicolsondsouza