JavaScript에서 HTML 요소의 유형을 어떻게 확인할 수 있습니까?

191

JavaScript에서 HTML 요소의 유형을 결정하는 방법이 필요합니다. ID는 있지만 요소 자체는 <div>, <form>필드, a <fieldset>등이 될 수 있습니다. 어떻게하면 되나요?

javascript dom

— AdamTheHutt
소스

290

nodeName찾고있는 속성입니다. 예를 들면 다음과 같습니다.

var elt = document.getElementById('foo');
console.log(elt.nodeName);

nodeName대괄호없이 대문자로 표시되는 요소 이름 을 반환합니다. 즉, 요소가 요소인지 확인하려는 경우 <div>다음과 같이 수행 할 수 있습니다.

elt.nodeName == "DIV"

이것이 예상되는 결과를 제공하지는 않지만 :

elt.nodeName == "<div>"

— pkaeding
소스

29

if (elt.nodeName.toLowerCase () === "div") {...} 이런 식으로 어떤 이유로 더 이상 대문자 (소문자 또는 혼합 문자)로 반환되지 않으면 변경할 필요가 없으며이 코드는 여전히 잘 작동합니다.

— TheCuBeMan

6

@TheCuBeMan에 대한 응답으로 toLowerCase ()를 사용하면 nodeName이 존재하는지 확인해야합니다 (가능한 경우 elt가 실제로 요소가 아닌 경우).if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Erik Koopmans

무엇에 대해 localName?

— bomba

46

무엇에 대해 element.tagName?

tagNameMDN 관련 문서 도 참조하십시오 .

— 브라이언 클라인
소스

4

타임 스탬프에 따르면 당신은 1 초 미만으로 나를 이겼습니다!

— eyelidlessness

27

QuirksMode에서 : 내 충고는 tagName을 전혀 사용하지 않는 것입니다. nodeName에는 tagName의 모든 기능 외에 몇 가지 기능이 포함되어 있습니다. 따라서 nodeName이 항상 더 나은 선택입니다.

— bdukes

7

때로는 당신이 원하는 element.constructor.name

document.createElement('div').constructor.name
// HTMLDivElement

document.createElement('a').constructor.name
// HTMLAnchorElement

document.createElement('foo').constructor.name
// HTMLUnknownElement

— 골로 팟
소스

7

다음을 통해 일반 코드 검사를 사용할 수 있습니다 instanceof.

var e = document.getElementById('#my-element');
if (e instanceof HTMLInputElement) {}         // <input>
elseif (e instanceof HTMLSelectElement) {}    // <select>
elseif (e instanceof HTMLTextAreaElement) {}  // <textarea>
elseif (  ... ) {}                            // any interface

봐 여기 인터페이스의 전체 목록.

— Code4R7
소스