html 객체의 경우 먼저 Node 노드를 언급해야 합니다. Node는 인터페이스입니다. 많은 DOM 유형이 이 인터페이스에서 상속되며 이러한 다양한 유형이 유사하게 처리(또는 테스트)될 수 있습니다. Node가 메서드와 속성에서 상속하는 인터페이스가 있나요? 먼저 이 글을 읽어보자. apache php mysql

이 기사를 쓰는 이유는 무엇입니까?

당신은 한동안 웹 개발을 해왔을 것입니다. 다음과 같은 질문에 대해 생각해 본 적이 있나요?
p 요소 또는 모든 html 요소가 addEventListener를 사용하여 이벤트를 추가할 수 있는 이유는 무엇인가요?
각 DOM 노드에 parentNode, firstChild, nodeType 등과 같은 속성이 있는 이유는 무엇인가요?
모든 DOM 요소에 className, classList, innerHTML 등과 같은 속성이 있는 이유는 무엇인가요?
일부 DOM 요소에 accessKey, contentEditable, isContentEditable 등과 같은 속성이 있는 이유는 무엇인가요?
왜 모든 DOM 요소에는 onclick, ondblclick, ondrag 및 기타 속성이 있나요?
이 글은 간단하지만 '단순'하지 않은 질문에 답하기 위한 것입니다.

EventTarget

Definition

EventTarget은 이벤트를 받을 수 있는 객체로 구현된 인터페이스이며, 이에 대한 리스너를 생성할 수 있습니다.

Role

Element, document 및 window가 가장 일반적인 이벤트 대상이지만 XMLHttpRequest, AudioNode, AudioContext 등과 같은 다른 객체도 이벤트 대상이 될 수 있습니다.
많은 이벤트 대상(요소, 문서 및 창 포함)도 onXXX(예: onclick) 속성 및 속성을 통해 이벤트 핸들러 설정을 지원합니다.

이 인터페이스의 메서드

EventTarget.addEventListener()

EventTarget에 특정 이벤트 유형에 대한 이벤트 핸들러를 등록합니다.

EventTarget.removeEventListener()

EventTarget에서 이벤트 리스너를 제거합니다.

EventTarget.dispatchEvent()

이 EventTarget에 이벤트를 전달합니다.

EventTarget을 직접 구현합니다

var EventTarget = function() {
  this.listeners = {};
};

EventTarget.prototype.listeners = null;
EventTarget.prototype.addEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    this.listeners[type] = [];
  }
  this.listeners[type].push(callback);
};

EventTarget.prototype.removeEventListener = function(type, callback) {
  if (!(type in this.listeners)) {
    return;
  }
  var stack = this.listeners[type];
  for (var i = 0, l = stack.length; i < l; i++) {
    if (stack[i] === callback){
      stack.splice(i, 1);
      return;
    }
  }
};

EventTarget.prototype.dispatchEvent = function(event) {
  if (!(event.type in this.listeners)) {
    return true;
  }
  var stack = this.listeners[event.type].slice();

  for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
  }
  return !event.defaultPrevented;
};

로그인 후 복사

Node

Definition

Node는 인터페이스이며 많은 DOM 유형이 다음에서 유래합니다. 이 인터페이스는 이러한 다양한 유형을 유사하게 처리(또는 테스트)할 수 있도록 상속하고 허용합니다. Node는 많은 DOM 유형을 상속하고 이러한 다양한 유형을 유사하게 처리(또는 테스트)할 수 있는 인터페이스입니다.

Node가 메서드와 속성에서 상속하는 인터페이스가 있나요?

Document, Element, CharacterData(Text, Comment 및 CDATASection이 상속함), ProcessInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference
PS: 메서드와 속성이 상속되지 않는 특정 경우 관련 상황에 따라 이러한 인터페이스는 null을 반환할 수 있습니다. 예를 들어 하위 노드의 존재를 허용하지 않는 노드에 하위 노드를 추가하는 경우 예외가 발생할 수 있습니다.

인터페이스 관련 속성 및 메서드

Properties

Node.baseURI

기본 URL을 나타내는 DOMString을 반환합니다. 언어별로 기본 URL의 개념이 다릅니다. HTML에서 기본 URL은 프로토콜과 도메인 이름은 물론 마지막 '/'까지의 파일 디렉터리를 나타냅니다.

Node.childNodes

노드의 모든 하위 노드를 포함하는 실시간 NodeList를 반환합니다. NodeList는 "실시간"입니다. 즉, 노드의 하위 노드가 변경되면 NodeList 객체가 자동으로 업데이트됩니다.

Node.firstChild

노드의 첫 번째 하위 노드를 반환하거나, 노드에 하위 노드가 없는 경우 null을 반환합니다.

Node.lastChild

노드의 마지막 하위 노드를 반환하거나, 노드에 하위 노드가 없는 경우 null을 반환합니다.
여기에서는 일부 Node 인터페이스 속성이 생략되었으며, 더 많은 속성을 여기에서 찾을 수 있습니다.

method

그럼 여기서 핵심이 나옵니다!
핵심 사항: 부모 클래스 EventTarget에서 addEventListener, RemoveEventListener, dispatchEvent 및 기타 메서드를 상속합니다.

Node.appendChild()

지정된 상위 노드의 하위 노드 목록 끝에 노드를 추가합니다.

Node.contains()

들어오는 노드가 노드의 하위 노드인지 여부를 나타내는 부울 값을 반환합니다.

Node.cloneNode()

이 메서드가 호출된 노드의 복사본을 반환합니다.
여기에서는 일부 Node 인터페이스 메서드가 생략되었으며, 더 많은 메서드를 여기에서 찾을 수 있습니다.

Element

Description

Element는 매우 일반적인 기본 클래스이며 Document 객체 아래의 모든 객체는 이를 상속합니다. 이 인터페이스는 동일한 종류의 모든 요소에 공통적인 메서드와 속성을 설명합니다. 이러한 인터페이스는 Element에서 상속되며 특정 동작을 설명하는 몇 가지 추가 기능을 추가합니다.
PS: HTMLElement 인터페이스는 모든 HTML 요소에 대한 기본 인터페이스이고, SVGElement 인터페이스는 모든 SVG 요소에 대한 기본 인터페이스입니다.
XUL과 같이 웹 이외의 언어에서는 XULElement의 API를 통해서도 구현할 수 있습니다.

Attributes

모든 속성은 상위 인터페이스 Node와 EventTarget을 확장하는 인터페이스에서 상속되며 다음 부분에서 ParentNode, ChildNode, NonDocumentTypeChildNode 및 Animatable 속성을 상속합니다.

Element.assetedSlot

요소에 해당하는 HTMLSlotElement 인터페이스를 반환합니다.

Element.attributes

해당 요소를 반환합니다. 모든 관련 속성의 컬렉션 NamedNodeMap

Element.classList

요소에서 반환된 클래스 속성은 DOMTokenList입니다.

Element .className#🎜🎜 #

이 요소의 클래스를 나타내는 DOMString입니다.

여기에서는 여러 요소 인터페이스 속성이 생략되었으며, 더 많은 메서드를 여기에서 찾을 수 있습니다.

method

그럼 여기서 핵심!
부모 클래스(Node)와 부모 클래스의 부모 클래스(EventTarget)에서 메서드를 상속하고 parentNode, ChildNode, NonDocumentTypeChildNode 및 Animatable을 구현합니다.
여기에서는 일부 요소 인터페이스 메서드가 생략되었으며, 더 많은 메서드를 여기에서 찾을 수 있습니다.

Element.closest()

이 메서드는 특정 선택기와 일치하고 현재 요소에 가장 가까운 상위 요소를 가져오는 데 사용됩니다(현재 요소일 수도 있음). 그 자체). 일치하는 항목이 없으면 null이 반환됩니다.

Element.getAttribute()

요소에 마지막으로 지정된 속성 값을 반환합니다. 지정된 속성이 없으면 null 또는 ""(빈 문자열)을 반환합니다.

Element.getElementsByClassName()

클래스 목록이 매개변수에 제공되고 이러한 클래스를 보유하는 모든 하위 요소가 포함된 동적 HTMLCollection이 반환됩니다.
여기에서는 일부 요소 인터페이스 메서드가 생략되었으며, 더 많은 메서드를 여기에서 찾을 수 있습니다.

HTMLElement

Function

HTMLElement 인터페이스는 모든 HTML 요소를 나타냅니다. 일부 HTML 요소는 HTMLElement 인터페이스를 직접 구현하고 다른 요소는 HTMLElement 인터페이스를 간접적으로 구현합니다.

Attribute

그럼 여기서 핵심이 나옵니다!
상위 인터페이스 Element 및 GlobalEventHandler에서 상속된 속성입니다.
HTMLElement.accessKey DOMString 요소 액세스를 위한 단축키 가져오기/설정
HTMLElement.accessKeyLabel DOMString 요소 액세스를 위한 단축키가 포함된 문자열 반환(읽기 전용)
HTMLElement.contentEditable DOMString Get/ set 요소의 편집 가능 상태
HTMLElement.isContentEditable Boolean 요소의 내용이 편집 가능한지(읽기 전용) 여부를 나타냅니다.
여기에서는 여러 HTMLElement 인터페이스 속성이 생략되었으며, 더 많은 메소드를 여기에서 찾을 수 있습니다.

이벤트 핸들러

HTMLElement.onTouchStart
HTMLElement.onTouchEnd
HTMLElement.onTouchMove
HTMLElement.onTouchEnter
HTMLElement.onTo 윽 # 떠나 🎜🎜#HTMLElement.onTouchCancel

Method

HTMLElement.blur() void 요소가 포커스를 잃습니다.

HTMLElement.click() void 요소의 클릭 이벤트를 트리거합니다. #🎜 🎜 #HTMLElement.focus() void 요소가 포커스를 얻음
HTMLElement.forceSpellCheck() void

GlobalEventHandlers

Definition

GlobalEventHandler s 인터페이스에서는 이벤트 핸들러가 HTMLElement, File, Window 또는 WorkerGlobalScope 웹 작업자와 같은 여러 인터페이스에 공통적으로 설명되어 있습니다. 이러한 인터페이스는 더 많은 이벤트 핸들러를 구현할 수 있습니다.

Attributes

GlobalEventHandlers.onabort

인터럽트 이벤트.

GlobalEventHandlers.onblur

포커스 이벤트.

GlobalEventHandlers.onfocus

포커스 이벤트를 가져옵니다.

여기에서는 일부 GlobalEventHandlers 인터페이스 속성이 생략되었으며, 더 많은 메서드를 여기에서 찾을 수 있습니다.

Element 인터페이스

이 인터페이스는 해당 요소를 만드는 데 사용됩니다.

예:

HTMLpElement 인터페이스는 p 요소에 작동하는 몇 가지 특별한 속성(일반적인 HTMLElement 인터페이스도 상속함)을 제공합니다.
HTMLFormElement 인터페이스는 HTMLElement 인터페이스의 메서드와 속성을 상속하는

객체를 생성하거나 수정할 수 있습니다.
HTMLAnchorElement 인터페이스는 하이퍼링크 요소를 나타내며 이러한 요소의 레이아웃 및 표시를 조작하기 위한 몇 가지 특수 속성 및 메서드(일반 HTMLElement 개체 인터페이스에서 상속된 속성 및 메서드)를 제공합니다.
......

이전 질문에 답하기

위의 지식을 통해 다음을 이해합니다.

HTMLpElement(기타 요소 인터페이스)는 HTMLElement를 상속합니다. 및 GlobalEventHandlers 인터페이스.

HTMLElement는 Element 인터페이스를 상속합니다.
Element는 Node 인터페이스를 상속합니다.
Node는 EventTarget 인터페이스를 상속합니다.

왜 p 요소 또는 모든 html 요소에서 addEventListener를 사용하여 이벤트를 추가할 수 있나요?
답변: EventTarget 인터페이스에서 상속되었습니다. 완전한 HTML 객체는 어떤 모습이며 어떻게 생성하나요? 왜 각 DOM 노드에는 parentNode, firstChild, nodeType 등과 같은 속성이 있나요?
답변: Node 인터페이스에서 상속되었습니다.
모든 DOM 요소에 className, classList, innerHTML 등과 같은 속성이 있는 이유는 무엇인가요?
답변: Element 인터페이스에서 상속되었습니다.
일부 DOM 요소에 accessKey, contentEditable, isContentEditable 등과 같은 속성이 있는 이유는 무엇인가요?
답변: HTMLElement 인터페이스에서 상속되었습니다.
왜 모든 DOM 요소에는 onclick, ondblclick, ondrag 및 기타 속성이 있나요?
답변: GlobalEventHandlers 인터페이스에서 상속됩니다.

그럼 포인트는 여기!
end：