JavaScript에서 요소의 유형을 테스트하는 방법이 있습니까?

대답에는 프로토 타입 라이브러리가 필요할 수도 있고 필요하지 않을 수도 있지만 다음 설정에서는 라이브러리를 사용합니다.

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

답변

를 사용 typeof(N)하여 실제 객체 유형을 가져올 수 있지만 원하는 것은 DOM 요소의 유형이 아닌 태그를 확인하는 것입니다.

이 경우 elem.tagName또는 elem.nodeName속성을 사용하십시오 .

정말 창의력을 발휘하고 싶다면 스위치 또는 if / else 대신 태그 이름 사전과 익명 클로저를 사용할 수 있습니다.

답변

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

답변

아마도 노드 유형도 확인해야 할 것입니다.

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

편집 : nodeType- 값 수정

답변

roenving은 정확하지만 테스트를 다음과 같이 변경해야합니다.

if (element.nodeType == 1) {
//암호
}

nodeType 3은 실제로 텍스트 노드이고 nodeType 1은 HTML 요소이기 때문입니다. 참조 http://www.w3schools.com/Dom/dom_nodetype.asp를

답변

일반적으로 toString () 반환 값에서 가져옵니다. 다르게 액세스되는 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]"

그런 다음 관련 부분 :

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

Chrome, FF, Opera, Edge, IE9 +에서 작동합니다 (이전 IE에서는 “[object Object]”를 반환 함).

답변

이전 답변은 완벽하게 작동하지만 구현 한 인터페이스를 사용하여 요소를 분류 할 수있는 또 다른 방법을 추가하겠습니다.

사용 가능한 인터페이스는 W3 조직을 참조하십시오.

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

스 니펫 확장

인터페이스 확인은 elem instanceof HTMLAnchorElement또는 elem.constructor.name == "HTMLAnchorElement"로 두 가지 방법으로 수행 할 수 있습니다.true

답변

나는 같은 것을 테스트하는 다른 방법이 있습니다.

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
}

스 니펫 확장