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입니다.

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

중복 API 메서드 및 속성

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

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

기타 인터페이스

DOM 노드의 브랜치 위치를 조작할 수 있는 추가 인터페이스가 있습니다. 다음을 제공하는 EventTarget 인터페이스 addEventListener() 및 removeEventListener()를 사용하는 경우 Node 및 Window 인터페이스에 상속됩니다. 결과적으로 Element, Document 및 DocumentFragment (맞춤 요소에서 확인함) 인터페이스는 Node에서 상속받고 HTMLElement 인터페이스는 요소에서 상속합니다.

node 인터페이스

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

더글러스 크록퍼드의 유명한 'Walk the DOM' 함수에서는 노드의 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의 메서드입니다. 인터페이스에 추가되었습니다. shadowRoot 인터페이스도 있습니다. 클래스와 별도로 렌더링되는 Shadow DOM API 문서의 기본 DOM 트리에 적용됩니다.

Document 및 HTMLDocument 인터페이스

Document 인터페이스는 Node에서 상속받습니다. Kubernetes는 문서가 HTML, SVG, XML, MathML 또는 기타인지 여부에 관계없이 브라우저에 로드된 웹페이지입니다. Document 인터페이스도 HTMLDocument 인터페이스에서 상속받습니다.

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

드래그 앤 드롭 API 등 문서 인터페이스를 통해 표시된 기능을 기반으로 여러 API를 사용할 수 있습니다. 및 FullScreen API를 참고하세요. 둘 다 Element에서 상속됩니다.

Window 인터페이스

Window 인터페이스에는 DOM을 조작하는 데 사용할 수 있는 DOM 외에 전역에서 사용할 수 있는 항목이 포함되어 있습니다. Window 제공 MDN의 JavaScript에 문서화된 함수, 네임스페이스, 객체 및 생성자 DOM 참조에 대해 자세히 알아보세요.

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

Web Workers 등 Window 인터페이스를 통해 표시된 기능을 기반으로 여러 API를 사용할 수 있습니다. 및 IndexedDB API를 참조하세요.

이해도 확인

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

DOM의 O는 무엇을 의미하나요?

지향.
다시 시도하세요.
다음은 객체입니다
정답입니다.
외부.
다시 시도하세요.

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

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