Devtools> Elements> Properties에서 추가 DOM 하위 범주를 실제로 사용할 수 있습니까?

Question

다른 모든 사람들처럼 Chrome DevTools를 사용하여 HTML 요소의 속성을 검사합니다. 예를 들어 어떤 속성이 특정 <DIV>에 연결되었는지 알고 싶다면이 작업을 수행합니다.

1. DevTools로 이동
2. 열고 요소 패널
3. 나는 오른쪽 패널에서
4. 을 검사하고 싶은 HTML DIV 요소를 클릭하여 상위 목록은 div에됩니다
5. 속성 탭을 클릭합니다. (클래스 명)
6. 는 해당 레이블을 클릭하고 속성

최고를 볼! 해당 노드에 연결된 모든 속성을보고 필요에 따라 사용할 수 있습니다.

그러나 아래에는 6 개의 추가 목록이 나와 있습니다. 아마도 다른 사람들이 사용하지 않을 수도 있습니다. 그들은 DOM hierarchy의 일부를 대표하는 것으로 보입니다.

• HTMLDivElement와
• 는 HTMLElement
• 요소
• 노드
• 의 EventTarget
• 객체

질문 : 사이트를 구축 할 때이 또한 실제 사용이 있습니까? 나는 그들을 사용할 수있는 멋진 것을 놓치고 있습니까? 그들은 단지 참조 용으로 존재합니까? 어떤 의견을 주셔서 감사합니다!

Answer 1

당신은 객체와 인터페이스 유형의 목록을 가지고 있으며, 많은 사람들이 사용하지 않는다는 주장에 위배됩니다. 그들은 광범위하게 사용됩니다 (비록 당신이 그것을 깨닫지 못할지라도).

• 객체 자바 스크립트에서

는 모든 것이 Object입니다. 객체는 기본 속성 및 메소드를 부여받으며 문자 그대로 다른 모든 객체가이를 상속합니다.

• 의 EventTarget

트리거되는 이벤트의 소스였던 개체 명세서이다.

• W3C의 문서 객체 모델 API (좋은 개요 here)에서 노드

는 특정 요소 유형은 중요하지 무엇인가. 모든 요소 및 속성 (DOCTYPE 및 주석과 같은 다른 유형의 마크 업)은 일반적으로 "노드"라고하며 모든 노드에는 특정 속성 (즉, nodeName, nodeType, nodeValue 및 메소드)이 있습니다. DOM API는 모든 마크 업을 기본 노드로 취급하는 것을 선호합니다. 이 API는 HTML뿐만 아니라 XML에서도 작동하기 때문에 이러한 방식으로 설계되었습니다. 요소

• 는 HTML 요소에 대해 이야기하는 데 사용되는 일반적인 용어입니다.
  • 는 HTMLElement는

  당신은 프로그래밍 방식 (모든 HTML 요소처럼) 인터페이스를 구현하는 객체와 상호 작용할 수있는 다양한 방법을 설명하는 "인터페이스"입니다.

  • HTMLDivElement와는

  하는 HTML DIV 요소가 programattic 상호 작용을 노출해야하는지 설명하는 더 구체적인 인터페이스입니다.

Answer 2

'HTMLDivElement`와 같이 <div> 및 DOM interfaces과 같이 태그 이름을 혼동하지 마십시오. 첫 번째는 문서 구조 만들기의 일부이고 두 번째는 브라우저 및 스크립팅을위한 인터페이스입니다.

HTMLDivElement와 인터페이스는 DIV 요소를 조작하기위한합니다 ( 일반는 HTMLElement 인터페이스를 넘어 그것은 또한 상속하여 사용할 수있다) 특별한 속성을을 제공합니다.

MDN 또는 the spec itself을 검색하여 목록에있는 다른 설명을주의 깊게 읽으십시오.