Probando el tipo de un elemento DOM en JavaScript

99

¿Hay alguna forma de probar el tipo de un elemento en JavaScript?

La respuesta puede requerir o no la biblioteca de prototipos, sin embargo, la siguiente configuración hace uso de la biblioteca.

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

Respuestas:

125

Puede usar typeof(N)para obtener el tipo de objeto real, pero lo que desea hacer es verificar la etiqueta, no el tipo de elemento DOM.

En ese caso, use la propiedad elem.tagNameo elem.nodeName.

Si desea ser realmente creativo, puede usar un diccionario de nombres de etiquetas y cierres anónimos en su lugar si es un cambio o si / si no.

FlySwat
fuente
68
if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}
bobwienholt
fuente
1
A veces lo es. De todos modos, siempre puedes usar element.nodeName.match(/\bTBODY\b/i)o element.nodeName.toLowerCase() == 'tbody'etc.
Robusto
9
@Robusto es incorrecto. Si el documento es HTML y la implementación del DOM es correcta, siempre estará en mayúsculas. Según: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 en la sección "tagName" (para elementos nodeName == tagName) "El DOM HTML devuelve el tagName de un elemento HTML en la forma canónica en mayúsculas, independientemente del caso en el documento HTML de origen ".
bobwienholt
19

Quizás también tengas que comprobar el tipo de nodo:

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
  }
}

Editar: se corrigió el valor de nodeType

roenving
fuente
3
Tenga cuidado con el caso de tagName.
párpados
@Casey: Lo hará en una página HTML; en una página XHTML, el caso de la etiqueta se conserva (por lo que "a" será "A" en páginas HTML y "a" en páginas XHTML): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (Suponiendo que la página XHTML se sirvió correctamente y no se sirvió como text/html.)
TJ Crowder
2
@TJCrowder por lo que parece que la mejor opción eselement.tagName.toLowerCase() === 'a'
p3drosola
@Ped: Sí, o element.nodeName.toLowerCase()si es posible que en elementrealidad no sea un elemento (por ejemplo, si no ha realizado la nodeType == 1verificación mencionada anteriormente). La Nodeinterfaz tiene nodeName. Por Elementejemplo, es lo mismo que tagName. Para otros tipos de nodos, son cosas como "#text"o "#document". Sin nodeTypeembargo, creo que siempre usaría el cheque.
TJ Crowder
Actualización de 2019: al menos en Chromium moderno (v79.0.3945.79), la cadena de nombre de etiqueta está en mayúsculas. "Para los árboles DOM que representan documentos HTML, el nombre de la etiqueta devuelta siempre está en la forma canónica en mayúsculas. Por ejemplo, tagName llamado en un elemento <div> devuelve" DIV " https://developer.mozilla.org/en- / docs / web API / US / Elemento / tagName camino correcto comparar seríannode.tagName == 'DIV'
orujos
6

roenving es correcto, PERO necesita cambiar la prueba a:

if (element.nodeType == 1) {
//código
}

porque nodeType de 3 es en realidad un nodo de texto y nodeType de 1 es un elemento HTML. Ver http://www.w3schools.com/Dom/dom_nodetype.asp

Eric Wendelin
fuente
2

Normalmente lo obtengo del valor de retorno de toString (). Funciona en elementos DOM de acceso diferente:

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

Luego la pieza relevante:

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

Funciona en Chrome, FF, Opera, Edge, IE9 + (en IE más antiguo devuelve "[object Object]").

Herbertusz
fuente
2

Aunque las respuestas anteriores funcionan perfectamente, solo agregaré otra forma en la que los elementos también se pueden clasificar usando la interfaz que han implementado.

Consulte W3 Org para conocer las 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 verificación de la interfaz se puede realizar de 2 formas como elem instanceof HTMLAnchorElemento elem.constructor.name == "HTMLAnchorElement"ambas devolucionestrue

Vignesh Raja
fuente
0

Tengo otra forma de probar lo mismo.

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
}

Nicolsondsouza
fuente