이 시리즈의 소개 부분에는 'HTML 요소는 문서 객체 모델을 구성하는 노드입니다.'라고 나와 있습니다. 요소 노드의 유형에 대해 살펴보았습니다. 이 섹션에서는 이러한 노드를 쿼리할 수 있는 요소 API에 대해 설명합니다.
DOM 및 AOM
DOM은 문서에 액세스하고 문서를 조작하기 위한 API입니다. DOM은 문서에 있는 모든 노드의 트리입니다. 일부 노드에는 하위 요소가 있을 수 있고 다른 노드는 있을 수 없습니다. 트리에는 요소와 해당 속성 및 텍스트 노드가 포함됩니다.
브라우저 도구는 위와 같은 트리 시각화를 제공하지 않지만 요소 검사기에서 노드를 볼 수 있습니다.
브라우저 개발자 도구에서 검사할 수 있는 트리 표현은 접근성 트리입니다. AOM은 DOM을 사용하지 않고 마찬가지로 접근성 트리에는 모든 마크업 요소, 속성 및 텍스트를 나타내는 객체가 포함됩니다. 노드:
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 요소별에서 상속됩니다.
인터페이스가 상속합니다. 일부 요소별 인터페이스는 여러 개의 유사한 요소로 구현됩니다.
인터페이스에는 다음이 포함됩니다.
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
<video>
년HTMLMediaElement
~<audio>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
<del>
년HTMLModElement
~<ins>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
~<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
:<q>
,<blockquote>
,<cite>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
~<style>
<th>
년HTMLTableCellElement
~<td>
<colgroup>
년HTMLTableColElement
~<col>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
:<thead>
,<tbody>
,<tfoot>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
이름 지정 규칙은 '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는 무엇을 의미하나요?
콘텐츠가 있는 탭에 대한 정보를 확인하는 데 도움이 되는 인터페이스는 무엇인가요?