JavaScript에서 DOM 요소의 유형 테스트


99

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

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

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

답변:


125

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

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

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


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

1
때때로 그렇습니다. 어쨌든, 당신은 항상 사용할 수 있습니다 element.nodeName.match(/\bTBODY\b/i)또는 element.nodeName.toLowerCase() == 'tbody'
로보

9
@Robusto가 잘못되었습니다. 문서가 HTML이고 DOM 구현이 올바른 경우 항상 대문자입니다. "tagName"섹션 아래의 w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815 에 따르면 (nodeName == tagName 요소의 경우) "HTML DOM은 HTML 요소의 tagName을 소스 HTML 문서의 대소 문자에 관계없이 표준 대문자 형식입니다. "
bobwienholt 2014 년

19

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

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- 값 수정


3
tagName의 경우에주의하십시오.
눈꺼풀 없음

@Casey : HTML 페이지에 표시됩니다. XHTML 페이지에서는 태그의 대소 문자가 유지됩니다 (따라서 "a"는 HTML 페이지에서는 "A", XHTML 페이지에서는 "a"가됩니다). w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /… (XHTML 페이지가 올바르게 제공되고으로 제공되지 않는다고 가정합니다 text/html.)
TJ Crowder

2
그것이 최선의 선택처럼 보인다 있도록 @TJCrowder입니다element.tagName.toLowerCase() === 'a'
p3drosola

@Ped : 예, 또는 element.nodeName.toLowerCase()그것이 가능하다면이 element실제로 요소가되지 않습니다 (예를 들어, 당신이하지 않은 경우 nodeType == 1위에 나열된 확인). Node인터페이스가있다 nodeName. 예를 Element들어, tagName. 다른 종류의 노드의 경우 "#text"또는 같은 것 "#document"입니다. 그래도 항상 nodeType수표를 사용한다고 생각 합니다.
TJ Crowder

2019 업데이트 : 적어도 최신 Chromium (v79.0.3945.79)에서는 태그 이름 문자열이 대문자입니다. "HTML 문서를 나타내는 DOM 트리의 경우 반환 된 태그 이름은 항상 표준 대문자 형식입니다. 예를 들어 <div> 요소에서 호출 된 tagName은"DIV "를 반환합니다. https://developer.mozilla.org/en- US / docs / Web / API / Element / tagName 올바른 비교 방법은 다음과 같습니다.node.tagName == 'DIV'
marcs


2

일반적으로 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]"를 반환 함).


2

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

사용 가능한 인터페이스는 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


0

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

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
}

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.