HTML API

이 시리즈의 소개에서 'HTML 요소는 문서 개체 모델을 구성하는 노드입니다'라고 표시되어 있습니다. 요소 노드의 유형에 관해 알아봤습니다. 이 섹션에서는 이러한 노드를 쿼리할 수 있는 요소 API를 설명합니다.

DOM 및 AOM

DOM은 문서에 액세스하고 조작하기 위한 API입니다. DOM은 문서에 있는 모든 노드의 트리입니다. 일부 노드에는 하위 요소가 있을 수 있지만, 그렇지 않은 노드도 있습니다. 트리에는 요소와 그 특성 및 텍스트 노드가 포함됩니다.

요소와 텍스트 노드를 보여주는 MLW 노드 트리

브라우저 도구는 위와 같은 트리 시각화를 제공하지 않지만 요소 검사기에서 노드를 볼 수 있습니다.

DOM/ARIA

브라우저 개발자 도구에서 검사할 수 있는 트리 표현은 접근성 트리입니다. AOM은 DOM을 기반으로 합니다. 마찬가지로 접근성 트리에는 모든 마크업 요소, 속성, 텍스트 노드를 나타내는 객체가 포함됩니다.

AOM의 예

HTML 요소 API

DOM의 중간 문자는 'object'입니다. 객체 지향 프로그래밍 클래스를 소개합니다. 대부분의 객체 지향 프로그래밍 클래스에 소개된 person 또는 car 객체 예와 마찬가지로 문서 트리의 모든 노드는 자바스크립트로 조작할 수 있는 객체입니다.

브라우저는 기본적으로 지원되는 메서드, 이벤트, 속성 쿼리 및 업데이트를 제공하는 여러 API를 제공합니다. 요소 노드에는 요소에 설정된 모든 속성에 대한 정보가 포함됩니다. HTML 인터페이스를 사용하여 요소의 속성에 관한 정보에 액세스할 수 있습니다. 예를 들어 HTMLImageElement.alt를 사용하여 모든 이미지의 alt 속성을 가져올 수 있습니다.

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

HTML 인터페이스는 요소의 속성에 액세스하는 것 이상을 제공합니다. 훨씬 더 많은 정보에 액세스할 수 있습니다. 읽기 전용 HTMLElement.offsetHeight를 찾아 레이아웃을 기준으로 페이지에서 각 섹션의 높이를 가져올 수 있습니다.

let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
  console.log(sectionInstance.offsetHeight);
});

사용자가 기기 방향을 변경하거나 표시 영역의 너비를 변경하면 각 <section>의 높이가 변경되고 DOM 속성이 자동으로 업데이트됩니다.

HTML 인터페이스 API는 속성 값에 액세스하는 데 제한되지 않습니다. DOM은 UI의 현재 상태에 관한 유용한 정보를 제공합니다. HTML API는 이러한 모든 정보에 액세스할 수 있습니다. HTMLMediaElement.duration, HTMLMediaElement.currentTime, HTMLMediaElement.ended를 각각 사용하여 동영상의 길이, 현재 재생 중인 조회수, 동영상 (또는 오디오) 재생 완료 여부에 액세스할 수 있습니다.

사용 가능한 요소 인터페이스

지금까지 이 시리즈에서 다룬 대부분의 HTML 요소에는 아직 다루지 않았으며 일부 섹션 요소를 제외하고는 연결된 DOM 인터페이스가 있습니다. 모든 요소의 기본 인터페이스의 이름은 Element입니다. HTMLElement는 요소에서 상속되고 모든 HTML 요소별 인터페이스는 요소에서 상속됩니다. 일부 요소별 인터페이스는 여러 개의 유사한 요소로 구현됩니다.

인터페이스에는 다음이 포함됩니다.

이름 지정 규칙은 'HTML' 다음에 카멜 표기법을 따른 요소 또는 요소 그룹 다음에 '요소'가 오는 것이지만 요소 또는 요소 그룹에서는 정확한 패턴을 따르지 않습니다. 걱정하지 마세요. 이것들을 외우지 않아도 됩니다. 필요할 때 찾을 수 있도록 이러한 항목이 있는지 확인하는 것이 중요합니다.

요소 컬렉션이 있는 경우 컬렉션 인터페이스도 있습니다. 예를 들어 HTMLCollection.namedItem() 메서드는 id 또는 name 속성이 매개변수와 일치하는 컬렉션의 첫 번째 요소를 반환하며, 일치하는 요소가 없는 경우 null을 반환합니다.

<address>, <article>, <section>, <nav>, <header>, <footer>, <aside>, <hgroup> 등 30개가 넘는 요소에 HTMLElement 외에 연결된 DOM 인터페이스가 없습니다. 지원 중단되지 않은 비 전역 속성을 지원하지 않는 많은 요소에는 HTMLPElement (<p> 요소) 및 HTMLUnknownElement(<😃> 또는 정의되지 않은 기타 요소)와 같은 요소별 인터페이스가 있지만 이러한 인터페이스는 HTMLElement에서 상속된 속성과 메서드 외에 추가 속성이나 메서드를 구현하지 않으므로 위에 나열되지 않았습니다.

중복 API 메서드 및 속성

인터페이스가 상속하는 인터페이스와 동일한 메서드 또는 속성 이름을 가진 경우 상속하는 메서드 또는 속성이 상속된 메서드 또는 속성을 덮어씁니다. 각각 imageInstance.alt 및 sectionInstance.offsetHeight를 사용하여 위의 alt 및 offsetHeight 속성에 액세스했을 때 코드가 액세스 중인 API를 식별하지 못했습니다.

일반적으로 이 두 가지 예와 마찬가지로 이는 문제가 되지 않습니다. 하지만 그럴 수도 있습니다. 예를 들어 HTMLCollection.length는 읽기 전용이지만 상속하는 HTMLOptionsCollection 인터페이스의 길이 속성 (<select>의 options 속성에 의해서만 반환됨)도 컬렉션 크기를 설정하는 데 사용할 수 있습니다.

기타 인터페이스

DOM 노드의 브랜치 위치를 조작할 수 있는 추가 인터페이스가 있습니다. addEventListener() 및 removeEventListener()를 제공하는 EventTarget 인터페이스는 Node 및 Window 인터페이스에서 상속됩니다. 그러면 맞춤 요소에서 본 요소, 문서, DocumentFragment 인터페이스는 노드에서 상속되고 HTMLElement 인터페이스는 요소에서 상속됩니다.

node 인터페이스

모든 유형의 DOM 노드는 요소가 DOM 트리와 관련되어 있으므로 정보와 메서드를 제공하는 Node 기반의 인터페이스로 표현됩니다. Node 인터페이스를 사용하면 노드를 쿼리하고 노드 트리에 추가할 수 있습니다.

더글러스 크록포드의 유명한 'DOM 사용' 함수는 Node의 firstChild 및 nextSibling 속성을 사용합니다.

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

Node의 appendChild() 및 cloneNode() 메서드를 사용하여 맞춤 요소를 정의했습니다. Node 인터페이스는 DOM을 쿼리하고 조작하기 위한 여러 가지 유용한 속성과 메서드를 제공합니다.

customElements.define('star-rating',
  class extends HTMLElement {
    constructor() {
      super(); // Always call super first in constructor
      const starRating = document.getElementById('star-rating-template').content;
      const shadowRoot = this.attachShadow({
        mode: 'open'
      });
      shadowRoot.appendChild(starRating.cloneNode(true));
    }
  });

attachShadow() 메서드는 Element 인터페이스의 메서드입니다. 문서의 기본 DOM 트리와 별도로 렌더링되는 Shadow DOM API용 shadowRoot 인터페이스도 있습니다.

Document 및 HTMLDocument 인터페이스

Document 인터페이스는 Node에서 상속받습니다. 문서가 HTML, SVG, XML, MathML 등 브라우저에서 로드된 웹페이지를 나타냅니다. 또한 Document 인터페이스는 HTMLDocument 인터페이스에서 상속합니다.

document를 사용하면 노드 유형에 빠르게 액세스하고 document.body, document.styleSheets와 같은 특정 요소 유형의 컬렉션을 만들 수 있습니다. HTMLDocument를 사용하면 Document.location, Document.lastModified, Document.Cookie와 같이 HTML 노드에 없는 문서와 관련된 정보에 액세스할 수 있습니다.

Drag and Drop API 및 FullScreen API를 비롯하여 문서 인터페이스를 통해 표시되는 기능을 기반으로 여러 API를 사용할 수 있습니다. 둘 다 Element에서 상속됩니다.

Window 인터페이스

Window 인터페이스에는 DOM을 제외하고 DOM을 조작하는 데 사용할 수 있는 전역적으로 사용 가능한 항목이 포함됩니다. Window는 MDN의 JavaScript 및 DOM 참조에 문서화된 함수, 네임스페이스, 객체, 생성자를 제공합니다.

Window 인터페이스는 문서가 포함된 객체의 API입니다. 전역 window 객체는 스크립트가 실행 중인 창입니다. 모든 브라우저 탭에는 자체 Window 객체가 포함되어 있습니다. 창 인터페이스는 탭의 콘텐츠는 물론 전체 창과 기기까지 쿼리할 수 있습니다. 예를 들어 resizeTo() 메서드를 사용하여 브라우저 창의 크기를 조절할 수 있으며 devicePixelRatio 속성은 기기 디스플레이 픽셀에 대한 액세스를 제공합니다. 탭이 표시하는 DOM 트리가 아니라 콘텐츠가 있는 탭에 관한 정보에 액세스할 때 창은 찾고 있는 인터페이스일 가능성이 높습니다.

Web Workers 및 IndexedDB API를 비롯하여 Window 인터페이스를 통해 표시되는 기능을 기반으로 여러 API를 사용할 수 있습니다.

이해도 테스트

HTML API에 관한 지식을 테스트합니다.

DOM의 O는 무엇을 의미할까요?

지향성.
다시 시도해 주세요.
객체.
정답입니다.
외부.
다시 시도해 주세요.

콘텐츠가 있는 탭에 관한 정보를 확인하는 데 도움이 되는 인터페이스는 무엇인가요?

창
정답입니다.
문서
다시 시도해 주세요.
노드
다시 시도해 주세요.