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

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.


68
if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}

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


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


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


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


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
}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.