Testowanie typu elementu DOM w JavaScript


99

Czy istnieje sposób na przetestowanie typu elementu w JavaScript?

Odpowiedź może, ale nie musi, wymagać biblioteki prototypów, jednak poniższa konfiguracja korzysta z tej biblioteki.

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

Odpowiedzi:


125

Możesz użyć, typeof(N)aby uzyskać rzeczywisty typ obiektu, ale to, co chcesz zrobić, to sprawdzić tag, a nie typ elementu DOM.

W takim przypadku użyj właściwości elem.tagNamelub elem.nodeName.

jeśli chcesz być naprawdę kreatywny, możesz zamiast tego użyć słownika zmiennych i anonimowych zamknięć, jeśli jest to przełącznik lub jeśli / jeszcze.


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

1
Czasami tak jest. W każdym razie, zawsze można użyć element.nodeName.match(/\bTBODY\b/i)lub element.nodeName.toLowerCase() == 'tbody'itd.
ROBUSTO

9
@Robusto jest nieprawidłowe. Jeśli dokument jest w formacie HTML, a implementacja DOM jest poprawna, zawsze będzie to wielkie litery. Zgodnie z: w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 w sekcji „tagName” (dla elementów nodeName == tagName) „HTML DOM zwraca tagName elementu HTML w kanoniczna forma wielkich liter, niezależnie od wielkości liter w źródłowym dokumencie HTML. "
bobwienholt

19

Być może będziesz musiał również sprawdzić typ węzła:

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

Edycja: poprawiono wartość nodeType


3
Uważaj na wielkość zmiennej tagName.
powiek

@Casey: będzie na stronie HTML; na stronie XHTML wielkość liter tagu jest zachowana (więc „a” będzie oznaczać „A” na stronach HTML, a „a” na stronach XHTML): w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (Zakładając, że strona XHTML została poprawnie udostępniona i nie została udostępniona jako text/html.)
TJ Crowder

2
@TJCrowder, więc wygląda na to, że najlepszą opcją jestelement.tagName.toLowerCase() === 'a'
p3drosola

@Ped: Tak, lub element.nodeName.toLowerCase()jeśli to możliwe, elementnie będzie to faktycznie element (np. Jeśli nie wykonałeś nodeType == 1powyższej kontroli). NodeInterfejs ma nodeName. Na Elementprzykład to to samo, co tagName. W przypadku innych rodzajów węzłów są to rzeczy takie jak "#text"lub "#document". Myślę, że zawsze używałbym nodeTypeczeku.
TJ Crowder

Aktualizacja 2019: przynajmniej w nowoczesnym Chromium (v79.0.3945.79) nazwa zmiennej jest pisana wielkimi literami. „W przypadku drzew DOM, które reprezentują dokumenty HTML, zwracana nazwa tagu ma zawsze postać kanoniczną z wielkimi literami. Na przykład tagName wywołany w elemencie <div> zwraca„ DIV ” https://developer.mozilla.org/en- US / docs / Web / API / Element / tagName Prawidłowy sposób porównania tonode.tagName == 'DIV'
marcs


2

Zwykle otrzymuję go z wartości zwracanej przez toString (). Działa z różnymi dostępnymi elementami DOM:

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

Następnie odpowiedni utwór:

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

Działa w Chrome, FF, Opera, Edge, IE9 + (w starszym IE zwraca „[object Object]”).


2

Chociaż poprzednie odpowiedzi działają idealnie, dodam tylko inny sposób, w którym elementy można również sklasyfikować za pomocą interfejsu, który zaimplementowali.

Sprawdź dostępne interfejsy W3 Org

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

Sprawdzanie interfejsu można wykonać na 2 sposoby jako elem instanceof HTMLAnchorElementlub elem.constructor.name == "HTMLAnchorElement", oba zwracanetrue


0

Mam inny sposób na przetestowanie tego samego.

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
}

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.