DOM 표준

1. 인프라스트럭처

이 명세는 Infra Standard에 의존합니다. [INFRA]

이 명세에서 사용되는 용어 중 일부는 인코딩, 선택자, Trusted Types, Web IDL, XML, XML의 네임스페이스, 그리고 XML 문서와 스타일시트 연결에 정의되어 있다. [ENCODING] [SELECTORS4] [TRUSTED-TYPES] [WEBIDL] [XML] [XML-NAMES] [XML-STYLESHEET]

확장이 필요할 때 DOM 표준은 그에 따라 업데이트할 수 있으며, 또는 새로운 표준을 작성하여 적용 가능한 명세에 대한 제공된 확장성 훅에 연결할 수 있습니다.

1.1. 트리

트리는 유한한 계층 트리 구조입니다. 트리 순서는 트리의 전위, 깊이 우선 탐색 방식입니다.

트리에 참여하는 객체는 트리 내에서 부모를 가지며, 이는 null이거나 객체입니다. 또한 자식을 가지는데, 이는 객체들의 순서가 있는 집합입니다. 객체 A의 부모가 객체 B라면, A는 B의 자식입니다.

객체의 루트는 부모가 null이면 자기 자신이고, 그렇지 않으면 부모의 루트입니다. 트리 의 루트는 해당 트리에 참여하는 객체 중 부모가 null인 객체입니다.

객체 A가 객체 B의 후손이라고 부르려면, A가 B의 자식이거나, C의 자식이면서 C가 B의 후손인 경우입니다.

포함 후손은 객체 자신 또는 그의 후손 중 하나입니다.

객체 A가 객체 B의 조상이라고 부르려면, B가 A의 후손인 경우에만 해당합니다.

포함 조상은 객체 자신 또는 그의 조상 중 하나입니다.

객체 A가 객체 B의 형제이라고 부르려면, B와 A가 동일한 null이 아닌 부모를 공유해야 합니다.

포함 형제는 객체 자신 또는 그의 형제 중 하나입니다.

객체 A가 객체 B보다 앞선 객체라고 하려면, A와 B가 동일한 트리에 있고, A가 B보다 트리 순서상 먼저 나와야 합니다.

객체 A가 객체 B의 다음 객체라고 하려면, A와 B가 동일한 트리에 있고, A가 B보다 트리 순서상 나중에 나와야 합니다.

객체의 첫 번째 자식은 첫 번째 자식이거나 자식이 없으면 null입니다.

객체의 마지막 자식은 마지막 자식이거나 자식이 없으면 null입니다.

객체의 이전 형제는 첫 번째 앞선 형제이거나, 앞선 형제가 없으면 null입니다.

객체의 다음 형제는 첫 번째 다음 형제이거나, 다음 형제가 없으면 null입니다.

객체의 인덱스는 그 객체의 앞선 형제의 개수이며, 없으면 0입니다.

1.2. 순서가 있는 집합

순서가 있는 집합 파서는 문자열 input을 받아 다음 단계들을 수행합니다:

inputTokens를 ASCII 공백 문자로 input을 분할한 결과로 설정합니다.
tokens를 새로운 순서가 있는 집합으로 설정합니다.
inputTokens의 각 token에 대해: token을 tokens에 추가합니다.
tokens를 반환합니다.

순서가 있는 집합 직렬화기는 set을 받아 U+0020 공백 문자로 set을 이어붙여 반환합니다.

1.3. 셀렉터

셀렉터 문자열 범위 일치 작업은 문자열 selectors를 노드 node에 대해 수행한다:

selector를 셀렉터 파싱 selectors의 결과로 한다. [SELECTORS4]
만약 selector가 실패라면, throw "SyntaxError" DOMException을 던진다.
셀렉터 트리 매칭을 selector와 node의 루트를 스코핑 루트 node와 함께 사용하여 그 결과를 반환한다. [SELECTORS4].

셀렉터 내 네임스페이스 지원은 계획되어 있지 않으며 추가되지 않을 예정입니다.

1.4. 이름 검증

문자열이 유효한 네임스페이스 접두사이려면, 해당 길이가 최소 1 이상이어야 하며, ASCII 공백, U+0000 NULL, U+002F (/), U+003E (>)를 포함하지 않아야 합니다.

문자열이 유효한 속성 로컬 이름이려면, 해당 길이가 최소 1 이상이어야 하며, ASCII 공백, U+0000 NULL, U+002F (/), U+003D (=), U+003E (>)를 포함하지 않아야 합니다.

문자열 name이 유효한 요소 로컬 이름이려면, 다음 단계들이 true를 반환해야 합니다:

만약 name의 길이가 0이면 false를 반환합니다.
만약 name의 0번째 코드 포인트가 ASCII 알파벳인 경우:
1. 만약 name이 ASCII 공백, U+0000 NULL, U+002F (/), U+003E (>)를 포함하면 false를 반환합니다.
2. true를 반환합니다.
만약 name의 0번째 코드 포인트가 U+003A (:), U+005F (_), 또는 U+0080~U+10FFFF 범위에 없다면 false를 반환합니다.
만약 name의 그 이후 코드 포인트들이 ASCII 알파벳, ASCII 숫자, U+002D (-), U+002E (.), U+003A (:), U+005F (_), 또는 U+0080~U+10FFFF 범위에 있지 않다면 false를 반환합니다.
true를 반환합니다.

이 개념은 DOM API로 요소 로컬 이름을 생성할 때 검증에 사용됩니다. HTML 파서로 생성할 수 있는 모든 이름(첫 번째 코드 포인트가 ASCII 알파벳인 경우)과 추가적인 가능성을 허용하려는 의도입니다. 추가적인 가능성의 경우, ASCII 범위는 역사적 이유로 제한되지만, ASCII를 넘어서는 것은 모두 허용됩니다.

다음 자바스크립트 호환 정규식은 유효한 요소 로컬 이름의 구현입니다:

/^(?:[A-Za-z][^\0\t\n\f\r\u0020/>]*|[:_\u0080-\u{10FFFF}][A-Za-z0-9-.:_\u0080-\u{10FFFF}]*)$/u

문자열은 유효한 doctype 이름입니다 만약 ASCII 공백, U+0000 NULL, 또는 U+003E (>)를 포함하지 않는 경우입니다.

빈 문자열도 유효한 doctype 이름입니다.

유효성 검사 및 추출을 위해 namespace와 qualifiedName을 context와 함께 수행합니다:

namespace가 빈 문자열이면 null로 설정합니다.
prefix를 null로 설정합니다.
localName을 qualifiedName으로 설정합니다.
qualifiedName에 U+003A (:)가 포함되어 있다면:
1. prefix를 qualifiedName에서 첫 번째 U+003A (:) 앞부분으로 설정한다.
2. localName를 qualifiedName에서 첫 번째 U+003A (:) 뒷부분으로 설정한다.
3. prefix가 유효한 네임스페이스 접두사가 아니면 예외를 발생시킨다. "InvalidCharacterError" DOMException.
Assert: prefix는 null이거나 유효한 네임스페이스 접두사입니다.
context가 "attribute"이고 localName이 유효한 속성 로컬 이름이 아니면, "InvalidCharacterError" DOMException을 throw합니다.
context가 "element"이고 localName이 유효한 요소 로컬 이름이 아니면, "InvalidCharacterError" DOMException을 throw합니다.
prefix가 null이 아니고 namespace가 null이면, "NamespaceError" DOMException을 throw합니다.
prefix가 "xml"이고 namespace가 XML 네임스페이스가 아니면, "NamespaceError" DOMException을 throw합니다.
qualifiedName 또는 prefix가 "xmlns"이고 namespace가 XMLNS 네임스페이스가 아니면, "NamespaceError" DOMException을 throw합니다.
namespace가 XMLNS 네임스페이스이고 qualifiedName과 prefix 모두 "xmlns"가 아니면, "NamespaceError" DOMException을 throw합니다.
(namespace, prefix, localName)을 반환합니다.

이 명세의 다양한 API들은 이전에는 네임스페이스 접두어, 속성 로컬 이름, 요소 로컬 이름, 그리고 doctype 이름을 더 엄격하게 검증했습니다. 이는 다양한 XML 관련 명세와 일치하는 방식이었습니다. (하지만 모든 규칙이 적용된 것은 아니었습니다.)

웹 개발자들에게 불편하게 여겨졌으며, 특히 HTML 파서로 생성할 수 있지만 DOM API로는 생성할 수 없는 이름이 존재하게 되었습니다. 그래서 위에서 설명한 수준으로 검증이 완화되었습니다.

2. 이벤트

2.1. "DOM 이벤트" 소개

웹 플랫폼 전반에서 이벤트는 객체에 디스패치되어 네트워크 활동이나 사용자 상호작용과 같은 발생을 알립니다. 이러한 객체들은 EventTarget 인터페이스를 구현하며, 따라서 이벤트 리스너를 추가해 이벤트를 관찰할 수 있습니다. addEventListener()를 호출합니다:

obj.addEventListener("load", imgFetched)

function imgFetched(ev) {
  // great success
  …
}

이벤트 리스너는 removeEventListener() 메서드를 사용해, 동일한 인자를 전달하여 제거할 수 있습니다.

또는 이벤트 리스너를 AbortSignal 을 addEventListener()에 전달하고, 시그널을 소유한 컨트롤러에서 abort()를 호출하여 제거할 수도 있습니다.

이벤트도 객체이며, Event 인터페이스(또는 파생 인터페이스)를 구현합니다. 위 예시에서 ev는 이벤트입니다. ev는 이벤트 리스너의 콜백 (일반적으로 위와 같이 자바스크립트 함수)로 전달됩니다. 이벤트 리스너는 이벤트의 type 속성 값 ("load" 위 예시)로 동작합니다. 이벤트의 target 속성 값은 이벤트가 디스패치된 객체(obj 위 예시)를 반환합니다.

일반적으로 이벤트는 사용자 에이전트가 사용자 상호작용 또는 작업 완료의 결과로 디스패치하지만, 애플리케이션도 흔히 합성 이벤트(synthetic events)라 불리는 이벤트 디스패치를 직접 할 수 있습니다:

// 적절한 이벤트 리스너 추가
obj.addEventListener("cat", function(e) { process(e.detail) })

// 이벤트 생성 및 디스패치
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

신호 전달 외에도 이벤트는 때때로 애플리케이션이 작업의 다음 단계를 제어하도록 사용되기도 합니다. 예를 들어 폼 제출 과정에서 type 속성 값이 "submit"인 이벤트가 디스패치됩니다. 만약 이 이벤트의 preventDefault() 메서드가 호출되면, 폼 제출이 중단됩니다. 애플리케이션이 합성 이벤트(디스패치된 이벤트)를 통해 이 기능을 사용하려면 dispatchEvent() 메서드의 반환값을 활용할 수 있습니다:

if(obj.dispatchEvent(event)) {
  // 이벤트가 취소되지 않았으니, 이제 뭔가 마법을 실행할 차례
  …
}

이벤트가 디스패치 될 때, 트리 에 참여 하는 객체(예: 요소)에 도달하면 그 객체의 조상에 등록된 이벤트 리스너에도 도달할 수 있습니다. 즉, 해당 객체의 포함 조상에 등록된 이벤트 리스너 중 capture가 true인 리스너가 트리 순서대로 호출됩니다. 그리고 이벤트의 bubbles 가 true이면, 해당 객체의 포함 조상 이벤트 리스너 중 capture가 false인 리스너가 이제 역순 트리 순서대로 호출됩니다.

이벤트가 트리에서 어떻게 동작하는지 예시를 살펴봅시다:

<!doctype html>
<html>
 <head>
  <title>Boring example</title>
 </head>
 <body>
  <p>Hello <span id=x>world</span>!</p>
  <script>
   function test(e) {
     debug(e.target, e.currentTarget, e.eventPhase)
   }
   document.addEventListener("hey", test, {capture: true})
   document.body.addEventListener("hey", test)
   var ev = new Event("hey", {bubbles:true})
   document.getElementById("x").dispatchEvent(ev)
  </script>
 </body>
</html>

debug 함수는 두 번 호출됩니다. 두 번 모두 이벤트의 target 속성 값은 span 요소입니다. 첫 번째는 currentTarget 속성 값이 document이고, 두 번째는 body 요소입니다. eventPhase 속성 값은 CAPTURING_PHASE 에서 BUBBLING_PHASE로 전환됩니다. 만약 span 요소에 이벤트 리스너가 등록되어 있었다면, eventPhase 속성 값은 AT_TARGET이었을 것입니다.

2.2. 인터페이스 `Event`

[Exposed=*]
interface Event {
  constructor(DOMString type, optional EventInit eventInitDict = {});

  readonly attribute DOMString type;
  readonly attribute EventTarget? target;
  readonly attribute EventTarget? srcElement; // legacy
  readonly attribute EventTarget? currentTarget;
  sequence<EventTarget> composedPath();

  const unsigned short NONE = 0;
  const unsigned short CAPTURING_PHASE = 1;
  const unsigned short AT_TARGET = 2;
  const unsigned short BUBBLING_PHASE = 3;
  readonly attribute unsigned short eventPhase;

  undefined stopPropagation();
           attribute boolean cancelBubble; // legacy alias of .stopPropagation()
  undefined stopImmediatePropagation();

  readonly attribute boolean bubbles;
  readonly attribute boolean cancelable;
           attribute boolean returnValue;  // legacy
  undefined preventDefault();
  readonly attribute boolean defaultPrevented;
  readonly attribute boolean composed;

  [LegacyUnforgeable] readonly attribute boolean isTrusted;
  readonly attribute DOMHighResTimeStamp timeStamp;

  undefined initEvent(DOMString type, optional boolean bubbles = false, optional boolean cancelable = false); // legacy
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};

Event 객체는 간단히 이벤트라고 부릅니다. 이는 어떤 일이 발생했음을 알릴 수 있도록 해줍니다. 예를 들어 이미지 다운로드가 완료되었음을 신호할 때 사용됩니다.

잠재적 이벤트 타겟은 null 또는 EventTarget 객체입니다.

이벤트는 연관된 타겟(잠재적 이벤트 타겟)을 가집니다. 별도의 언급이 없으면 null입니다.

이벤트는 연관된 relatedTarget(잠재적 이벤트 타겟)을 가집니다. 별도의 언급이 없으면 null입니다.

다른 명세들에서는 relatedTarget을 정의하기 위해 relatedTarget 속성을 사용합니다. [UIEVENTS]

이벤트는 연관된 터치 타겟 리스트(0개 이상의 잠재적 이벤트 타겟의 리스트)를 가집니다. 별도의 언급이 없으면 빈 리스트입니다.

터치 타겟 리스트는 TouchEvent 인터페이스와 관련 인터페이스 정의에만 사용됩니다. [TOUCH-EVENTS]

이벤트에는 연관된 경로가 있다. 경로는 목록이며, 이벤트 경로 항목들로 이루어진다. 이벤트 경로 항목은 구조체로, 호출 대상 (EventTarget 객체), 섀도 트리 안의 호출 대상 여부 (불리언), 섀도 조정 대상 ( 잠재적 이벤트 대상), relatedTarget ( 잠재적 이벤트 대상), 터치 대상 목록 ( 목록이며 잠재적 이벤트 대상들로 이루어짐), 닫힌 트리의 루트 여부 (불리언), 그리고 닫힌 트리 안의 슬롯 여부 ( 불리언)으로 구성된다. 경로는 처음에 빈 목록이다.

event = new Event(type [, eventInitDict]): 새로운 event를 반환하며, type 속성 값이 type으로 설정됩니다. eventInitDict 인자를 통해 bubbles와 cancelable 속성을 같은 이름의 객체 멤버로 설정할 수 있습니다.
event . type: event의 타입을 반환합니다. 예: "click", "hashchange", "submit" 등.
event . target: event가 디스패치된 객체(즉, 타겟)를 반환합니다.
event . currentTarget: 현재 실행 중인 이벤트 리스너의 콜백이 호출되는 객체를 반환합니다.
event . composedPath(): event의 호출 타겟 객체를 경로에서 반환합니다(리스너가 호출될 객체들). 단, 섀도우 트리에 속한 노드 중 섀도우 루트의 mode가 "closed"이고 event의 currentTarget에서 접근할 수 없는 경우는 제외됩니다.
event . eventPhase: event의 단계(phase)를 반환합니다. 값은 NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE 중 하나입니다.
event . stopPropagation(): 트리 내에서 디스패치될 때, 이 메서드를 호출하면 event가 현재 객체 외 다른 객체에는 도달하지 못하게 합니다.
event . stopImmediatePropagation(): 이 메서드를 호출하면 현재 리스너 실행 이후 등록된 이벤트 리스너에는 도달하지 않으며, 트리 내 디스패치 중이면 다른 객체에도 도달하지 않습니다.
event . bubbles: event가 어떻게 초기화되었는지에 따라 true 또는 false를 반환합니다. true라면 event가 타겟의 조상을 역순 트리 순서로 거칩니다. 아니면 false입니다.
event . cancelable: event가 어떻게 초기화되었는지에 따라 true 또는 false를 반환합니다. 반환값은 항상 의미가 있진 않지만, true인 경우 event가 디스패치된 작업의 일부를 preventDefault() 호출로 취소할 수 있음을 나타냅니다.
event . preventDefault(): cancelable 속성 값이 true이고 event의 리스너 실행 중 passive가 false로 설정되어 있으면, event를 디스패치하게 한 작업에 취소 신호를 보냅니다.
event . defaultPrevented: preventDefault()가 성공적으로 호출되어 취소되었음을 나타내면 true, 아니면 false를 반환합니다.
event . composed: event 가 초기화된 방식에 따라 true 또는 false를 반환합니다. event 의 타겟 의 루트 인 ShadowRoot 노드 를 넘어 event 가 리스너를 호출하면 true이고, 그렇지 않으면 false입니다.
event . isTrusted: event가 사용자 에이전트에 의해 디스패치되면 true, 그렇지 않으면 false입니다.
event . timeStamp: event의 타임스탬프를 반환하며, 발생 시점을 기준으로 측정된 밀리초 단위 숫자입니다.

type 속성은 초기화된 값을 반환해야 합니다. 이벤트가 생성될 때 이 속성은 빈 문자열로 초기화되어야 합니다.

target getter 단계는 this의 target을 반환합니다.

srcElement getter 단계는 this의 target을 반환합니다.

currentTarget 속성은 초기화된 값을 반환해야 합니다. 이벤트가 생성될 때 이 속성은 null로 초기화되어야 합니다.

composedPath() 메서드 단계는 다음과 같다:

composedPath를 빈 목록으로 둔다.
path를 this의 경로로 둔다.
path가 비어 있으면, composedPath를 반환한다.
currentTarget를 this의 currentTarget 속성 값으로 둔다.
단언한다: currentTarget는 EventTarget 객체이다.
currentTarget를 composedPath에 추가한다.
currentTargetIndex를 0으로 둔다.
currentTargetHiddenSubtreeLevel을 0으로 둔다.
index를 path의 크기 − 1로 둔다.
index가 0보다 크거나 같은 동안:
1. path[index]의 root-of-closed-tree가 true이면, currentTargetHiddenSubtreeLevel을 1 증가시킨다.
2. path[index]의 호출 대상이 currentTarget이면, currentTargetIndex를 index로 설정하고 중단한다.
3. path[index]의 slot-in-closed-tree가 true이면, currentTargetHiddenSubtreeLevel을 1 감소시킨다.
4. index를 1 감소시킨다.
currentHiddenLevel과 maxHiddenLevel을 currentTargetHiddenSubtreeLevel로 둔다.
index를 currentTargetIndex − 1로 설정한다.
index가 0보다 크거나 같은 동안:
1. path[index]의 root-of-closed-tree가 true이면, currentHiddenLevel을 1 증가시킨다.
2. currentHiddenLevel이 maxHiddenLevel보다 작거나 같으면, path[index]의 호출 대상을 composedPath의 앞에 삽입한다.
3. path[index]의 slot-in-closed-tree가 true이면:
  1. currentHiddenLevel을 1 감소시킨다.
  2. currentHiddenLevel이 maxHiddenLevel보다 작으면, maxHiddenLevel을 currentHiddenLevel로 설정한다.
4. index를 1 감소시킨다.
currentHiddenLevel과 maxHiddenLevel을 currentTargetHiddenSubtreeLevel로 설정한다.
index를 currentTargetIndex + 1로 설정한다.
index가 path의 크기보다 작은 동안:
1. path[index]의 slot-in-closed-tree가 true이면, currentHiddenLevel을 1 증가시킨다.
2. currentHiddenLevel이 maxHiddenLevel보다 작거나 같으면, path[index]의 호출 대상을 composedPath에 추가한다.
3. path[index]의 root-of-closed-tree가 true이면:
  1. currentHiddenLevel을 1 감소시킨다.
  2. currentHiddenLevel이 maxHiddenLevel보다 작으면, maxHiddenLevel을 currentHiddenLevel로 설정한다.
4. index를 1 증가시킨다.
composedPath를 반환한다.

eventPhase 속성은 초기화된 값을 반환해야 하며, 다음 중 하나여야 합니다:

NONE (숫자값 0): 현재 디스패치되지 않은 이벤트는 이 단계에 있습니다.
CAPTURING_PHASE (숫자값 1): 트리 에 참여 하는 객체로 이벤트 가 디스패치 되면, 이벤트가 자신의 타겟 에 도달하기 전에 이 단계에 있습니다.
AT_TARGET (숫자값 2): 이벤트가 디스패치되어 타겟에 도달했을 때 이 단계에 있습니다.
BUBBLING_PHASE (숫자값 3): 트리 에 참여 하는 객체로 이벤트 가 디스패치 되면, 이벤트가 자신의 타겟 에 도달하기 후에 이 단계에 있습니다.

초기에는 속성이 NONE으로 초기화되어야 합니다.

각 이벤트는 다음과 같은 연관 플래그를 가지며, 모두 처음에는 해제 상태입니다:

전파 중단 플래그(stop propagation flag)
즉시 전파 중단 플래그(stop immediate propagation flag)
취소됨 플래그(canceled flag)
패시브 리스너 플래그(in passive listener flag)
composed 플래그
초기화됨 플래그(initialized flag)
디스패치 플래그(dispatch flag)

stopPropagation() 메서드 단계는 this의 전파 중단 플래그를 설정하는 것입니다.

cancelBubble getter 단계는 this의 전파 중단 플래그가 설정되어 있으면 true, 아니면 false를 반환합니다.

cancelBubble setter 단계는, 주어진 값이 true인 경우 this의 전파 중단 플래그를 설정하고, 아니면 아무 것도 하지 않습니다.

stopImmediatePropagation() 메서드 단계는 this의 전파 중단 플래그와 this의 즉시 전파 중단 플래그를 설정합니다.

bubbles와 cancelable 속성은 초기화된 값을 반환해야 합니다.

취소 플래그 설정은 이벤트 event를 받아서, event의 cancelable 속성이 true이고 event의 패시브 리스너 플래그가 해제되어 있다면 event의 취소됨 플래그를 설정하고, 아니면 아무 것도 하지 않습니다.

returnValue getter 단계는 this의 취소됨 플래그가 설정되어 있으면 false, 아니면 true를 반환합니다.

returnValue setter 단계는, 주어진 값이 false이면 취소 플래그 설정을 this에 대해 실행하고, 아니면 아무 것도 하지 않습니다.

preventDefault() 메서드 단계는 취소 플래그 설정을 this에 대해 실행하는 것입니다.

preventDefault()를 호출해도 아무 효과가 없는 상황이 있을 수 있습니다. 사용자 에이전트는 이러한 원인을 개발자 콘솔에 정확하게 기록해 디버깅을 돕는 것이 권장됩니다.

defaultPrevented getter 단계는 this의 취소됨 플래그가 설정되어 있으면 true, 아니면 false를 반환합니다.

composed getter 단계는 this의 composed 플래그가 설정되어 있으면 true, 아니면 false를 반환합니다.

isTrusted 속성은 초기화된 값을 반환해야 합니다. 이벤트가 생성될 때 이 속성은 false로 초기화되어야 합니다.

isTrusted는 이벤트가 사용자 에이전트에 의해 디스패치되었는지(즉 dispatchEvent()를 사용한 경우가 아닌지) 편리하게 알 수 있게 해줍니다. 유일한 레거시 예외는 click()이며, 이는 사용자 에이전트가 이벤트를 디스패치할 때 isTrusted 속성을 false로 초기화하게 만듭니다.

timeStamp 속성은 초기화된 값을 반환해야 합니다.

이벤트 초기화(initialize)를 event에 대해, type, bubbles, cancelable와 함께 수행하려면 다음 단계들을 실행합니다:

event의 초기화됨 플래그를 설정합니다.
event의 전파 중단 플래그, 즉시 전파 중단 플래그, 취소됨 플래그를 해제합니다.
event의 isTrusted 속성을 false로 설정합니다.
event의 target을 null로 설정합니다.
event의 type 속성을 type으로 설정합니다.
event의 bubbles 속성을 bubbles로 설정합니다.
event의 cancelable 속성을 cancelable로 설정합니다.

initEvent(type, bubbles, cancelable) 메서드 단계는 다음과 같습니다:

this의 디스패치 플래그가 설정되어 있다면 return 합니다.
초기화를 this에 type, bubbles, cancelable로 실행합니다.

initEvent()는 이벤트 생성자와 중복되며 composed 속성을 설정할 수 없습니다. 레거시 콘텐츠 지원을 위해 반드시 구현되어야 합니다.

2.3. `Window` 인터페이스에 대한 레거시 확장

partial interface Window {
  [Replaceable] readonly attribute (Event or undefined) event; // legacy
};

각 Window 객체는 연관된 현재 이벤트(current event)(undefined 또는 Event 객체)을 가집니다. 별도 언급이 없으면 undefined입니다.

event getter 단계는 this의 현재 이벤트를 반환합니다.

웹 개발자는 이벤트 리스너에 전달되는 Event 객체를 사용하는 것이 더 이식성 높은 코드를 작성할 수 있으므로 이를 권장합니다. 이 속성은 worker나 worklet에서는 사용할 수 없으며, 섀도우 트리에서 디스패치된 이벤트에는 정확하지 않습니다.

2.4. 인터페이스 `CustomEvent`

[Exposed=*]
interface CustomEvent : Event {
  constructor(DOMString type, optional CustomEventInit eventInitDict = {});

  readonly attribute any detail;

  undefined initCustomEvent(DOMString type, optional boolean bubbles = false, optional boolean cancelable = false, optional any detail = null); // legacy
};

dictionary CustomEventInit : EventInit {
  any detail = null;
};

이벤트는 CustomEvent 인터페이스를 사용해 커스텀 데이터를 전달할 수 있습니다.

event = new CustomEvent(type [, eventInitDict]): Event의 생성자와 유사하게 동작하지만, eventInitDict 인자를 통해 detail 속성도 설정할 수 있습니다.
event . detail: event가 생성될 때 포함된 커스텀 데이터를 반환합니다. 주로 합성 이벤트에서 사용됩니다.

detail 속성은 초기화된 값을 반환해야 합니다.

initCustomEvent(type, bubbles, cancelable, detail) 메서드 단계는 다음과 같습니다:

this의 디스패치 플래그가 설정되어 있으면 return 합니다.
초기화를 this에 type, bubbles, cancelable로 실행합니다.
this의 detail 속성을 detail로 설정합니다.

2.5. 이벤트 생성

명세는 모든 또는 일부 이벤트에 대해 이벤트 생성 단계를 정의할 수 있습니다. 이 알고리즘은 event event와 EventInit eventInitDict를 내부 이벤트 생성 단계에서 넘겨받습니다.

이 구조는 초기화용 딕셔너리 멤버와 IDL 속성 간 1:1 대응이 아닌 더 복잡한 구조를 가진 Event 서브클래스에서 사용할 수 있습니다.

Event 인터페이스 또는 Event 인터페이스를 상속한 인터페이스의 생성자가 호출될 때, type과 eventInitDict 인자를 받아 다음 단계들을 실행해야 합니다:

event를 이 인터페이스, null, now, eventInitDict로 내부 이벤트 생성 단계를 실행한 결과로 설정합니다.
event의 type 속성을 type으로 초기화합니다.
event를 반환합니다.

eventInterface를 사용하여 이벤트 생성을 하려면, eventInterface는 Event이거나 이를 상속한 인터페이스여야 하며, 선택적으로 realm realm을 받아 다음 단계들을 실행합니다:

realm이 주어지지 않았다면 null로 설정합니다.
dictionary를 JavaScript 값 undefined를 eventInterface의 생성자가 받아들이는 딕셔너리 타입으로 변환한 결과로 설정합니다. (이 딕셔너리 타입은 EventInit 또는 이를 상속한 딕셔너리입니다.)

멤버가 필수일 때는 동작하지 않습니다. whatwg/dom#600 참조.
event를 eventInterface, realm, 이벤트가 신호하는 발생 시각, dictionary로 내부 이벤트 생성 단계를 실행한 결과로 설정합니다.

macOS에서는 입력 동작 발생 시각이 timestamp 속성을 통해 NSEvent 객체에서 제공됩니다.
event의 isTrusted 속성을 true로 초기화합니다.
event를 반환합니다.

이벤트 생성은 단순히 이벤트 발생이 아닌, 다른 명세에서 이벤트를 개별적으로 생성하고 디스패치해야 할 때 사용됩니다. 이 과정은 이벤트의 속성이 올바른 기본값으로 초기화되도록 보장합니다.

내부 이벤트 생성 단계는 eventInterface, realm, time, dictionary를 받아 다음과 같이 실행됩니다:

event를 eventInterface를 사용하여 새 객체를 생성한 결과로 설정합니다. realm이 null이 아니면 해당 realm을 사용하고, 그렇지 않으면 Web IDL에서 정의된 기본 동작을 사용합니다.

작성 시점 기준 Web IDL은 아직 기본 동작을 정의하지 않았음. whatwg/webidl#135 참조.
event의 초기화됨 플래그를 설정합니다.
event의 timeStamp 속성을 time과 event의 관련 글로벌 객체를 이용한 상대 고해상도 근사 시간으로 초기화합니다.
dictionary의 각 멤버 member → value에 대해: event에 identifier가 member인 속성이 있다면 해당 속성을 value로 초기화합니다.
이벤트 생성 단계를 event와 dictionary로 실행합니다.
event를 반환합니다.

2.6. 이벤트 인터페이스 정의

일반적으로 Event를 상속하는 새로운 인터페이스를 정의할 때는 반드시 WHATWG 또는 W3C WebApps WG 커뮤니티에 피드백을 요청하세요.

CustomEvent 인터페이스를 시작점으로 사용할 수 있습니다. 하지만 init*Event()와 같은 메서드는 생성자와 중복되므로 도입하지 마세요. Event 인터페이스를 상속한 인터페이스 중 이런 메서드를 가진 경우는 오직 역사적 이유 때문입니다.

2.7. 인터페이스 `EventTarget`

[Exposed=*]
interface EventTarget {
  constructor();

  undefined addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options = {});
  undefined removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options = {});
  boolean dispatchEvent(Event event);
};

callback interface EventListener {
  undefined handleEvent(Event event);
};

dictionary EventListenerOptions {
  boolean capture = false;
};

dictionary AddEventListenerOptions : EventListenerOptions {
  boolean passive;
  boolean once = false;
  AbortSignal signal;
};

EventTarget 객체는 어떤 일이 발생했을 때 event를 디스패치할 수 있는 타겟을 나타냅니다.

각 EventTarget 객체는 연관된 이벤트 리스너 목록(리스트로, 0개 이상의 이벤트 리스너를 포함)을 가집니다. 초기에는 빈 리스트입니다.

이벤트 리스너 는 특정 event를 관찰하는 데 사용되며 다음으로 구성됩니다:

type (문자열)
callback (null 또는 EventListener 객체)
capture (불리언, 초기값 false)
passive (null 또는 불리언, 초기값 null)
once (불리언, 초기값 false)
signal (null 또는 AbortSignal 객체)
removed (기록용 불리언, 초기값 false)

callback은 EventListener 객체이지만, 이벤트 리스너는 위에서 볼 수 있듯 더 넓은 개념입니다.

각 EventTarget 객체는 또한 연관된 get the parent 알고리즘을 가지며, 이는 event event를 받아 EventTarget 객체를 반환합니다. 별도 언급이 없으면 null을 반환합니다.

노드, 섀도우 루트 및 문서는 get the parent 알고리즘을 재정의합니다.

각 EventTarget 객체는 연관된 활성화 동작(activation behavior) 알고리즘을 가질 수 있습니다. 활성화 동작 알고리즘은 event를 받아 디스패치 알고리즘에서 실행됩니다.

이는 사용자 에이전트가 특정 EventTarget 객체(예: area 요소)에 대해 합성 MouseEvent 이벤트의 type 속성이 click일 때 특정 동작을 수행하기 때문입니다. 웹 호환성 때문에 제거할 수 없었으며, 이제는 활성화를 정의하는 공식적인 방법으로 간주됩니다. [HTML]

활성화 동작을 가진 EventTarget 객체는 추가로 레거시 사전 활성화 동작 알고리즘과 레거시 취소된 활성화 동작 알고리즘 두 개를 모두 가질 수 있습니다.

이 알고리즘은 체크박스 및 라디오 input 요소에만 존재하며, 다른 용도로 사용되어서는 안 됩니다. [HTML]

target = new EventTarget();

새로운 EventTarget 객체를 생성하며, 개발자가 디스패치하고 이벤트를 수신하는 데 사용할 수 있습니다.

target . addEventListener(type, callback [, options])

이벤트 리스너를 이벤트의 type 속성값이 type인 경우에 대해 추가합니다. callback 인자는 callback을 설정하며, 이는 이벤트가 디스패치될 때 호출됩니다.

options 인자는 리스너별 옵션을 설정합니다. 호환성을 위해 이는 불리언일 수 있으며, 이 경우 메서드는 options의 capture로 지정된 값처럼 동작합니다.

만약 options의 capture가 true로 설정되면, callback은 이벤트의 eventPhase 속성값이 BUBBLING_PHASE일 때 호출되지 않습니다. false (또는 지정되지 않은 경우)에는 callback은 이벤트의 eventPhase 속성값이 CAPTURING_PHASE일 때 호출되지 않습니다. 어느 경우든, callback은 이벤트의 eventPhase 속성값이 AT_TARGET일 때 호출됩니다.

만약 options의 passive가 true로 설정되면, callback은 preventDefault()를 호출하여 이벤트를 취소하지 않습니다. 이는 § 2.8 이벤트 리스너 관찰에 설명된 성능 최적화를 가능하게 합니다.

만약 options의 once가 true로 설정되면, callback은 한 번만 호출되며, 그 후 이벤트 리스너는 제거됩니다.

만약 options의 signal에 AbortSignal이 전달되면, signal이 중단될 때 이벤트 리스너는 제거됩니다.

해당 이벤트 리스너는 target의 이벤트 리스너 목록에 추가되며, 동일한 type, callback, 및 capture를 가진 경우에는 추가되지 않습니다.

target . removeEventListener(type, callback [, options])

target의 이벤트 리스너 목록에서 동일한 type, callback, options를 가진 이벤트 리스너를 제거합니다.

target . dispatchEvent(event)

합성 이벤트 event를 target에 디스패치하며, event의 cancelable 속성값이 false이거나, preventDefault() 메서드가 호출되지 않은 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.

options를 평탄화(flatten)하려면, 다음 단계를 실행합니다:

options가 불리언이면, options를 반환합니다.
options["capture"]를 반환합니다.

options를 더 평탄화(flatten more)하려면, 다음 단계를 실행합니다:

capture를 평탄화(flatten) options의 결과로 설정합니다.
once를 false로 설정합니다.
passive와 signal을 null로 설정합니다.
options가 딕셔너리(dictionary)인 경우:
1. once를 options["once"]로 설정합니다.
2. options["passive"] 존재하는 경우, passive를 options["passive"]로 설정합니다.
3. options["signal"] 존재하는 경우, signal을 options["signal"]로 설정합니다.
capture, passive, once, signal을 반환합니다.

new EventTarget() 생성자의 단계는 아무것도 하지 않습니다.

다른 곳에서 명시된 기본값 때문에, 반환된 EventTarget의 get the parent 알고리즘은 null을 반환하며, 활성화 동작, 레거시 사전 활성화 동작, 또는 레거시 취소된 활성화 동작을 가지지 않습니다.

향후 사용자 지정 get the parent 알고리즘을 허용할 수 있다. 이것이 유용하다면 이슈 #583을 지원하라. 현재는 모든 작성자가 생성한 EventTarget은 트리 구조에 참여하지 않는다.

기본 passive 값은 이벤트 타입 type과 EventTarget eventTarget이 주어졌을 때 다음과 같이 결정됩니다:

다음 조건이 모두 참이라면 true를 반환합니다:
- type이 "touchstart", "touchmove", "wheel" 또는 "mousewheel" 중 하나입니다. [TOUCH-EVENTS] [UIEVENTS]
- eventTarget이 Window 객체이거나, 노드(node)이고, 해당 노드 문서가 eventTarget인 경우이거나, 노드이고, 해당 노드 문서의 문서 요소가 eventTarget인 경우, 또는 노드이고, 해당 노드 문서의 body 요소가 eventTarget인 경우. [HTML]
false를 반환합니다.

EventTarget 객체 eventTarget과 이벤트 리스너 listener가 주어졌을 때 이벤트 리스너 추가를 수행하려면 다음 단계를 실행합니다:

만약 eventTarget이 ServiceWorkerGlobalScope 객체이고, 해당 서비스 워커의 스크립트 리소스의 평가된 적 있음 플래그가 설정되어 있고, listener의 type이 서비스 워커 이벤트 중 하나의 type 속성값 중 하나와 일치한다면, 예상한 결과를 얻지 못할 수 있다고 콘솔에 경고를 출력합니다. [SERVICE-WORKERS]
만약 listener의 signal이 null이 아니고 aborted라면, return한다.
만약 listener의 callback이 null이라면, 종료합니다.
만약 listener의 passive가 null이라면, listener의 type과 eventTarget을 기반으로 기본 passive 값으로 설정합니다.
eventTarget 의 이벤트 리스너 목록 이 type 이 listener 의 type 과 같고, callback 이 listener 의 callback 과 같으며, capture 가 listener 의 capture 와 같은 이벤트 리스너 를 포함하지 않으면 listener 를 eventTarget 의 이벤트 리스너 목록 에 추가 합니다.
만약 listener의 signal이 null이 아니라면, 다음 중단 단계를 추가합니다:
1. 이벤트 리스너 제거를 eventTarget과 listener를 사용하여 실행합니다.

이 이벤트 리스너 추가 개념은 이벤트 핸들러가 동일한 코드 경로를 사용하도록 보장하기 위해 존재합니다. [HTML]

addEventListener(type, callback, options) 메서드 단계는 다음과 같습니다:

capture, passive, once, signal을 더 평탄화(flattening more) options의 결과로 설정합니다.
이벤트 리스너 추가를 this와 다음 속성을 가진 이벤트 리스너로 실행합니다: type은 type, callback은 callback, capture는 capture, passive는 passive, once는 once, signal은 signal.

이벤트 리스너 제거를 EventTarget 객체 eventTarget과 이벤트 리스너 listener를 사용하여 실행하려면 다음 단계를 수행합니다:

eventTarget이 ServiceWorkerGlobalScope 객체이고, 해당 서비스 워커의 처리할 이벤트 타입 집합이 listener의 type을 포함한다면, 콘솔에 경고를 출력합니다. [SERVICE-WORKERS]
listener의 제거됨 플래그를 true로 설정하고, 제거합니다. listener를 eventTarget의 이벤트 리스너 목록에서 제거합니다.

HTML 명세에서는 이 기능을 이벤트 핸들러 정의에 사용합니다. [HTML]

모든 이벤트 리스너 제거를 EventTarget 객체 eventTarget를 사용하여 실행하려면: 각 listener에 대해 eventTarget의 이벤트 리스너 목록에서: 이벤트 리스너 제거를 실행합니다.

HTML 명세에서는 이 기능을 document.open() 정의에 사용합니다. [HTML]

removeEventListener(type, callback, options) 메서드 단계는 다음과 같습니다:

capture를 평탄화(flattening) options의 결과로 설정합니다.
this 의 이벤트 리스너 목록 이 type 이 type 과 같고, callback 이 callback 과 같으며, capture 가 capture 와 같은 이벤트 리스너 를 포함 하면 this 와 해당 이벤트 리스너 를 인자로 이벤트 리스너 제거 를 실행합니다.

이벤트 리스너 목록은 동일한 type, callback, capture 값을 가진 여러 이벤트 리스너를 포함하지 않습니다. 이는 이벤트 리스너 추가가 이를 방지하기 때문입니다.

dispatchEvent(event) 메서드의 단계는 다음과 같습니다:

event의 디스패치 플래그가 설정되어 있거나, 초기화 플래그가 설정되어 있지 않으면, "InvalidStateError" DOMException을 throw합니다.
event의 isTrusted 속성을 false로 초기화합니다.
event를 디스패치하고, this로 디스패치한 결과를 반환합니다.

2.8. 이벤트 리스너 관찰

일반적으로 개발자는 이벤트 리스너의 존재가 관찰 가능한 것으로 기대하지 않습니다. 이벤트 리스너의 영향은 콜백에 의해 결정됩니다. 즉, 개발자가 아무런 동작을 하지 않는 이벤트 리스너를 추가하더라도 부작용이 없을 것으로 기대합니다.

불행히도, 일부 이벤트 API는 효율적으로 구현하기 위해 이벤트 리스너를 관찰해야만 하는 방식으로 설계되었습니다. 이는 리스너의 존재를 관찰 가능하게 만들며, 심지어 빈 리스너조차도 응용 프로그램의 동작에 극적인 성능 영향을 미칠 수 있습니다. 예를 들어, 비동기 스크롤링을 차단할 수 있는 터치 및 휠 이벤트가 있습니다. 어떤 경우에는 이벤트가 적어도 하나의 비-패시브(passive) 리스너가 있을 때만 취소 가능(cancelable) 하도록 지정함으로써 이 문제를 완화할 수 있습니다. 예를 들어, 비-패시브(passive) TouchEvent 리스너는 스크롤링을 차단해야 하지만, 모든 리스너가 패시브(passive) 라면, TouchEvent 를 취소 불가능하게 만들어 스크롤링을 병렬로 시작할 수 있게 할 수 있습니다 (즉, preventDefault() 호출을 무시). 따라서 이벤트를 디스패치하는 코드는 비-패시브(passive) 리스너가 없는 것을 관찰하고, 이를 사용하여 디스패치되는 이벤트의 취소 가능(cancelable) 속성을 지울 수 있습니다.

이상적으로는, 새로운 이벤트 API는 이러한 특성을 필요로 하지 않도록 정의되어야 합니다. (whatwg/dom에서 논의에 참여하세요.)

레거시-서비스 워커 fetch 이벤트 리스너 콜백 얻기를 ServiceWorkerGlobalScope global을 사용하여 실행하려면 다음 단계를 따릅니다. 이 단계는 리스트를 반환하며, EventListener 객체를 포함합니다.

callbacks를 « »로 둔다.
각각 global의 event listener list에 있는 listener에 대해: listener의 type이 "fetch"이고 listener의 callback이 null이 아니면, append listener의 callback을 callbacks에 추가한다.
callbacks를 반환한다.

2.9. 이벤트 디스패치

선택적 legacy target override flag 및 선택적 legacyOutputDidListenersThrowFlag와 함께 이벤트 event를 EventTarget 객체 target에 디스패치하려면:

event의 디스패치 플래그를 설정한다.
legacy target override flag가 주어지지 않았다면 targetOverride를 target으로 두고, 그렇지 않다면 target의 연관된 Document로 둔다. [HTML]

legacy target override flag는 HTML에서만 사용되며, target이 Window 객체일 때에만 사용된다.
activationTarget을 null로 둔다.
relatedTarget을 event의 relatedTarget을 target에 대해 리타기팅한 결과로 둔다.
clearTargets를 false로 둔다.
target이 relatedTarget이 아니거나 target이 event의 relatedTarget이라면:
1. touchTargets를 새 목록으로 둔다.
2. event의 터치 대상 목록의 각 touchTarget에 대해: touchTarget을 target에 대해 리타기팅한 결과를 touchTargets에 추가한다.
3. event, target, targetOverride, relatedTarget, touchTargets 및 false로 이벤트 경로에 추가한다.
4. event가 MouseEvent 객체이고 event의 type 속성이 "click"이라면 isActivationEvent를 true로 두고, 그렇지 않다면 false로 둔다.
5. isActivationEvent가 true이고 target에 활성화 동작이 있다면 activationTarget을 target으로 설정한다.
6. target이 슬롯 가능 객체이고 할당되어 있다면 slottable을 target으로 두고, 그렇지 않다면 null로 둔다.
7. slotInClosedTree를 false로 둔다.
8. parent를 target의 부모 가져오기를 event와 함께 호출한 결과로 둔다.
9. parent가 non-null인 동안:
  1. slottable이 non-null이라면:
    1. 단언: parent는 슬롯이다.
    2. slottable을 null로 설정한다.
    3. parent의 루트가 shadow root이고 그 모드가 "closed"라면, slotInClosedTree를 true로 설정한다.
  2. parent가 슬롯 가능 객체이고 할당되어 있다면 slottable을 parent로 설정한다.
  3. relatedTarget을 event의 relatedTarget을 parent에 대해 리타기팅한 결과로 둔다.
  4. touchTargets를 새 목록으로 둔다.
  5. event의 터치 대상 목록의 각 touchTarget에 대해: touchTarget을 parent에 대해 리타기팅한 결과를 touchTargets에 추가한다.
  6. parent가 Window 객체이거나, parent가 노드이고 target의 루트가 parent의 shadow-including 포괄 조상이라면:
    1. isActivationEvent가 true이고, event의 bubbles 속성이 true이고, activationTarget이 null이며, parent에 활성화 동작이 있다면 activationTarget을 parent로 설정한다.
    2. event, parent, null, relatedTarget, touchTargets 및 slotInClosedTree로 이벤트 경로에 추가한다.
  7. 그렇지 않고 parent가 relatedTarget이라면, parent를 null로 설정한다.
  8. 그렇지 않다면:
    1. target을 parent로 설정한다.
    2. isActivationEvent가 true이고, activationTarget이 null이며 target에 활성화 동작이 있다면 activationTarget을 target으로 설정한다.
    3. event, parent, target, relatedTarget, touchTargets 및 slotInClosedTree로 이벤트 경로에 추가한다.
  9. parent가 non-null이라면, parent를 parent의 부모 가져오기를 event와 함께 호출한 결과로 설정한다.
  10. slotInClosedTree를 false로 설정한다.
10. clearTargetsItem을 event의 경로에서 shadow-adjusted target이 non-null인 마지막 이벤트 경로 항목으로 둔다.
11. clearTargetsItem의 shadow-adjusted target, clearTargetsItem의 relatedTarget, 또는 clearTargetsItem의 터치 대상 목록 안의 EventTarget 객체가 노드이고 그 루트가 shadow root라면: clearTargets를 true로 설정한다.
12. activationTarget이 non-null이고 activationTarget에 레거시-사전-활성화 동작이 있다면, activationTarget의 레거시-사전-활성화 동작을 실행한다.
13. event의 경로의 각 item에 대해, 역순으로:
  1. item의 shadow-adjusted target이 non-null이라면, event의 eventPhase 속성을 AT_TARGET으로 설정한다.
  2. 그렇지 않다면, event의 eventPhase 속성을 CAPTURING_PHASE로 설정한다.
  3. item, event, "capturing" 및 주어진 경우 legacyOutputDidListenersThrowFlag로 호출한다.
14. event의 경로의 각 item에 대해:
  1. item의 shadow-adjusted target이 non-null이라면, event의 eventPhase 속성을 AT_TARGET으로 설정한다.
  2. 그렇지 않다면:
    1. event의 bubbles 속성이 false라면 계속한다.
    2. event의 eventPhase 속성을 BUBBLING_PHASE로 설정한다.
  3. item, event, "bubbling" 및 주어진 경우 legacyOutputDidListenersThrowFlag로 호출한다.
event의 eventPhase 속성을 NONE으로 설정한다.
event의 currentTarget 속성을 null로 설정한다.
event의 경로를 빈 목록으로 설정한다.
event의 디스패치 플래그, 전파 중지 플래그 및 즉시 전파 중지 플래그를 해제한다.
clearTargets가 true라면:
1. event의 target을 null로 설정한다.
2. event의 relatedTarget을 null로 설정한다.
3. event의 터치 대상 목록을 빈 목록으로 설정한다.
activationTarget이 non-null이라면:
1. event의 취소됨 플래그가 해제되어 있다면, activationTarget의 활성화 동작을 event와 함께 실행한다.
2. 그렇지 않고 activationTarget에 레거시-취소됨-활성화 동작이 있다면, activationTarget의 레거시-취소됨-활성화 동작을 실행한다.
event의 취소됨 플래그가 설정되어 있다면 false를 반환하고, 그렇지 않다면 true를 반환한다.

이벤트 event, EventTarget 객체 invocationTarget, 잠재적 이벤트 대상 shadowAdjustedTarget, 잠재적 이벤트 대상 relatedTarget, 목록인 잠재적 이벤트 대상들 touchTargets 및 boolean slotInClosedTree가 주어졌을 때, 이벤트 경로에 추가하려면:

invocationTargetInShadowTree를 false로 둔다.
invocationTarget이 노드이고 그 루트가 shadow root라면, invocationTargetInShadowTree를 true로 설정한다.
rootOfClosedTree를 false로 둔다.
invocationTarget이 shadow root이고 그 모드가 "closed"라면, rootOfClosedTree를 true로 설정한다.
새 이벤트 경로 항목을 event의 경로에 추가한다. 이 항목의 호출 대상은 invocationTarget, invocation-target-in-shadow-tree는 invocationTargetInShadowTree, shadow-adjusted target은 shadowAdjustedTarget, relatedTarget은 relatedTarget, 터치 대상 목록은 touchTargets, root-of-closed-tree는 rootOfClosedTree, 그리고 slot-in-closed-tree는 slotInClosedTree이다.

이벤트 경로 항목 pathItem, 이벤트 event, 문자열 phase 및 선택적 legacyOutputDidListenersThrowFlag가 주어졌을 때, 호출하려면:

targetItem을 pathItem으로 둔다.
targetItem의 shadow-adjusted target이 null인 동안: targetItem을 event의 경로에서 targetItem 앞에 오는 이벤트 경로 항목으로 설정한다.
event의 target을 targetItem의 shadow-adjusted target으로 설정한다.
event의 relatedTarget을 pathItem의 relatedTarget으로 설정한다.
event의 터치 대상 목록을 pathItem의 터치 대상 목록으로 설정한다.
event의 전파 중지 플래그가 설정되어 있다면 반환한다.
event의 currentTarget 속성을 pathItem의 호출 대상으로 초기화한다.
listeners를 event의 currentTarget 속성 값의 이벤트 리스너 목록의 복제본으로 둔다.

이는 이 시점 이후에 추가된 이벤트 리스너가 실행되는 것을 방지한다. 제거는 여전히 removed 필드 때문에 효과가 있음에 유의한다.
invocationTargetInShadowTree를 pathItem의 invocation-target-in-shadow-tree로 둔다.
found를 event, listeners, phase, invocationTargetInShadowTree 및 주어진 경우 legacyOutputDidListenersThrowFlag로 내부 호출을 실행한 결과로 둔다.

found가 false이고 event의 isTrusted 속성이 true라면:

originalEventType을 event의 type 속성 값으로 둔다.

event의 type 속성 값이 다음 표의 첫 번째 열에 있는 문자열 중 어느 것과 일치한다면, event의 type 속성 값을 일치하는 문자열과 같은 행의 두 번째 열에 있는 문자열로 설정하고, 그렇지 않다면 반환한다.

이벤트 유형	레거시 이벤트 유형
"`animationend`"	"`webkitAnimationEnd`"
"`animationiteration`"	"`webkitAnimationIteration`"
"`animationstart`"	"`webkitAnimationStart`"
"`transitionend`"	"`webkitTransitionEnd`"

event, listeners, phase, invocationTargetInShadowTree 및 주어진 경우 legacyOutputDidListenersThrowFlag로 내부 호출한다.
event의 type 속성 값을 originalEventType으로 설정한다.

내부 호출을 수행하려면, 주어진 이벤트 event, 목록인 이벤트 리스너 listeners, 문자열 phase, 불리언 invocationTargetInShadowTree, 그리고 선택적 legacyOutputDidListenersThrowFlag가 주어졌을 때 다음 단계를 수행합니다:

found를 false로 둡니다.
listeners의 각 listener에 대해, 그 removed가 false인 경우:
1. event의 type 속성 값이 listener의 type이 아니면 계속합니다.
2. found를 true로 설정합니다.
3. phase가 "capturing"이고 listener의 capture가 false이면 계속합니다.
4. phase가 "bubbling"이고 listener의 capture가 true이면 계속합니다.
5. listener의 once가 true이면, 주어진 event의 currentTarget 속성 값과 listener에 대해 이벤트 리스너를 제거합니다.
6. targetGlobal을 event의 currentTarget이 노드인 경우 해당 currentTarget의 노드 문서의 관련 전역 객체로 설정하고, 그렇지 않으면 event의 currentTarget의 관련 전역 객체로 설정합니다.
7. listenerGlobal을 listener 콜백의 연결된 Realm의 전역 객체로 둡니다.
8. targetGlobal 또는 listenerGlobal이 Window 객체이고 그 연결된 Document가 완전히 활성 상태가 아니면 계속합니다.
9. currentEvent를 undefined로 둡니다.
10. listenerGlobal이 Window 객체인 경우:
  1. currentEvent를 listenerGlobal의 현재 이벤트로 설정합니다.
  2. invocationTargetInShadowTree가 false이면 listenerGlobal의 현재 이벤트를 event로 설정합니다.
11. listener의 passive가 true이면 event의 패시브 리스너 내부 플래그를 설정합니다.
12. listenerGlobal이 Window 객체이면, event와 listener가 주어진 상태에서 이벤트 리스너의 타이밍 정보를 기록합니다.
13. listener의 콜백, "handleEvent", « event », 그리고 event의 currentTarget 속성 값을 사용하여 사용자 객체의 연산을 호출합니다. 이 과정에서 예외 exception이 발생하면:
  1. listener의 콜백에 대응하는 JavaScript 객체의 연결된 Realm의 전역 객체에 대해 exception을 보고합니다.
  2. 제공된 경우 legacyOutputDidListenersThrowFlag를 설정합니다.
    
    legacyOutputDidListenersThrowFlag는 Indexed Database API에서만 사용됩니다. [INDEXEDDB]
14. event의 패시브 리스너 내부 플래그를 해제합니다.
15. listenerGlobal이 Window 객체이면 listenerGlobal의 현재 이벤트를 currentEvent로 설정합니다.
16. event의 즉시 전파 중지 플래그가 설정되어 있으면 중단합니다.
found를 반환합니다.

2.10. 이벤트 발생

이벤트 발생을 위해 e라는 이름의 이벤트를 target에서, 선택적으로 eventConstructor를 사용하여, IDL 속성 초기화 방법의 설명과 legacy target override flag와 함께, 다음 단계들을 실행한다:

recordingTimingAsTask를 다음 호출의 결과로 설정합니다. 필요한 경우 작업 시간 기록 시작 이때 target의 관련 설정 객체를 전달합니다.
eventConstructor가 주어지지 않았다면, eventConstructor를 다음으로 설정합니다: Event.
event를 이벤트 생성의 결과로 설정합니다. 이때 eventConstructor를 전달하고, target의 관련 렐름에서 생성합니다.
event의 type 속성을 e로 초기화합니다.
event의 다른 모든 IDL 속성을 이 알고리즘의 호출에 설명된 대로 초기화합니다.

이를 통해 isTrusted 속성을 false로 설정할 수도 있습니다.
result를 event를 target에 발송한 결과로 설정합니다. 이때 legacy target override flag가 지정된 경우 이를 설정합니다.
recordingTimingAsTask가 true이면:
1. 단언: target의 관련 설정 객체는 Document입니다.
2. 작업 종료 시간 기록을 수행합니다. 이때 안전하지 않은 공유 현재 시간과 target의 관련 설정 객체를 전달합니다.
result를 반환합니다.

DOM의 문맥에서 Fire는 생성, 초기화, 그리고 디스패치를 통해 이벤트를 만드는 것을 줄여 이르는 말이다. 이벤트 발생시키기는 그 과정을 더 쉽게 작성할 수 있게 한다.

이벤트의 bubbles 또는 cancelable 속성을 초기화해야 한다면, "target에서 submit이라는 이름의 이벤트를 발생시키고, 그 cancelable 속성을 true로 초기화한다"라고 작성할 수 있다.

또는, 사용자 정의 생성자가 필요할 때는, "target에서 click이라는 이름의 이벤트를 발생시키되 MouseEvent를 사용하고 그 detail 속성을 1로 초기화한다"라고 작성할 수 있다.

때로는 반환값이 중요하다:

doAction을 target에서 like라는 이름의 이벤트를 발생시킨 결과로 둔다.
doAction이 true라면, …

2.11. 동작과 발생의 차이

이벤트는 동작이 아니라 발생을 나타낸다. 달리 말하면, 이는 알고리즘으로부터의 알림을 나타내며, 해당 알고리즘의 이후 진행 방향에 영향을 주는 데 사용될 수 있다 (예: preventDefault() 호출을 통해). 이벤트는 어떤 알고리즘이 실행되기 시작하게 하는 동작이나 개시자로 사용되어서는 안 된다. 그것은 이벤트의 목적이 아니다.

여기서 이를 특별히 언급하는 이유는, 이전 DOM 반복판들에는 이벤트와 연관된 "기본 동작"이라는 개념이 있었고, 그것이 사람들에게 완전히 잘못된 생각을 심어 주었기 때문이다. 이벤트는 동작을 나타내거나 유발하지 않으며, 진행 중인 동작에 영향을 주는 데에만 사용될 수 있다.

3. 진행 중인 작업 중단

프라미스에는 내장된 중단 메커니즘이 없지만, 이를 사용하는 많은 API는 중단 의미론을 필요로 한다. AbortController 는 abort() 메서드를 제공하여 해당 AbortSignal 객체의 상태를 토글함으로써 이러한 요구를 지원한다. 중단을 지원하고자 하는 API는 AbortSignal 객체를 받아 그 상태를 참고하여 동작을 결정할 수 있다.

AbortController 를 사용하는 API는 abort() 호출 시, 해결되지 않은 프라미스를 AbortSignal의 중단 이유로 reject하는 것이 권장된다.

가상의 doAmazingness({ ... }) 메서드는 중단을 지원하기 위해 AbortSignal 객체를 다음과 같이 받을 수 있다:

const controller = new AbortController();
const signal = controller.signal;

startSpinner();

doAmazingness({ ..., signal })
    .then(result => ...)
    .catch(err => {
    if (err.name == 'AbortError') return;
    showUserErrorMessage();
    })
    .then(() => stopSpinner());

// …

controller.abort();

doAmazingness는 다음과 같이 구현할 수 있다:

function doAmazingness({signal}) {
    return new Promise((resolve, reject) => {
    signal.throwIfAborted();

    // 놀라운 작업을 시작하고, 완료 시 resolve(result)를 호출한다.
    // 또한, 시그널을 감시한다:
    signal.addEventListener('abort', () => {
        // 놀라운 작업을 중단하고:
        reject(signal.reason);
    });
    });
}

프라미스를 반환하지 않는 API는 동등하게 반응하거나 AbortSignal의 중단 이유를 노출하지 않을 수도 있다. addEventListener() 는 후자의 예시이다.

더 세밀한 제어가 필요한 API는 AbortController 와 AbortSignal 객체를 필요에 따라 확장할 수 있다.

3.1. 인터페이스 `AbortController`

[Exposed=*]
interface AbortController {
    constructor();

    [SameObject] readonly attribute AbortSignal signal;

    undefined abort(optional any reason);
};

controller = new AbortController(): 새로운 controller를 반환하며, 그 signal 은 새로 생성된 AbortSignal 객체로 설정된다.
controller . signal: 이 객체와 연관된 AbortSignal 객체를 반환한다.
controller . abort(reason): 이 메서드를 호출하면 reason이 이 객체의 AbortSignal의 중단 이유에 저장되고, 관련 작업이 중단되어야 함을 관찰자에게 알린다. reason이 undefined라면, "AbortError" DOMException 이 저장된다.

AbortController 객체는 signal (즉, AbortSignal 객체)을 가진다.

new AbortController() 생성자 단계는 다음과 같다:

signal을 새로운 AbortSignal 객체로 한다.
this의 signal을 signal로 설정한다.

signal getter 단계는 this의 signal을 반환한다.

abort(reason) 메서드 단계는 signal abort를 this와 reason으로 실행한다(주어졌을 경우).

signal abort를 AbortController controller와 선택적 reason으로 실행하려면, signal abort를 controller의 signal과 reason으로 실행한다(주어졌을 경우).

3.2. 인터페이스 `AbortSignal`

[Exposed=*]
interface AbortSignal : EventTarget {
  [NewObject] static AbortSignal abort(optional any reason);
  [Exposed=(Window,Worker), NewObject] static AbortSignal timeout([EnforceRange] unsigned long long milliseconds);
  [NewObject] static AbortSignal _any(sequence<AbortSignal> signals);

  readonly attribute boolean aborted;
  readonly attribute any reason;
  undefined throwIfAborted();

  attribute EventHandler onabort;
};

AbortSignal . abort(reason): AbortSignal 인스턴스를 반환하며, 중단 이유가 reason으로 설정된다(정의되지 않은 경우 제외); 그렇지 않으면 "AbortError" DOMException이 설정된다.
AbortSignal . any(signals): AbortSignal 인스턴스를 반환하며, signals 중 하나라도 중단되면 해당 인스턴스도 중단된다. 중단 이유는 중단을 유발한 signals 중 하나의 이유로 설정된다.
AbortSignal . timeout(milliseconds): AbortSignal 인스턴스를 반환하며, milliseconds 밀리초 후 중단된다. 중단 이유는 "TimeoutError" DOMException으로 설정된다.
signal . aborted: signal의 AbortController 가 중단을 알렸으면 true, 아니면 false를 반환한다.
signal . reason: signal의 중단 이유를 반환한다.
signal . throwIfAborted(): signal의 중단 이유를 던진다. signal의 AbortController 가 중단을 알렸을 때만 동작하며, 그렇지 않으면 아무 것도 하지 않는다.

AbortSignal 객체는 연관된 중단 이유(JavaScript 값)를 가지며, 초기값은 undefined이다.

AbortSignal 객체는 연관된 중단 알고리즘(중단될 때 실행될 알고리즘의 집합)을 가지며, 초기에는 비어 있다.

중단 알고리즘은 복잡한 요구사항을 가진 API가 abort()에 합리적으로 반응할 수 있게 해준다. 예를 들어, 특정 API의 중단 이유는 서비스 워커와 같은 스레드 간 환경으로 전파되어야 할 수 있다.

AbortSignal 객체는 의존적인(불리언 값) 속성을 가지며, 초기값은 false이다.

AbortSignal 객체는 연관된 소스 신호(객체의 중단된 상태에 의존하는 AbortSignal 객체의 약한 집합)를 가지며, 초기에는 비어 있다.

AbortSignal 객체는 연관된 의존 신호(객체의 중단된 상태에 의존하는 AbortSignal 객체의 약한 집합)를 가지며, 초기에는 비어 있다.

정적 abort(reason) 메서드 단계는 다음과 같다:

signal을 새로운 AbortSignal 객체로 한다.
signal의 중단 이유를 reason이 주어졌으면 그것으로 설정하고, 그렇지 않으면 새로운 "AbortError" DOMException으로 설정한다.
signal을 반환한다.

정적 timeout(milliseconds) 메서드 단계는 다음과 같다:

signal을 새로운 AbortSignal 객체로 한다.
global을 signal의 관련 전역 객체로 한다.
타임아웃 후 단계 실행을 global, "AbortSignal-timeout", milliseconds, 그리고 다음 단계와 함께 실행한다:
1. 전역 태스크 큐에 추가를 타이머 태스크 소스에 global과 함께 실행하여, 중단 신호를 signal과 새로운 "TimeoutError" DOMException으로 보낸다.
이 타임아웃 기간 동안, signal에 abort 이벤트에 대한 이벤트 리스너가 등록되어 있다면, global에서 signal로의 강한 참조가 있어야 한다.
signal을 반환한다.

정적 any(signals) 메서드 단계는 의존적인 중단 신호 생성을 signals로부터 AbortSignal 과 현재 realm을 사용하여 실행한 결과를 반환하는 것이다.

aborted getter 단계는 this가 중단되었다면 true를, 그렇지 않으면 false를 반환하는 것이다.

reason getter 단계는 this의 중단 이유를 반환하는 것이다.

throwIfAborted() 메서드 단계는 this가 중단되었다면 this의 중단 이유를 던지는 것이다.

이 메서드는 AbortSignal을 받는 함수가 AbortSignal을 다른 메서드에 전달하는 대신 특정 체크포인트에서 예외를 던지거나(또는 거부된 프라미스를 반환) 싶을 때 주로 유용하다. 예를 들어, 다음 함수는 조건 폴링 시도 사이에 중단을 허용한다. 이는 실제 비동기 작업(즉, await func())이 AbortSignal을 받지 않더라도 폴링 프로세스를 중단할 기회를 제공한다.

async function waitForCondition(func, targetValue, { signal } = {}) {
          while (true) {
            signal?.throwIfAborted();
        
            const result = await func();
            if (result === targetValue) {
              return;
            }
          }
        }

onabort 속성은 onabort 이벤트 핸들러에 대한 이벤트 핸들러 IDL 속성이며, 이벤트 핸들러 이벤트 타입은 abort이다.

AbortSignal 객체의 변경은 해당 AbortController 객체의 의도를 나타내지만, AbortSignal 객체를 관찰하는 API는 이를 무시할 수 있다. 예를 들어, 작업이 이미 완료된 경우이다.

AbortSignal 객체는 그 중단 이유가 undefined가 아닐 때 중단된 것이다.

알고리즘 algorithm을 AbortSignal 객체 signal에 추가하려면:

signal이 중단되었다면, 반환한다.
algorithm을 signal의 중단 알고리즘에 추가한다.

알고리즘 algorithm을 AbortSignal signal에서 제거하려면, algorithm을 signal의 중단 알고리즘에서 제거한다.

AbortSignal 객체 signal과 선택적 reason이 주어졌을 때, 중단 신호를 보내려면:

signal이 중단되었다면, 반환한다.
signal의 중단 이유를 reason이 주어졌으면 그것으로 설정하고, 그렇지 않으면 새로운 "AbortError" DOMException으로 설정한다.
dependentSignalsToAbort를 새로운 리스트로 한다.
signal의 의존 신호의 각 dependentSignal에 대해 반복한다:
1. dependentSignal이 중단되지 않았다면:
  1. dependentSignal의 중단 이유를 signal의 중단 이유로 설정한다.
  2. dependentSignal을 dependentSignalsToAbort에 추가한다.
signal에 대해 중단 단계를 실행한다.
dependentSignalsToAbort의 각 dependentSignal에 대해 반복하며, dependentSignal에 대해 중단 단계를 실행한다.

AbortSignal signal에 대해 중단 단계 실행하려면:

signal의 중단 알고리즘의 각 algorithm에 대해 반복하며 algorithm을 실행한다.
signal의 중단 알고리즘을 비운다.
abort라는 이름의 이벤트를 발생시킨다.

AbortSignal 객체 목록 signals로부터, AbortSignal 또는 이를 상속하는 인터페이스여야 하는 signalInterface와 realm을 사용하여 의존적인 중단 신호 생성하려면:

resultSignal을 realm을 사용하여 signalInterface를 구현하는 새로운 객체로 한다.
signals의 각 signal에 대해 반복한다: signal이 중단되었다면, resultSignal의 중단 이유를 signal의 중단 이유로 설정하고 resultSignal을 반환한다.
resultSignal의 의존적인 속성을 true로 설정한다.
signals의 각 signal에 대해 반복한다:
1. signal의 의존적인 속성이 false라면:
  1. signal을 resultSignal의 소스 신호에 추가한다.
  2. resultSignal을 signal의 의존 신호에 추가한다.
2. 그렇지 않으면, signal의 소스 신호의 각 sourceSignal에 대해 반복한다:
  1. 단언: sourceSignal은 중단되지 않았고 의존적이지 않다.
  2. sourceSignal을 resultSignal의 소스 신호에 추가한다.
  3. resultSignal을 sourceSignal의 의존 신호에 추가한다.
resultSignal을 반환한다.

3.2.1. 가비지 컬렉션

중단되지 않은 의존적인 AbortSignal 객체는 소스 신호가 비어있지 않고 abort 이벤트에 대한 등록된 이벤트 리스너가 있거나 중단 알고리즘이 비어있지 않은 동안에는 가비지 컬렉션되어서는 안 된다.

3.3. API에서 `AbortController` 와 `AbortSignal` 객체 사용하기

중단될 수 있는 작업을 나타내기 위해 프라미스를 사용하는 모든 웹 플랫폼 API는 다음을 준수해야 한다:

signal 딕셔너리 멤버를 통해 AbortSignal 객체를 받는다.
AbortSignal 객체의 중단 이유로 프라미스를 거부하여 작업이 중단되었음을 전달한다.
AbortSignal 이 이미 중단되었다면 즉시 거부하고, 그렇지 않으면:
중단 알고리즘 메커니즘을 사용하여 AbortSignal 객체의 변경사항을 관찰하되, 다른 관찰자들과 충돌하지 않는 방식으로 한다.

프라미스를 반환하는 메서드 doAmazingness(options)의 메서드 단계는 다음과 같을 수 있다:

global을 this의 관련 전역 객체로 한다.
p를 새로운 프라미스로 한다.
options["signal"]이 존재한다면:
1. signal을 options["signal"]로 한다.
2. signal이 중단되었다면, signal의 중단 이유로 p를 거부하고 p를 반환한다.
3. signal에 다음 중단 단계를 추가한다:
  1. 놀라운 일을 멈춘다.
  2. signal의 중단 이유로 p를 거부한다.
다음 단계를 병렬로 실행한다:
1. amazingResult를 놀라운 일을 수행한 결과로 한다.
2. global과 함께 놀라운 태스크 소스에서 전역 태스크를 큐에 추가하여 amazingResult로 p를 이행한다.
p를 반환한다.

프라미스를 사용하지 않는 API도 가능한 한 위의 내용을 준수해야 한다.

4. 노드

4.1. "DOM" 소개

원래 의미에서 "DOM"은 문서(특히 HTML 및 XML 문서)에 접근하고 조작하기 위한 API입니다. 이 명세에서 "문서"라는 용어는 짧은 정적 문서부터 풍부한 멀티미디어를 가진 긴 에세이 또는 보고서, 그리고 완전한 인터랙티브 애플리케이션까지 모든 마크업 기반 리소스를 의미합니다.

이러한 각 문서는 노드 트리로 표현됩니다. 노드 중 일부는 트리에서 자식을 가질 수 있고, 다른 노드는 항상 리프(끝)입니다.

예를 들어, 다음 HTML 문서를 생각해보세요:

<!DOCTYPE html>
<html class=e>
 <head><title>Aliens?</title></head>
 <body>Why yes.</body>
</html>

이 문서는 다음과 같이 표현됩니다:

문서
- 문서 유형: html
- Element: html class="e"
  - Element: head
    - Element: title
      - Text: Aliens?
  - Text: ⏎␣
  - Element: body
    - Text: Why yes.⏎

HTML 파싱의 마법 덕분에 모든 ASCII 공백이 Text 노드로 변환되는 것은 아니지만, 일반적인 개념은 분명합니다. 마크업이 들어가고, 트리와 노드가 생성됩니다.

아주 훌륭한 Live DOM Viewer 를 사용하여 이 내용을 더 자세히 탐색할 수 있습니다.

4.2. 노드 트리

노드는 Node를 구현하는 객체이다. 노드는 노드 트리로 알려진 트리에 참여한다.

실제로는 더 구체적인 객체를 다룬다.

Node를 구현하는 객체는 상속된 인터페이스도 구현한다: Document, DocumentType, DocumentFragment, Element, CharacterData, 또는 Attr.

DocumentFragment를 구현하는 객체는 때로 ShadowRoot를 구현한다.

Element를 구현하는 객체는 또한 일반적으로 다음과 같은 상속된 인터페이스를 구현한다. HTMLAnchorElement.

CharacterData를 구현하는 객체는 상속된 인터페이스도 구현한다: Text, ProcessingInstruction, 또는 Comment.

Text를 구현하는 객체는 때로 CDATASection을 구현한다.

따라서 모든 노드의 주 인터페이스는 다음 중 하나다: Document, DocumentType, DocumentFragment, ShadowRoot, Element 또는 Element의 상속된 인터페이스, Attr, Text, CDATASection, ProcessingInstruction, 또는 Comment.

간결함을 위해, 이 명세는 Node와 상속된 인터페이스 NodeInterface를 구현하는 객체를 NodeInterface 노드라고 부른다.

노드 트리는 다음과 같이 제약되며, 이는 노드와 그 가능한 자식 간의 관계로 표현된다:

Document

트리 순서에서:

0개 이상의 ProcessingInstruction 또는 Comment 노드.
선택적으로 하나의 DocumentType 노드.
0개 이상의 ProcessingInstruction 또는 Comment 노드.
선택적으로 하나의 Element 노드.
0개 이상의 ProcessingInstruction 또는 Comment 노드.

DocumentFragment

Element

0개 이상의 Element 또는 CharacterData 노드.

DocumentType

CharacterData

Attr

자식 없음.

Attr 노드는 역사적인 이유로 트리 에 참여합니다. 이들은 (null이 아닌) 부모나 어떠한 자식도 가지지 않으므로 트리에서 홀로 존재합니다.

노드 node의 길이를 결정하려면 다음 단계를 실행합니다:

node가 DocumentType 또는 Attr 노드이면 0을 반환합니다.
node가 CharacterData 노드이면, node의 데이터의 길이를 반환합니다.
node의 자식 수를 반환합니다.

노드는 그 비어 있음이 길이가 0이면 성립하는 것으로 간주됩니다.

4.2.1. 문서 트리

문서 트리는 노드 트리이며, 그 루트는 문서입니다.

문서의 문서 요소는 존재하는 경우 그 문서를 부모로 하는 요소이며, 그렇지 않으면 null입니다.

노드 트리 제약 조건에 따라, 이러한 요소는 하나만 존재할 수 있습니다.

노드는 그 루트가 문서이면 문서 트리 안에 있습니다.

노드는 문서 트리 안에 있으면 문서 안에 있습니다. 문서 안에라는 용어는 더 이상 사용하지 않도록 되어 있습니다. 이 용어가 사용되고 있다는 것은 해당 표준이 섀도 트리를 고려하도록 아직 업데이트되지 않았음을 나타냅니다.

4.2.2. 섀도 트리

섀도 트리는 루트가 섀도 루트인 노드 트리이다.

섀도 루트는 그 호스트를 통해 항상 다른 노드 트리에 연결된다. 따라서 섀도 트리는 혼자 있지 않는다. 섀도 루트의 호스트의 노드 트리는 때때로 라이트 트리라고 불린다.

섀도 트리에 대응하는 라이트 트리는 그 자체로 섀도 트리일 수 있다.

노드는 그 섀도 포함 루트가 문서일 때 연결되었다고 한다.

4.2.2.1. 슬롯

섀도 트리는 슬롯인 0개 이상의 요소를 포함한다.

슬롯은 HTML의 slot 요소를 통해서만 생성될 수 있다.

슬롯은 연관된 이름(문자열)을 가진다. 달리 명시되지 않는 한 빈 문자열이다.

슬롯의 이름을 업데이트하기 위해 다음 속성 변경 단계를 사용한다:

element가 슬롯이고, localName이 name이며, namespace가 null이라면:
1. value가 oldValue와 같다면, 반환한다.
2. value가 null이고 oldValue가 빈 문자열이라면, 반환한다.
3. value가 빈 문자열이고 oldValue가 null이라면, 반환한다.
4. value가 null이거나 빈 문자열이라면, element의 이름을 빈 문자열로 설정한다.
5. 그렇지 않으면, element의 이름을 value로 설정한다.
6. element의 루트와 함께 트리에 대한 슬롯 가능한 요소 할당을 실행한다.

섀도 트리에서 트리 순서로 첫 번째 슬롯이고 이름이 빈 문자열인 것은 때때로 "기본 슬롯"으로 알려져 있다.

슬롯은 연관된 할당된 노드(슬롯 가능한 요소의 목록)를 가진다. 달리 명시되지 않는 한 비어있다.

4.2.2.2. 슬롯 가능한 요소

Element와 Text 노드는 슬롯 가능한 요소이다.

슬롯은 슬롯 가능한 요소가 될 수 있다.

슬롯 가능한 요소는 연관된 이름(문자열)을 가진다. 달리 명시되지 않는 한 빈 문자열이다.

슬롯 가능한 요소의 이름을 업데이트하기 위해 다음 속성 변경 단계를 사용한다:

localName이 slot이고 namespace가 null이라면:
1. value가 oldValue와 같다면, 반환한다.
2. value가 null이고 oldValue가 빈 문자열이라면, 반환한다.
3. value가 빈 문자열이고 oldValue가 null이라면, 반환한다.
4. value가 null이거나 빈 문자열이라면, element의 이름을 빈 문자열로 설정한다.
5. 그렇지 않으면, element의 이름을 value로 설정한다.
6. element가 할당되었다면, element의 할당된 슬롯에 대해 슬롯 가능한 요소 할당을 실행한다.
7. element에 대해 슬롯 할당을 실행한다.

슬롯 가능한 요소는 연관된 할당된 슬롯(null 또는 슬롯)을 가진다. 달리 명시되지 않는 한 null이다. 슬롯 가능한 요소는 그 할당된 슬롯이 non-null일 때 할당되었다고 한다.

슬롯 가능한 요소는 연관된 수동 슬롯 할당(null 또는 슬롯)을 가진다. 달리 명시되지 않는 한 null이다.

슬롯 가능한 요소의 수동 슬롯 할당은 이 변수가 스크립트에서 직접 접근 가능하지 않기 때문에 슬롯에 대한 약한 참조를 사용하여 구현될 수 있다.

4.2.2.3. 슬롯과 슬롯 가능한 요소 찾기

주어진 슬롯 가능한 요소 slottable과 선택적 불리언 open(기본값 false)에 대해 슬롯 찾기를 하려면:

slottable의 부모가 null이라면, null을 반환한다.
shadow를 slottable의 부모의 섀도 루트로 한다.
shadow가 null이라면, null을 반환한다.
open이 true이고 shadow의 모드가 "open"이 아니라면, null을 반환한다.
shadow의 슬롯 할당이 "manual"이라면, shadow의 후손 중 수동으로 할당된 노드가 slottable을 포함하는 슬롯을 반환한다. 있다면; 그렇지 않으면 null.
shadow의 후손 중 트리 순서로 첫 번째이며 이름이 slottable의 이름과 같은 슬롯을 반환한다. 있다면; 그렇지 않으면 null.

주어진 슬롯 slot에 대해 슬롯 가능한 요소 찾기를 하려면:

result를 « »로 한다.
root를 slot의 루트로 한다.
root가 섀도 루트가 아니라면, result를 반환한다.
host를 root의 호스트로 한다.
root의 슬롯 할당이 "manual"이라면:
1. slot의 수동으로 할당된 노드의 각 슬롯 가능한 요소 slottable에 대해 반복하며, 만약 slottable의 부모가 host라면, slottable을 result에 추가한다.
그렇지 않으면, host의 각 슬롯 가능한 요소 자식 slottable에 대해 트리 순서로:
1. foundSlot을 slottable을 주어서 슬롯을 찾은 결과로 한다.
2. foundSlot이 slot이라면, slottable을 result에 추가한다.
result를 반환한다.

주어진 슬롯 slot에 대해 평면화된 슬롯 가능한 요소 찾기를 하려면:

result를 « »로 한다.
slot의 루트가 섀도 루트가 아니라면, result를 반환한다.
slottables를 slot을 주어서 슬롯 가능한 요소를 찾은 결과로 한다.
slottables가 빈 목록이라면, slot의 각 슬롯 가능한 요소 자식을 트리 순서로 slottables에 추가한다.
slottables의 각 node에 대해:
1. node가 루트가 섀도 루트인 슬롯이라면:
  1. temporaryResult를 node를 주어서 평면화된 슬롯 가능한 요소를 찾은 결과로 한다.
  2. temporaryResult의 각 슬롯 가능한 요소를 순서대로 result에 추가한다.
2. 그렇지 않으면, node를 result에 추가한다.
result를 반환한다.

4.2.2.4. 슬롯 가능한 요소와 슬롯 할당

슬롯 slot에 대해 슬롯 가능한 요소 할당을 하려면:

slottables를 slot에 대해 슬롯 가능한 요소를 찾은 결과로 한다.
slottables와 slot의 할당된 노드가 동일하지 않다면, slot에 대해 슬롯 변경 신호를 실행한다.
slot의 할당된 노드를 slottables로 설정한다.
slottables의 각 slottable에 대해: slottable의 할당된 슬롯을 slot으로 설정한다.

주어진 노드 root에 대해 트리에 대한 슬롯 가능한 요소 할당을 하려면, root의 포함 후손의 각 슬롯에 대해 트리 순서로 슬롯 가능한 요소 할당을 실행한다.

주어진 슬롯 가능한 요소 slottable에 대해 슬롯 할당을 하려면:

slot을 slottable과 함께 슬롯을 찾은 결과로 한다.
slot이 non-null이라면, slot에 대해 슬롯 가능한 요소 할당을 실행한다.

4.2.2.5. 슬롯 변경 신호

각 유사 출처 윈도우 에이전트는 신호 슬롯(슬롯의 집합)을 가지며, 이는 초기에 비어있다. [HTML]

슬롯 slot에 대해 슬롯 변경 신호를 하려면:

slot을 slot의 관련 에이전트의 신호 슬롯에 추가한다.
뮤테이션 옵저버 컴파운드 마이크로태스크를 큐에 추가한다.

4.2.3. 변경 알고리즘

주어진 노드 node, 노드 parent, null 또는 노드 child, 그리고 목록인 노드 childrenToExclude에 대해 사전 삽입 유효성을 보장하려면:

parent가 Document, DocumentFragment, 또는 Element 노드가 아니면, "HierarchyRequestError" DOMException을 던집니다.
node가 parent의 호스트를 포함하는 포괄적 조상이면, "HierarchyRequestError" DOMException을 던집니다.
child가 null이 아니고 그 부모가 parent가 아니면, "NotFoundError" DOMException을 던집니다.
node가 DocumentFragment, DocumentType, Element, 또는 CharacterData 노드가 아니면, "HierarchyRequestError" DOMException을 던집니다.
parent가 문서가 아니면:
1. node가 doctype이면, "HierarchyRequestError" DOMException을 던집니다.
2. 반환합니다.
node가 Text 노드이면, "HierarchyRequestError" DOMException을 던집니다.
node가 CharacterData 노드이면 반환합니다.
node가 DocumentFragment 노드이면:
1. node에 둘 이상의 요소 자식이 있거나 Text 노드 자식이 있으면, "HierarchyRequestError" DOMException을 던집니다.
2. node에 요소 자식이 없으면 반환합니다.
node가 DocumentFragment 또는 Element 노드이면:
1. 다음 중 하나라도 참이면:
  - parent에 childrenToExclude가 포함하지 않는 요소 자식이 있는 경우;
  - child가 null이 아니고 doctype이 child의 뒤에 오는 경우; 또는
  - child가 childrenToExclude가 포함하지 않는 doctype인 경우,
  "HierarchyRequestError" DOMException을 던집니다.
2. 반환합니다.
단언: node는 doctype입니다.
다음 중 하나라도 참이면:
- parent에 childrenToExclude가 포함하지 않는 doctype 자식이 있는 경우;
- child가 null이 아니고 요소가 child의 앞에 오는 경우; 또는
- child가 null이고 parent에 childrenToExclude가 포함하지 않는 요소 자식이 있는 경우,
"HierarchyRequestError" DOMException을 던집니다.

노드 node를 노드 parent 안에 null 또는 노드 child 앞에 사전 삽입하려면:

node, parent, child, 그리고 « »가 주어졌을 때 사전 삽입 유효성을 보장합니다.
referenceChild를 child로 둡니다.
referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정합니다.
node를 parent 안에 referenceChild 앞에 삽입합니다.
node를 반환합니다.

명세는 모든 또는 일부 노드에 대한 삽입 단계를 정의할 수 있습니다. 아래의 삽입 알고리즘에 표시된 대로 알고리즘에는 insertedNode가 전달됩니다. 이 단계들은 insertedNode가 참여하는 노드 트리를 수정하거나, 브라우징 컨텍스트를 생성하거나, 이벤트를 발생시키거나, 그 밖의 방식으로 JavaScript를 실행해서는 안 됩니다. 다만 이 단계들은 이러한 작업을 비동기적으로 수행하도록 태스크를 큐에 넣을 수 있습니다.

삽입 단계는 JavaScript를 실행할 수 없지만(그 밖의 여러 작업도 수행할 수 없습니다), 실제로 스크립트에서 관찰 가능한 결과를 발생시킵니다. 아래 예제를 살펴보십시오:

const h1 = document.querySelector('h1');

const fragment = new DocumentFragment();
const script = fragment.appendChild(document.createElement('script'));
const style = fragment.appendChild(document.createElement('style'));

script.innerText= 'console.log(getComputedStyle(h1).color)'; // 'rgb(255, 0, 0)'을 기록합니다
style.innerText = 'h1 {color: rgb(255, 0, 0);}';

document.body.append(fragment);

위 예제의 스크립트는 다음 작업들이 순서대로 발생하기 때문에 'rgb(255, 0, 0)'을 기록합니다:

삽입 알고리즘이 실행되며, 이 알고리즘은 script 및 style 요소를 순서대로 삽입합니다.
1. HTML 표준의 삽입 단계가 script 요소에 대해 실행되며, 아무 작업도 수행하지 않습니다. [HTML]
2. HTML 표준의 삽입 단계가 style 요소에 대해 실행되며, 해당 스타일 규칙을 즉시 문서에 적용합니다. [HTML]
3. HTML 표준의 연결 후 단계가 script 요소에 대해 실행되며, 이 단계에서 스크립트를 실행합니다. 스크립트는 바로 위 단계에서 적용된 스타일 규칙을 즉시 관찰합니다. [HTML]

명세는 또한 모든 또는 일부 노드에 대한 연결 후 단계를 정의할 수 있습니다. 아래의 삽입 알고리즘에 표시된 대로 알고리즘에는 connectedNode가 전달됩니다.

연결 후 단계의 목적은 노드가 connectedNode가 참여하는 노드 트리를 수정하거나, 브라우징 컨텍스트를 생성하거나, 그 밖의 방식으로 JavaScript를 실행하는 연결 관련 작업을 수행할 기회를 제공하는 것입니다. 이 단계들은 노드 묶음을 스크립트에 대해 원자적으로 삽입할 수 있게 하며, 모든 주요 부수 효과는 노드 트리에 대한 묶음 삽입이 완료된 후에 발생합니다. 이는 추가 삽입이 발생할 수 있기 전에 대기 중인 모든 노드 트리 삽입이 완전히 끝나도록 보장합니다.

명세는 모든 또는 일부 노드에 대한 자식 변경 단계를 정의할 수 있습니다. 이 알고리즘에는 인수가 전달되지 않으며 삽입, 제거, 그리고 데이터 교체에서 호출됩니다.

노드 node를 노드 parent 안에 null 또는 노드 child 앞에, 선택적 불리언 suppressObservers(기본값 false)와 함께 삽입하려면:

node가 DocumentFragment 노드이면 nodes를 node의 자식으로 두고, 그렇지 않으면 « node »로 둡니다.
count를 nodes의 크기로 둡니다.
count가 0이면 반환합니다.
node가 DocumentFragment 노드이면:
1. suppressObservers를 true로 설정하여 그 자식을 제거합니다.
2. node에 대해 « », nodes, null, 그리고 null을 사용하여 트리 변이 레코드를 큐에 넣습니다.
  
  이 단계는 의도적으로 suppressObservers를 고려하지 않습니다.
child가 null이 아니면:
1. 시작 노드가 parent이고 시작 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 시작 오프셋을 count만큼 증가시킵니다.
2. 끝 노드가 parent이고 끝 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 끝 오프셋을 count만큼 증가시킵니다.
child가 null이 아니면 previousSibling을 child의 이전 형제로 두고, child가 null이면 parent의 마지막 자식으로 둡니다.
nodes의 각 node에 대해, 트리 순서로:
1. node를 parent의 노드 문서로 입양합니다.
2. child가 null이면 node를 parent의 자식에 추가합니다.
3. 그렇지 않으면, node를 parent의 자식에서 child의 인덱스 앞에 삽입합니다.
4. parent가 섀도 호스트이고 그 섀도 루트의 슬롯 할당이 "named"이며 node가 슬롯 가능 항목이면, node에 슬롯을 할당합니다.
5. parent의 루트가 섀도 루트이고, parent가 슬롯이며 그 할당된 노드가 빈 목록이면, parent에 대해 슬롯 변경을 알립니다.
6. node의 루트를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
7. node의 각 섀도를 포함하는 포괄적 자손 inclusiveDescendant에 대해, 섀도를 포함하는 트리 순서로:
  1. inclusiveDescendant를 사용하여 삽입 단계를 실행합니다.
  2. inclusiveDescendant가 연결되어 있지 않으면 계속합니다.
  3. inclusiveDescendant가 요소이고 inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이 아니면:
    1. inclusiveDescendant의 사용자 정의 요소 레지스트리의 범위 지정 여부가 true이면, inclusiveDescendant의 노드 문서를 inclusiveDescendant의 사용자 정의 요소 레지스트리의 범위 지정 문서 집합에 추가합니다.
    2. inclusiveDescendant가 사용자 정의이면, inclusiveDescendant, 콜백 이름 "connectedCallback", 그리고 « »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 넣습니다.
    3. 그렇지 않으면, inclusiveDescendant를 업그레이드하려고 시도합니다.
      
      이 작업이 inclusiveDescendant를 성공적으로 업그레이드하면, 그 connectedCallback은 요소 업그레이드 알고리즘 중에 자동으로 큐에 들어갑니다.
  4. 그렇지 않고 inclusiveDescendant가 섀도 루트이고, inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이 아니며, inclusiveDescendant의 사용자 정의 요소 레지스트리의 범위 지정 여부가 true이면, inclusiveDescendant의 노드 문서를 inclusiveDescendant의 사용자 정의 요소 레지스트리의 범위 지정 문서 집합에 추가합니다.
suppressObservers가 false이면, parent에 대해 nodes, « », previousSibling, 그리고 child를 사용하여 트리 변이 레코드를 큐에 넣습니다.
parent에 대해 자식 변경 단계를 실행합니다.
staticNodeList를 처음에는 « »인 목록인 노드로 둡니다.

우리는 노드를 하나라도 연결 후 단계에 전달하기 전에 모두 수집합니다. 노드 트리를 순회하는 동안 연결 후 단계를 호출하지 않습니다. 이는 연결 후 단계가 트리의 구조를 수정할 수 있어 실시간 순회를 안전하지 않게 만들고, 같은 노드에 대해 연결 후 단계가 여러 번 호출될 가능성이 있기 때문입니다.
nodes의 각 node에 대해, 트리 순서로:
1. node의 각 섀도를 포함하는 포괄적 자손 inclusiveDescendant에 대해, 섀도를 포함하는 트리 순서로: inclusiveDescendant를 staticNodeList에 추가합니다.
staticNodeList의 각 node에 대해: node가 연결되어 있으면, node를 사용하여 연결 후 단계를 실행합니다.

노드 node를 노드 parent에 추가하려면: node를 parent 안에 null 앞에 사전 삽입합니다.

명세는 모든 또는 일부 노드에 대한 이동 단계를 정의할 수 있습니다. 아래 이동 알고리즘에 표시된 대로 알고리즘에는 노드 movedNode, 불리언 isSubtreeRoot, 그리고 노드 oldAncestor가 전달됩니다. 삽입 단계와 마찬가지로, 이 단계들은 movedNode가 참여하는 노드 트리를 수정하거나, 브라우징 컨텍스트를 생성하거나, 이벤트를 발생시키거나, 그 밖의 방식으로 JavaScript를 실행해서는 안 됩니다. 다만 이 단계들은 이러한 작업을 비동기적으로 수행하도록 태스크를 큐에 넣을 수 있습니다.

노드 node를 노드 newParent 안에 null 또는 노드 child 앞에 이동하려면:

newParent의 섀도를 포함하는 루트가 node의 섀도를 포함하는 루트와 같지 않으면, "HierarchyRequestError" DOMException을 던집니다.

이는 이동이 newParent의 연결 상태가 node의 연결 상태와 같은 경우에만 수행되도록 보장하는 부수 효과가 있습니다.
node가 newParent의 호스트를 포함하는 포괄적 조상이면, "HierarchyRequestError" DOMException을 던집니다.
child가 null이 아니고 그 부모가 newParent가 아니면, "NotFoundError" DOMException을 던집니다.
node가 Element 또는 CharacterData 노드가 아니면 "HierarchyRequestError" DOMException을 던집니다.
node가 Text 노드이고 newParent가 문서이면, "HierarchyRequestError" DOMException을 던집니다.
newParent가 문서이고, node가 Element 노드이며, newParent에 요소 자식이 있거나, child가 doctype이거나, 또는 child가 null이 아니고 doctype이 child의 뒤에 오면, "HierarchyRequestError" DOMException을 던집니다.
oldParent를 node의 부모로 둡니다.
단언: oldParent는 null이 아닙니다.
node가 주어졌을 때 라이브 범위 사전 제거 단계를 실행합니다.
루트의 노드 문서가 node의 노드 문서인 각 NodeIterator 객체 iterator에 대해: node와 iterator가 주어졌을 때 NodeIterator 사전 제거 단계를 실행합니다.
oldPreviousSibling을 node의 이전 형제로 둡니다.
oldNextSibling을 node의 다음 형제로 둡니다.
oldParent의 자식에서 node를 제거합니다.
node가 할당되어 있으면, node의 할당된 슬롯에 대해 슬롯 가능 항목을 할당합니다.
oldParent의 루트가 섀도 루트이고, oldParent가 슬롯이며 그 할당된 노드가 비어 있으면, oldParent에 대해 슬롯 변경을 알립니다.
node에 슬롯인 포괄적 자손이 있으면:
1. oldParent의 루트를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
2. node를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
node와 oldParent가 주어졌을 때 일시적으로 등록된 관찰자를 추가합니다.
child가 null이 아니면:
1. 시작 노드가 newParent이고 시작 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 시작 오프셋을 1만큼 증가시킵니다.
2. 끝 노드가 newParent이고 끝 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 끝 오프셋을 1만큼 증가시킵니다.
child가 null이 아니면 newPreviousSibling을 child의 이전 형제로 두고, 그렇지 않으면 newParent의 마지막 자식으로 둡니다.
child가 null이면 node를 newParent의 자식에 추가합니다.
그렇지 않으면, node를 newParent의 자식에서 child의 인덱스 앞에 삽입합니다.
newParent가 섀도 호스트이고 그 섀도 루트의 슬롯 할당이 "named"이며 node가 슬롯 가능 항목이면, node에 대해 슬롯을 할당합니다.
newParent의 루트가 섀도 루트이고, newParent가 슬롯이며 그 할당된 노드가 비어 있으면, newParent에 대해 슬롯 변경을 알립니다.
node의 루트를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
node의 각 섀도를 포함하는 포괄적 자손 inclusiveDescendant에 대해, 섀도를 포함하는 트리 순서로:
1. inclusiveDescendant가 node이면 isSubtreeRoot를 true로 두고, 그렇지 않으면 false로 둡니다.
2. inclusiveDescendant, isSubtreeRoot, 그리고 oldParent를 사용하여 이동 단계를 실행합니다.
  
  이동 알고리즘은 삽입 및 제거와 별개의 기본 연산이므로, inclusiveDescendant에 대해 삽입 단계 또는 제거 단계를 호출하지 않습니다.
3. inclusiveDescendant가 사용자 정의이고 newParent가 연결되어 있으면, inclusiveDescendant, 콜백 이름 "connectedMoveCallback", 그리고 « »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 넣습니다.
oldParent에 대해 « », « node », oldPreviousSibling, 그리고 oldNextSibling을 사용하여 트리 변이 레코드를 큐에 넣습니다.
newParent에 대해 « node », « », newPreviousSibling, 그리고 child를 사용하여 트리 변이 레코드를 큐에 넣습니다.

노드 parent 안에서 노드 child를 노드 node로 교체하려면:

node, parent, child, 그리고 « child »가 주어졌을 때 사전 삽입 유효성을 보장합니다.
referenceChild를 child의 다음 형제로 둡니다.
referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정합니다.
previousSibling을 child의 이전 형제로 둡니다.
removedNodes를 빈 집합으로 둡니다.
node를 parent의 노드 문서로 입양합니다.
child의 부모가 null이 아니면:
1. removedNodes를 « child »로 설정합니다.
2. suppressObservers를 true로 설정하여 child를 제거합니다.
위 조건이 false일 수 있는 경우는 child가 node인 경우뿐입니다.
node가 DocumentFragment 노드이면 nodes를 node의 자식으로 두고, 그렇지 않으면 « node »로 둡니다.
suppressObservers를 true로 설정하여 node를 parent 안에 referenceChild 앞에 삽입합니다.
parent에 대해 nodes, removedNodes, previousSibling, 그리고 referenceChild를 사용하여 트리 변이 레코드를 큐에 넣습니다.
child를 반환합니다.

노드 parent 안에서 노드 또는 null node로 모두 교체하려면:

removedNodes를 parent의 자식으로 둡니다.
addedNodes를 빈 집합으로 둡니다.
node가 DocumentFragment 노드이면, addedNodes를 node의 자식으로 설정합니다.
그렇지 않고 node가 null이 아니면, addedNodes를 « node »로 설정합니다.
suppressObservers를 true로 설정하여, parent의 모든 자식을 트리 순서로 제거합니다.
node가 null이 아니면, suppressObservers를 true로 설정하여 node를 parent 안에 null 앞에 삽입합니다.
addedNodes 또는 removedNodes 중 하나라도 비어 있지 않으면, parent에 대해 addedNodes, removedNodes, null, 그리고 null을 사용하여 트리 변이 레코드를 큐에 넣습니다.

이 알고리즘은 노드 트리 제약 조건에 관한 어떠한 검사도 수행하지 않습니다. 명세 작성자는 이를 신중하게 사용해야 합니다.

노드 child를 노드 parent에서 사전 제거하려면:

child의 부모가 parent가 아니면, "NotFoundError" DOMException을 던집니다.
child를 제거합니다.
child를 반환합니다.

명세는 모든 또는 일부 노드에 대한 제거 단계를 정의할 수 있습니다. 아래 제거 알고리즘에 표시된 대로, 알고리즘에는 노드 removedNode, 불리언 isSubtreeRoot, 그리고 노드 oldAncestor가 전달됩니다.

노드 node를, 선택적 불리언 suppressObservers(기본값 false)와 함께 제거하려면:

parent를 node의 부모로 둡니다.
단언: parent는 null이 아닙니다.
node가 주어졌을 때 라이브 범위 사전 제거 단계를 실행합니다.
루트의 노드 문서가 node의 노드 문서인 각 NodeIterator 객체 iterator에 대해: node와 iterator가 주어졌을 때 NodeIterator 사전 제거 단계를 실행합니다.
oldPreviousSibling을 node의 이전 형제로 둡니다.
oldNextSibling을 node의 다음 형제로 둡니다.
node를 그 parent의 자식에서 제거합니다.
node가 할당되어 있으면, node의 할당된 슬롯에 대해 슬롯 가능 항목을 할당합니다.
parent의 루트가 섀도 루트이고, parent가 슬롯이며 그 할당된 노드가 빈 목록이면, parent에 대해 슬롯 변경을 알립니다.
node에 슬롯인 포괄적 자손이 있으면:
1. parent의 루트를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
2. node를 사용하여 트리에 슬롯 가능 항목을 할당합니다.
node, true, 그리고 parent를 사용하여 제거 단계를 실행합니다.
isParentConnected를 parent의 연결 상태로 둡니다.
node가 사용자 정의이고 isParentConnected가 true이면, node, 콜백 이름 "disconnectedCallback", 그리고 « »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 넣습니다.

현재로서는 사용자 정의 요소에 parent가 전달되지 않는 것이 의도된 동작입니다. 필요가 생기면 향후 변경될 수 있습니다.
node의 각 섀도를 포함하는 자손 descendant에 대해, 섀도를 포함하는 트리 순서로:
1. descendant, false, 그리고 parent를 사용하여 제거 단계를 실행합니다.
2. descendant가 사용자 정의이고 isParentConnected 가 true이면, descendant, 콜백 이름 "disconnectedCallback", 그리고 « »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 넣습니다.
일시적으로 등록된 관찰자를 추가합니다 이때 node와 parent가 주어집니다.
suppressObservers가 false이면, parent에 대해 « », « node », oldPreviousSibling, 그리고 oldNextSibling을 사용하여 트리 변이 레코드를 큐에 넣습니다.
parent에 대해 자식 변경 단계를 실행합니다.

4.2.4. 믹스인 `NonElementParentNode`

웹 호환성 때문에 getElementById() 메서드는 요소에 노출되지 않는다(따라서 ParentNode에도 노출되지 않는다).

interface mixin NonElementParentNode {
  Element? getElementById(DOMString elementId);
};
Document includes NonElementParentNode;
DocumentFragment includes NonElementParentNode;

node . getElementById(elementId): node의 자손 내에서 ID가 elementId인 첫 번째 요소를 반환한다.

노드 node와 문자열 elementId가 주어졌을 때, ID로 요소를 가져오기는 node의 자손 내에서 ID가 elementId인 첫 번째 요소를 트리 순서로 반환한다; 그렇지 않고, 그러한 요소가 없으면 null을 반환한다.

getElementById(elementId) 메서드 단계는 this와 elementId가 주어졌을 때 ID로 요소를 가져오기의 결과를 반환하는 것이다.

4.2.5. 믹스인 `DocumentOrShadowRoot`

interface mixin DocumentOrShadowRoot {
  readonly attribute CustomElementRegistry? customElementRegistry;
};
Document includes DocumentOrShadowRoot;
ShadowRoot includes DocumentOrShadowRoot;

registry = documentOrShadowRoot . customElementRegistry: documentOrShadowRoot의 CustomElementRegistry 객체가 있으면 반환하고; 그렇지 않으면 null을 반환한다.

customElementRegistry getter 단계는 다음과 같다:

this가 문서이면, this의 사용자 정의 요소 레지스트리를 반환한다.
Assert: this는 ShadowRoot 노드이다.
this의 사용자 정의 요소 레지스트리를 반환한다.

DocumentOrShadowRoot mixin은 문서와 섀도 루트 사이에 공유되는 API를 정의하려는 다른 표준에서도 사용될 것으로 기대된다.

4.2.6. 믹스인 `ParentNode`

목록인 노드 및 문자열 nodes와 문서 document가 주어졌을 때 노드를 하나의 노드로 변환하려면:

nodes의 각 문자열을 document와 해당 문자열이 주어졌을 때 텍스트 노드를 생성한 결과로 교체합니다.
nodes의 크기가 1이면 nodes[0]을 반환합니다.
fragment를 document가 주어졌을 때 문서 조각을 생성한 결과로 둡니다.
nodes의 각 node에 대해: node를 fragment에 추가합니다.
fragment를 반환합니다.

interface mixin ParentNode {
  [SameObject] readonly attribute HTMLCollection children;
  readonly attribute Element? firstElementChild;
  readonly attribute Element? lastElementChild;
  readonly attribute unsigned long childElementCount;

  [CEReactions, Unscopable] undefined prepend((Node or DOMString)... nodes);
  [CEReactions, Unscopable] undefined append((Node or DOMString)... nodes);
  [CEReactions, Unscopable] undefined replaceChildren((Node or DOMString)... nodes);

  [CEReactions] undefined moveBefore(Node node, Node? child);

  Element? querySelector(DOMString selectors);
  [NewObject] NodeList querySelectorAll(DOMString selectors);
};
Document includes ParentNode;
DocumentFragment includes ParentNode;
Element includes ParentNode;

collection = node . children

자식 요소를 반환합니다.

element = node . firstElementChild

요소인 첫 번째 자식을 반환하며, 그렇지 않으면 null을 반환합니다.

element = node . lastElementChild

요소인 마지막 자식을 반환하며, 그렇지 않으면 null을 반환합니다.

node . prepend(nodes)

nodes를 node의 첫 번째 자식 앞에 삽입하며, nodes의 문자열은 이에 상응하는 Text 노드로 교체합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . append(nodes)

nodes를 node의 마지막 자식 뒤에 삽입하며, nodes의 문자열은 이에 상응하는 Text 노드로 교체합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . replaceChildren(nodes)

node의 모든 자식을 nodes로 교체하며, nodes의 문자열은 이에 상응하는 Text 노드로 교체합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . moveBefore(movedNode, child)

movedNode를 먼저 제거하지 않고, child가 null이 아니면 child 뒤의 node 안으로 이동하고, 그렇지 않으면 node의 마지막 자식 뒤로 이동합니다. 이 메서드는 movedNode와 연결된 상태를 보존합니다.

던집니다: 노드 트리의 제약 조건이 위반되거나 이동된 노드와 연결된 상태를 보존할 수 없으면 "HierarchyRequestError" DOMException을 던집니다.

node . querySelector(selectors)

node의 자손 중 selectors와 일치하는 첫 번째 요소를 반환합니다.

node . querySelectorAll(selectors)

node의 자손 중 selectors와 일치하는 모든 요소를 반환합니다.

children getter 단계는 this를 루트로 하고 요소 자식만 일치하는 HTMLCollection 컬렉션을 반환하는 것입니다.

firstElementChild getter 단계는 요소인 첫 번째 자식을 반환하고, 그렇지 않으면 null을 반환하는 것입니다.

lastElementChild getter 단계는 요소인 마지막 자식을 반환하고, 그렇지 않으면 null을 반환하는 것입니다.

childElementCount getter 단계는 this의 자식 중 요소인 것의 수를 반환하는 것입니다.

prepend(nodes) 메서드 단계는 다음과 같습니다:

node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
node를 this 안에 this의 첫 번째 자식 앞에 사전 삽입합니다.

append(nodes) 메서드 단계는 다음과 같습니다:

node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
node를 this에 추가합니다.

replaceChildren(nodes) 메서드 단계는 다음과 같습니다:

node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
node, this, null, 그리고 this의 자식이 주어졌을 때 사전 삽입 유효성을 보장합니다.
this 안의 모든 항목을 node로 교체합니다.

moveBefore(node, child) 메서드 단계는 다음과 같습니다:

referenceChild를 child로 둡니다.
referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정합니다.
node를 this 안에 referenceChild 앞에 이동합니다.

querySelector(selectors) 메서드 단계는 selectors를 this에 대해 선택자 문자열을 범위 일치시킨 결과가 빈 목록이 아니면 그 첫 번째 결과를 반환하고, 그렇지 않으면 null을 반환하는 것입니다.

querySelectorAll(selectors) 메서드 단계는 selectors를 this에 대해 선택자 문자열을 범위 일치시킨 정적 결과를 반환하는 것입니다.

4.2.7. 믹스인 `NonDocumentTypeChildNode`

웹 호환성 때문에 previousElementSibling 및 nextElementSibling 속성은 doctype에 노출되지 않는다(따라서 ChildNode에도 노출되지 않는다).

interface mixin NonDocumentTypeChildNode {
  readonly attribute Element? previousElementSibling;
  readonly attribute Element? nextElementSibling;
};
Element includes NonDocumentTypeChildNode;
CharacterData includes NonDocumentTypeChildNode;

element = node . previousElementSibling: 요소인 첫 번째 앞선 형제를 반환한다; 그렇지 않으면 null을 반환한다.
element = node . nextElementSibling: 요소인 첫 번째 뒤따르는 형제를 반환한다; 그렇지 않으면 null을 반환한다.

previousElementSibling getter 단계는 요소인 첫 번째 앞선 형제를 반환하는 것이다; 그렇지 않으면 null을 반환한다.

nextElementSibling getter 단계는 요소인 첫 번째 뒤따르는 형제를 반환하는 것이다; 그렇지 않으면 null을 반환한다.

4.2.8. 믹스인 `ChildNode`

interface mixin ChildNode {
  [CEReactions, Unscopable] undefined before((Node or DOMString)... nodes);
  [CEReactions, Unscopable] undefined after((Node or DOMString)... nodes);
  [CEReactions, Unscopable] undefined replaceWith((Node or DOMString)... nodes);
  [CEReactions, Unscopable] undefined remove();
};
DocumentType includes ChildNode;
Element includes ChildNode;
CharacterData includes ChildNode;

node . before(...nodes)

nodes의 문자열을 이에 상응하는 Text 노드로 교체하면서 nodes를 node 바로 앞에 삽입합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . after(...nodes)

nodes의 문자열을 이에 상응하는 Text 노드로 교체하면서 nodes를 node 바로 뒤에 삽입합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . replaceWith(...nodes)

nodes의 문자열을 이에 상응하는 Text 노드로 교체하면서 node를 nodes로 교체합니다.

던집니다: 노드 트리의 제약 조건이 위반되면 "HierarchyRequestError" DOMException을 던집니다.

node . remove()

node를 제거합니다.

before(nodes) 메서드 단계는 다음과 같습니다:

parent를 this의 부모로 둡니다.
parent가 null이면 반환합니다.
viablePreviousSibling을 this의 앞에 오는 형제 중 nodes에 포함되지 않은 첫 번째 항목으로 두고, 그러한 항목이 없으면 null로 둡니다.
node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
viablePreviousSibling이 null이면 이를 parent의 첫 번째 자식으로 설정하고, 그렇지 않으면 viablePreviousSibling의 다음 형제로 설정합니다.
node를 parent 안에 viablePreviousSibling 앞에 사전 삽입합니다.

after(nodes) 메서드 단계는 다음과 같습니다:

parent를 this의 부모로 둡니다.
parent가 null이면 반환합니다.
viableNextSibling을 this의 뒤에 오는 형제 중 nodes에 포함되지 않은 첫 번째 항목으로 두고, 그러한 항목이 없으면 null로 둡니다.
node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
node를 parent 안에 viableNextSibling 앞에 사전 삽입합니다.

replaceWith(nodes) 메서드 단계는 다음과 같습니다:

parent를 this의 부모로 둡니다.
parent가 null이면 반환합니다.
viableNextSibling을 this의 뒤에 오는 형제 중 nodes에 포함되지 않은 첫 번째 항목으로 두고, 그러한 항목이 없으면 null로 둡니다.
node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 둡니다.
this의 부모가 parent이면, parent 안에서 this를 node로 교체합니다.

this가 node 안에 삽입되었을 수도 있습니다.
그렇지 않으면, node를 parent 안에 viableNextSibling 앞에 사전 삽입합니다.

remove() 메서드 단계는 다음과 같습니다:

this의 부모가 null이면 반환합니다.
this를 제거합니다.

4.2.9. 믹스인 `Slottable`

interface mixin Slottable {
  readonly attribute HTMLSlotElement? assignedSlot;
};
Element includes Slottable;
Text includes Slottable;

assignedSlot getter 단계는 find a slot을 this와 true를 인자로 하여 실행한 결과를 반환합니다.

4.2.10. 구식 컬렉션: `NodeList` 및 `HTMLCollection`

컬렉션은 노드들의 리스트를 나타내는 객체입니다. 컬렉션은 라이브일 수도 있고, 정적일 수도 있습니다. 달리 명시되지 않는 한, 컬렉션은 라이브여야 합니다.

컬렉션이 라이브일 경우, 해당 객체의 속성과 메서드는 데이터의 스냅샷이 아닌 실제 기반 데이터에 대해 작동해야 합니다.

컬렉션이 생성될 때, 필터와 루트가 연결됩니다.

컬렉션 은 해당 컬렉션 의 루트를 뿌리로 하는 서브트리의 뷰를 나타내며 , 주어진 필터에 부합하는 노드만 포함합니다. 이 뷰는 선형적입니다. 반대되는 구체적 요구사항이 없으면 컬렉션 내의 노드들은 트리 순서 로 정렬되어야 합니다.

4.2.10.1. 인터페이스 `NodeList`

NodeList 객체는 컬렉션이며, 노드로 구성됩니다.

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

collection . length: 컬렉션에 있는 노드의 수를 반환합니다.
element = collection . item(index)
element = collection[index]: 컬렉션에서 인덱스 index인 노드를 반환합니다. 노드는 트리 순서로 정렬됩니다.

객체의 지원되는 속성 인덱스는 0부터 컬렉션이 나타내는 노드 수보다 하나 작은 값까지의 범위에 있는 숫자입니다. 그러한 요소가 없으면 지원되는 속성 인덱스도 없습니다.

length 속성은 컬렉션이 나타내는 노드의 수를 반환해야 합니다.

item(index) 메서드는 컬렉션의 index^번째 노드를 반환해야 합니다. 컬렉션에 index^번째 노드가 없으면, 이 메서드는 null을 반환해야 합니다.

4.2.10.2. 인터페이스 `HTMLCollection`

[Exposed=Window, LegacyUnenumerableNamedProperties]
interface HTMLCollection {
  readonly attribute unsigned long length;
  getter Element? item(unsigned long index);
  getter Element? namedItem(DOMString name);
};

HTMLCollection 객체는 요소의 컬렉션이다.

HTMLCollection 은 웹에서 제거할 수 없는 역사적 산물이다. 개발자가 계속 사용하는 것은 물론 괜찮지만, 새로운 API 표준 설계자는 이를 사용해서는 안 된다 (대신 IDL에서 sequence<T>를 사용한다).

collection . length: 컬렉션 안의 요소 수를 반환한다.
element = collection . item(index)
element = collection[index]: 컬렉션에서 인덱스 index를 가진 요소를 반환한다. 요소들은 트리 순서로 정렬된다.
element = collection . namedItem(name)
element = collection[name]: 컬렉션에서 ID 또는 이름이 name인 첫 번째 요소를 반환한다.

객체의 지원되는 속성 인덱스는 컬렉션이 나타내는 요소 수보다 하나 작은 수까지의 0부터의 범위에 있는 숫자이다. 그러한 요소가 없으면, 지원되는 속성 인덱스도 없다.

length getter 단계는 컬렉션이 나타내는 노드 수를 반환하는 것이다.

item(index) 메서드 단계는 컬렉션 안의 index^번째 요소를 반환하는 것이다. 컬렉션 안에 index^번째 요소가 없으면, 메서드는 null을 반환해야 한다.

지원되는 속성 이름은 다음 단계가 반환하는 목록의 값이다:

result를 빈 목록으로 한다.
컬렉션이 나타내는 각 element에 대해, 트리 순서로:
1. element가 result 안에 없는 ID를 가지고 있으면, element의 ID를 result에 추가한다.
2. element가 HTML 네임스페이스 안에 있고, 빈 문자열도 아니고 result 안에도 없는 값을 가진 name 속성을 가지고 있으면, element의 name 속성 값을 result에 추가한다.
result를 반환한다.

namedItem(key) 메서드 단계는 다음과 같다:

key가 빈 문자열이면 null을 반환한다.
다음 중 적어도 하나가 true인 컬렉션 안의 첫 번째 요소를 반환한다:
- key인 ID를 가지고 있다;
- HTML 네임스페이스 안에 있고, key인 값을 가진 name 속성을 가지고 있다;
또는 그러한 요소가 없으면 null을 반환한다.

4.3. 변이 옵저버(Mutation observers)

각 동일 출처 윈도우 에이전트(similar-origin window agent)는 변이 옵저버 마이크로태스크 대기(mutation observer microtask queued) (불리언) 값을 가지고 있으며, 초기값은 false입니다. [HTML]

각 동일 출처 윈도우 에이전트는 또한 대기 중인 변이 옵저버(pending mutation observers) (0개 이상의 집합(set) MutationObserver 객체)도 가지고 있으며, 초기값은 빈 집합입니다.

각 유사 출처 창 에이전트에도 변경 관찰자 카운터가 있으며, 이는 초깃값이 0인 숫자입니다.

변이 관찰자 마이크로태스크를 큐에 추가하다를 수행하려면:

주변 에이전트의 변이 관찰자 마이크로태스크 큐에 추가됨이 true이면, 반환한다.
주변 에이전트의 변이 관찰자 마이크로태스크 큐에 추가됨을 true로 설정한다.
마이크로태스크를 큐에 넣고 마이크로태스크를 변이 관찰자에게 알림에 할당한다.

다음과 같이 변경 관찰자에게 알립니다:

다음 주변 에이전트의 변경 관찰자 마이크로태스크 큐에 추가됨을 false로 설정합니다.
notifyList를 정렬한 결과로 설정합니다. 대상은 주변 에이전트의 대기 중인 변경 관찰자이며, 오름차순으로 정렬합니다. a가 b보다 작다는 것은 a의 생성 인덱스가 b의 생성 인덱스보다 작다는 뜻입니다.
비웁니다. 대상은 주변 에이전트의 대기 중인 변경 관찰자 목록입니다.
signalSet을 복제본으로 설정합니다. 대상은 주변 에이전트의 신호 슬롯입니다.
비웁니다. 대상은 주변 에이전트의 신호 슬롯입니다.
각각에 대해 notifyList의 mo를 처리합니다:
1. records를 복제본으로 설정합니다. 복제 대상은 mo의 레코드 큐입니다.
2. 비웁니다. 대상은 mo의 레코드 큐입니다.
3. 일시적으로 등록된 관찰자를 제거합니다. 대상은 mo입니다.
4. records가 비어 있지 않으면, 호출합니다. mo의 콜백에 « records, mo »를 전달하고 "report"와 함께, 콜백 this 값을 mo로 지정합니다.
각각에 대해 signalSet의 slot에서 이벤트를 발생시킵니다. 이벤트 이름은 slotchange이며, bubbles 속성을 true로 설정하고, slot에서 발생시킵니다.

각 노드에는 등록된 관찰자 목록이 있으며(0개 이상의 목록으로, 등록된 관찰자를 포함합니다), 초기에는 비어 있습니다.

등록된 관찰자는 관찰자(MutationObserver 객체)와 옵션(MutationObserverInit 사전)으로 구성됩니다.

일시적으로 등록된 관찰자는 등록된 관찰자이며, 추가로 원본(등록된 관찰자 중 일시적으로 등록된 관찰자가 아닌 것)도 포함합니다.

일시적으로 등록된 관찰자는 특정 노드의 자손에서 노드가 제거되거나 이동된 후에도 변경 사항을 추적하는 데 사용되며, 이를 통해 subtree가 노드의 이전 부모에서 true로 설정되었을 때 변경 사항이 누락되지 않도록 합니다. 이러한 관찰자는 다음에 변경 관찰자에게 알릴 때 제거됩니다.

노드 node와 노드 parent가 주어졌을 때 일시적으로 등록된 관찰자를 추가하려면:

parent의 각 포괄적 조상 inclusiveAncestor에 대해, 이어서 각각에 대해 registered를 처리합니다. 대상은 inclusiveAncestor의 등록된 관찰자 목록입니다:
1. registered의 옵션["subtree"]가 false이면, 계속합니다.
2. observer를 registered의 관찰자로 설정합니다.
3. registered가 일시적으로 등록된 관찰자라면 원본을 source로 설정합니다. 해당 registered가 일시적으로 등록된 관찰자가 아니면 registered 자체를 사용합니다.
4. node의 등록된 관찰자 목록에 포함되어 있는 일시적으로 등록된 관찰자의 원본이 source라면 계속합니다.
5. 추가합니다. 새로운 일시적으로 등록된 관찰자의 관찰자는 observer, 옵션은 source의 옵션, 원본은 source이며, node의 등록된 관찰자 목록에 추가합니다.
6. 추가합니다. node에 대한 약한 참조를 observer의 일시적 노드 집합에 추가합니다.
7. 추가합니다. observer를 주변 에이전트의 대기 중인 변경 관찰자에 추가합니다.
  
  이를 통해 node의 일시적으로 등록된 관찰자가 제거되도록 보장합니다. 다음에 변경 관찰자에게 알릴 때, MutationRecord 객체가 큐에 추가되지 않더라도 observer에 대해 제거됩니다.
8. 변경 관찰자 마이크로태스크를 큐에 추가합니다.

MutationObserver 객체 observer에 대해 일시적으로 등록된 관찰자를 제거하려면:

각각에 대해 observer의 일시적 노드 집합에 있는 각 node에서 제거합니다. 모든 일시적으로 등록된 관찰자 중 관찰자가 observer인 항목을 node의 등록된 관찰자 목록에서 제거합니다.
비웁니다. 대상은 observer의 일시적 노드 집합입니다.

4.3.1. 인터페이스 `MutationObserver`

[Exposed=Window]
interface MutationObserver {
  constructor(MutationCallback callback);

  undefined observe(Node target, optional MutationObserverInit options = {});
  undefined disconnect();
  sequence<MutationRecord> takeRecords();
};

callback MutationCallback = undefined (sequence<MutationRecord> mutations, MutationObserver observer);

dictionary MutationObserverInit {
  boolean childList = false;
  boolean attributes;
  boolean characterData;
  boolean subtree = false;
  boolean attributeOldValue;
  boolean characterDataOldValue;
  sequence<DOMString> attributeFilter;
};

MutationObserver 객체는 트리의 변경 사항을 관찰하는 데 사용할 수 있습니다. 노드로 구성된 트리입니다.

각 MutationObserver 객체에는 다음과 같은 관련 개념이 있습니다.

생성 시 설정되는 콜백입니다.
생성 시 설정되는 생성 인덱스(숫자)입니다.
노드 목록(약한 참조의 목록이며, 노드에 대한 참조를 포함합니다)은 초기에는 비어 있습니다.
일시적 노드 집합(약한 참조의 집합이며, 다음에 대한 참조를 포함합니다. 노드)이며, 초기에는 비어 있습니다.
레코드 큐(0개 이상의 객체를 포함하는 큐이며, 다음 객체를 포함합니다. MutationRecord 객체)이며, 초기에는 비어 있습니다.

observer = new MutationObserver(callback)

MutationObserver 객체를 생성하고 콜백을 callback으로 설정합니다. callback은 MutationRecord 객체의 목록을 첫 번째 인수로, 생성된 MutationObserver 객체를 두 번째 인수로 받아 호출됩니다. 이 콜백은 노드가 observe() 메서드로 등록된 후 변경되면 호출됩니다.

observer . observe(target, options)

사용자 에이전트에 지정된 target을 관찰하고 (노드) 발생하는 모든 변경 사항을 보고하도록 지시합니다. 보고 기준은 options(객체)로 지정합니다.

options 인수를 사용하면 객체 멤버를 통해 변경 사항 관찰 옵션을 설정할 수 있습니다. 사용할 수 있는 객체 멤버는 다음과 같습니다.

childList: target의 자식에 대한 변경 사항을 관찰하려면 true로 설정합니다.
attributes: target의 속성에 대한 변경 사항을 관찰하려면 true로 설정합니다. 다음 항목을 지정한 경우 생략할 수 있습니다. attributeOldValue 또는 attributeFilter가 지정된 경우입니다.
characterData: target의 데이터에 대한 변경 사항을 관찰하려면 true로 설정합니다. 다음 항목이 지정된 경우 생략할 수 있습니다. characterDataOldValue가 지정된 경우입니다.
subtree: target뿐만 아니라 target의 자손에 대한 변경 사항도 관찰하려면 true로 설정합니다.
attributeOldValue: 다음 조건에 해당하면 true로 설정합니다. attributes가 true이거나 생략되었으며, target의 속성 값을 변경 전에 기록해야 하는 경우입니다.
characterDataOldValue: 다음 조건에 해당하면 true로 설정합니다. characterData가 true로 설정되거나 생략되었으며, target의 데이터를 변경 전에 기록해야 하는 경우입니다.
attributeFilter: 속성의 로컬 이름 목록으로 설정합니다(네임스페이스 제외). 모든 속성 변경 사항을 관찰할 필요가 없고 attributes가 true이거나 생략된 경우입니다.

observer . disconnect()

observer가 모든 변경 사항을 관찰하지 않도록 중지합니다. observe() 메서드를 다시 사용할 때까지 observer의 콜백은 호출되지 않습니다.

observer . takeRecords()

레코드 큐를 비우고 큐에 있던 내용을 반환합니다.

new MutationObserver(callback) 생성자의 단계는 다음과 같습니다.

this의 콜백을 callback으로 설정합니다.
this의 생성 인덱스를 this의 관련 에이전트의 변경 관찰자 카운터로 설정합니다.
this의 관련 에이전트의 변경 관찰자 카운터를 1 증가시킵니다.

observe(target, options) 메서드의 단계는 다음과 같습니다.

options["attributeOldValue"] 또는 options["attributeFilter"] 중 하나가 존재하고, options["attributes"]가 존재하지 않으면, options["attributes"]를 true로 설정합니다.
options["characterDataOldValue"]가 존재하고 options["characterData"]가 다음 조건에 해당하면 존재하지 않는 경우, options["characterData"]를 true로 설정합니다.
options["childList"], options["attributes"], 그리고 options["characterData"] 중 true인 항목이 하나도 없으면 예외를 던집니다. TypeError입니다.
options["attributeOldValue"]가 true이고 options["attributes"]가 false이면 예외를 던집니다. TypeError입니다.
options["attributeFilter"]가 존재하고, options["attributes"]가 false이면 예외를 던집니다. TypeError입니다.
options["characterDataOldValue"]가 true이고 options["characterData"]가 false이면 예외를 던집니다. TypeError입니다.
registered를 target의 등록된 관찰자로 설정합니다. 이는 등록된 관찰자 목록에 있으며, 일시적으로 등록된 관찰자가 아니고 관찰자가 this인 항목입니다. 해당 항목이 없으면 null로 설정합니다.

target이 this가 관찰하는 하위 트리에 있었고 제거되거나 이동되었다면, target의 등록된 관찰자 목록에도 일시적으로 등록된 관찰자가 포함될 수 있으며, 이들의 관찰자는 this입니다. 이러한 항목은 다음에 변경 관찰자에게 알릴 때 제거되므로 무시합니다.
registered가 null이 아니면:
1. 각각에 대해 this의 일시적 노드 집합에 있는 각 node에서 제거합니다. 모든 일시적으로 등록된 관찰자 중 원본이 registered인 항목을 node의 등록된 관찰자 목록에서 제거합니다.
2. registered의 옵션을 options로 설정합니다.
그렇지 않으면:
1. 추가합니다. 새로운 등록된 관찰자의 관찰자는 this이고 옵션은 options이며, target의 등록된 관찰자 목록에 추가합니다.
2. 추가합니다. target에 대한 약한 참조를 this의 노드 목록에 추가합니다.

disconnect() 메서드의 단계는 다음과 같습니다.

각각에 대해 this의 노드 목록에 있는 각 node에서 제거합니다. 모든 등록된 관찰자 중 node의 등록된 관찰자 목록에서 this가 관찰자인 항목을 제거합니다.
일시적으로 등록된 관찰자를 제거합니다. 대상은 this입니다.
비웁니다. 대상은 this의 노드 목록입니다.
비웁니다. 대상은 this의 레코드 큐입니다.

takeRecords() 메서드의 단계는 다음과 같습니다.

records를 복제본으로 설정합니다. 대상은 this의 레코드 큐입니다.
비웁니다. 대상은 this의 레코드 큐입니다.
records를 반환합니다.

4.3.2. 변이 레코드 큐잉

다음과 같이 변경 레코드를 큐에 추가합니다. type을 유형으로, target을 대상으로 하며 name, namespace, oldValue, addedNodes, removedNodes, previousSibling, nextSibling이 주어집니다:

interestedObservers를 빈 맵으로 설정합니다.
nodes를 target의 포괄적 조상으로 설정합니다.
nodes의 각 node에 대해, 이어서 각각에 대해 node의 등록된 관찰자 목록에 있는 registered를 처리합니다:
1. options를 registered의 옵션으로 설정합니다.
2. 다음 조건 중 어느 것도 참이 아니면
  - node가 target이 아니고 options["subtree"]가 false인 경우
  - type이 "attributes"이고 options["attributes"]가 존재하지 않거나 false인 경우
  - type이 "attributes"이고, options["attributeFilter"]가 존재하며, options["attributeFilter"]에 name이 포함되어 있지 않거나 namespace가 null이 아닌 경우
  - type이 "characterData"이고 options["characterData"]가 다음 중 하나에 해당하는 경우: 존재하지 않거나 false인 경우
  - type이 "childList"이고 options["childList"]가 false인 경우
  다음 단계를 수행합니다:
  1. mo를 registered의 관찰자로 설정합니다.
  2. interestedObservers[mo]가 존재하지 않으면, interestedObservers[mo]를 설정합니다. 값은 null입니다.
  3. type이 "attributes"이고 options["attributeOldValue"]가 true이거나, type이 "characterData"이고 options["characterDataOldValue"]가 true이면, interestedObservers[mo]를 설정합니다. 값은 oldValue입니다.
interestedObservers가 비어 있으면, 반환합니다.
각각에 대해 interestedObservers의 observer → mappedOldValue를 처리합니다:
1. record를 새로운 MutationRecord 객체로 설정합니다. 이 객체의 type은 type으로, target은 target으로, attributeName은 name으로, attributeNamespace는 namespace로, oldValue는 mappedOldValue로, addedNodes는 addedNodes로, removedNodes는 removedNodes로, previousSibling은 previousSibling으로, 그리고 nextSibling은 nextSibling으로 설정합니다.
2. record를 observer의 큐에 추가합니다. 대상은 레코드 큐입니다.
3. observer를 추가합니다. 대상은 주변 에이전트의 대기 중인 변경 관찰자입니다.
변경 관찰자 마이크로태스크를 큐에 추가합니다.

트리 구조 변이 레코드를 큐에 추가하다를 target과 addedNodes, removedNodes, previousSibling, nextSibling으로 수행하려면:

Assert: addedNodes 또는 removedNodes가 비어있지 않음을 보장한다.
변이 레코드를 큐에 추가하다를 "childList" 타입으로, target에 대해, null, null, null, addedNodes, removedNodes, previousSibling, nextSibling과 함께 수행한다.

4.3.3. 인터페이스 `MutationRecord`

[Exposed=Window]
interface MutationRecord {
  readonly attribute DOMString type;
  [SameObject] readonly attribute Node target;
  [SameObject] readonly attribute NodeList addedNodes;
  [SameObject] readonly attribute NodeList removedNodes;
  readonly attribute Node? previousSibling;
  readonly attribute Node? nextSibling;
  readonly attribute DOMString? attributeName;
  readonly attribute DOMString? attributeNamespace;
  readonly attribute DOMString? oldValue;
};

record . type: "attributes"는 속성 변경일 때 반환합니다. "characterData"는 CharacterData 노드가 변경될 때 반환합니다. 그리고 "childList"는 트리에 속한 노드의 구조가 변경될 때 반환합니다.
record . target: 변경의 영향을 받은 노드를 반환합니다. 반환값은 변경 유형인 type에 따라 달라집니다. "attributes"인 경우에는 요소이며, 해당 요소의 속성이 변경되었습니다. 또한 "characterData"인 경우에는 CharacterData 노드입니다. 그리고 "childList"인 경우에는 노드이며, 해당 노드의 자식이 변경되었습니다.
record . addedNodes
record . removedNodes: 추가된 노드와 제거된 노드를 각각 반환합니다.
record . previousSibling
record . nextSibling: 각각 이전 형제 노드와 다음 형제 노드를 반환하며, 이는 추가되거나 제거된 노드를 기준으로 합니다. 그 외에는 null을 반환합니다.
record . attributeName: 변경된 속성의 로컬 이름을 반환하며, 해당 속성이 없으면 null을 반환합니다.
record . attributeNamespace: 변경된 속성의 네임스페이스를 반환하며, 해당 속성이 없으면 null을 반환합니다.
record . oldValue: 반환값은 type에 따라 달라집니다. 구체적으로, "attributes"의 경우 값을 반환합니다. 이는 변경된 속성의 변경 전 값입니다. "characterData"의 경우 데이터를 반환하며, 이는 변경된 노드의 변경 전 데이터입니다. 그리고 "childList"의 경우 null입니다.

type, target, addedNodes, removedNodes, previousSibling, nextSibling, attributeName, attributeNamespace, 그리고 oldValue 속성은 초기화된 값을 반환해야 한다.

4.4. 인터페이스 `Node`

[Exposed=Window]
interface Node : EventTarget {
  const unsigned short ELEMENT_NODE = 1;
  const unsigned short ATTRIBUTE_NODE = 2;
  const unsigned short TEXT_NODE = 3;
  const unsigned short CDATA_SECTION_NODE = 4;
  const unsigned short ENTITY_REFERENCE_NODE = 5; // legacy
  const unsigned short ENTITY_NODE = 6; // legacy
  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
  const unsigned short COMMENT_NODE = 8;
  const unsigned short DOCUMENT_NODE = 9;
  const unsigned short DOCUMENT_TYPE_NODE = 10;
  const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
  const unsigned short NOTATION_NODE = 12; // legacy
  readonly attribute unsigned short nodeType;
  readonly attribute DOMString nodeName;

  readonly attribute USVString baseURI;

  readonly attribute boolean isConnected;
  readonly attribute Document? ownerDocument;
  Node getRootNode(optional GetRootNodeOptions options = {});
  readonly attribute Node? parentNode;
  readonly attribute Element? parentElement;
  boolean hasChildNodes();
  [SameObject] readonly attribute NodeList childNodes;
  readonly attribute Node? firstChild;
  readonly attribute Node? lastChild;
  readonly attribute Node? previousSibling;
  readonly attribute Node? nextSibling;

  [CEReactions] attribute DOMString? nodeValue;
  [CEReactions] attribute DOMString? textContent;
  [CEReactions] undefined normalize();

  [CEReactions, NewObject] Node cloneNode(optional boolean subtree = false);
  boolean isEqualNode(Node? otherNode);
  boolean isSameNode(Node? otherNode); // legacy alias of ===

  const unsigned short DOCUMENT_POSITION_DISCONNECTED = 0x01;
  const unsigned short DOCUMENT_POSITION_PRECEDING = 0x02;
  const unsigned short DOCUMENT_POSITION_FOLLOWING = 0x04;
  const unsigned short DOCUMENT_POSITION_CONTAINS = 0x08;
  const unsigned short DOCUMENT_POSITION_CONTAINED_BY = 0x10;
  const unsigned short DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
  unsigned short compareDocumentPosition(Node other);
  boolean contains(Node? other);

  DOMString? lookupPrefix(DOMString? namespace);
  DOMString? lookupNamespaceURI(DOMString? prefix);
  boolean isDefaultNamespace(DOMString? namespace);

  [CEReactions] Node insertBefore(Node node, Node? child);
  [CEReactions] Node appendChild(Node node);
  [CEReactions] Node replaceChild(Node node, Node child);
  [CEReactions] Node removeChild(Node child);
};

dictionary GetRootNodeOptions {
  boolean composed = false;
};

Node는 모든 노드에서 사용하는 추상 인터페이스입니다. 이 인터페이스의 인스턴스를 직접 가져올 수는 없습니다.

각 노드에는 연결된 노드 문서가 있으며, 생성 시 설정되고 문서입니다.

노드의 노드 문서는 입양 알고리즘으로 변경할 수 있습니다.

노드의 부모 가져오기 알고리즘은 event가 주어지면 노드가 할당된 경우 노드의 할당된 슬롯을 반환합니다. 그렇지 않으면 노드의 부모를 반환합니다.

각 노드에는 등록된 관찰자 목록도 있습니다.

인터페이스 interface를 구현하는 노드를 생성하려면, 문서 document가 주어졌을 때 다음 단계를 수행합니다.

단언: interface는 Document도 아니고 다음과 같은 인터페이스도 아닙니다: 상속 대상이 Document인 인터페이스. 새 문서를 생성하려면 문서 생성을 대신 사용합니다.
새 노드를 반환합니다. 이 노드는 구현 대상이 interface이며, document의 관련 렐름에 있고, 노드 문서가 document로 설정되어 있습니다.

node . nodeType

node의 유형에 해당하는 숫자를 다음과 같이 반환합니다.

Element: Node . ELEMENT_NODE (1).
Attr: Node . ATTRIBUTE_NODE (2).
배타적 Text 노드: Node . TEXT_NODE (3).
CDATASection: Node . CDATA_SECTION_NODE (4).
ProcessingInstruction: Node . PROCESSING_INSTRUCTION_NODE (7).
Comment: Node . COMMENT_NODE (8).
Document: Node . DOCUMENT_NODE (9).
DocumentType: Node . DOCUMENT_TYPE_NODE (10).
DocumentFragment: Node . DOCUMENT_FRAGMENT_NODE (11).

node . nodeName

node의 유형에 해당하는 문자열을 다음과 같이 반환합니다.

Element: 해당 요소의 HTML 대문자화된 한정 이름입니다.
Attr: 해당 속성의 한정 이름입니다.
배타적 Text 노드: "#text"입니다.
CDATASection: "#cdata-section"입니다.
ProcessingInstruction: 해당 처리 명령의 대상입니다.
Comment: "#comment"입니다.
Document: "#document"입니다.
DocumentType: 해당 문서 유형의 이름입니다.
DocumentFragment: "#document-fragment"입니다.

nodeType 게터 단계에서는 this가 구현하는 인터페이스에 따라 분기하여 처음 일치하는 항목을 반환합니다.

Element: ELEMENT_NODE (1)
Attr: ATTRIBUTE_NODE (2);
배타적 Text 노드: TEXT_NODE (3);
CDATASection: CDATA_SECTION_NODE (4);
ProcessingInstruction: PROCESSING_INSTRUCTION_NODE (7);
Comment: COMMENT_NODE (8);
Document: DOCUMENT_NODE (9);
DocumentType: DOCUMENT_TYPE_NODE (10);
DocumentFragment: DOCUMENT_FRAGMENT_NODE (11).

nodeName 게터 단계에서는 this가 구현하는 인터페이스에 따라 분기하여 처음 일치하는 항목을 반환합니다.

Element: 해당 요소의 HTML 대문자화된 한정 이름입니다.
Attr: 해당 속성의 한정 이름입니다.
배타적 Text 노드: "#text"입니다.
CDATASection: "#cdata-section"입니다.
ProcessingInstruction: 해당 처리 명령의 대상입니다.
Comment: "#comment"입니다.
Document: "#document"입니다.
DocumentType: 해당 문서 유형의 이름입니다.
DocumentFragment: "#document-fragment"입니다.

node . baseURI: node의 노드 문서의 기준 URL을 반환합니다.

The baseURI getter 단계는 다음과 같습니다.

baseURL을 this의 노드 문서의 기준 URL 가져오기 알고리즘을 실행한 결과로 설정합니다.
baseURL이 null이면 baseURL을 this의 노드 문서의 URL로 설정합니다.
baseURL을 직렬화하여 반환합니다.

node . isConnected: node가 연결되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
node . ownerDocument: 노드 문서를 반환합니다. 문서에 대해서는 null을 반환합니다.
node . getRootNode(): node의 루트를 반환합니다.
node . getRootNode({ composed:true }): node의 섀도를 포함하는 루트를 반환합니다.
node . parentNode: 부모를 반환합니다.
node . parentElement: 부모 요소를 반환합니다.
node . hasChildNodes(): node에 자식이 있는지 반환합니다.
node . childNodes: 자식을 반환합니다.
node . firstChild: 첫 번째 자식을 반환합니다.
node . lastChild: 마지막 자식을 반환합니다.
node . previousSibling: 이전 형제를 반환합니다.
node . nextSibling: 다음 형제를 반환합니다.

isConnected getter 단계는 this가 연결되어 있으면 true를, 그렇지 않으면 false를 반환하는 것입니다.

ownerDocument getter 단계는 this가 문서이면 null을, 그렇지 않으면 this의 노드 문서를 반환하는 것입니다.

문서의 노드 문서는 해당 문서 자체입니다. 모든 노드에는 노드 문서가 항상 존재합니다.

getRootNode(options) 메서드 단계는 options["composed"] 가 true이면 this의 섀도를 포함하는 루트를 반환하고, 그렇지 않으면 this의 루트를 반환하는 것입니다.

parentNode getter 단계는 this의 부모를 반환하는 것입니다.

parentElement getter 단계는 this의 부모 요소를 반환하는 것입니다.

hasChildNodes() 메서드 단계는 this에 자식이 있으면 true를, 그렇지 않으면 false를 반환하는 것입니다.

childNodes getter 단계는 this를 루트로 하며 자식만 일치시키는 NodeList를 반환하는 것입니다.

firstChild getter 단계는 this의 첫 번째 자식을 반환하는 것입니다.

lastChild getter 단계는 this의 마지막 자식을 반환하는 것입니다.

previousSibling getter 단계는 this의 이전 형제를 반환하는 것입니다.

nextSibling getter 단계는 this의 다음 형제를 반환하는 것입니다.

nodeValue getter 단계는 this가 구현하는 인터페이스에 따라 다음 값을 반환하는 것입니다.

Attr: this의 값.
CharacterData: this의 데이터.
그 밖의 경우: Null.

nodeValue setter 단계는 주어진 값이 null이면 대신 빈 문자열인 것처럼 처리한 다음, this가 구현하는 인터페이스에 따라 아래와 같이 수행하는 것입니다.

Attr: 기존 속성 값 설정하기를 this 와 주어진 값을 사용하여 수행합니다.
CharacterData: 데이터 바꾸기를 this에 대해 0, this의 길이, 그리고 주어진 값을 사용하여 수행합니다.
그 밖의 경우: 아무 작업도 하지 않습니다.

노드 node에 대해 텍스트 콘텐츠 가져오기를 수행하려면, node가 구현하는 인터페이스에 따라 다음 값을 반환합니다.

DocumentFragment
Element: node의 자손 텍스트 콘텐츠.
Attr: node의 값.
CharacterData: node의 데이터.
그 밖의 경우: Null.

textContent getter 단계는 this에 대해 텍스트 콘텐츠 가져오기를 실행한 결과를 반환하는 것입니다.

문자열 전체 바꾸기를 문자열 string을 사용하여 노드 parent 내에서 수행하려면 다음 단계를 실행합니다.

node를 null로 설정합니다.
string이 빈 문자열이 아니면 node를 텍스트 노드 생성하기를 parent의 노드 문서와 string을 사용하여 수행한 결과로 설정합니다.
parent 내에서 node를 사용하여 전체 바꾸기를 수행합니다.

노드 node와 문자열 value를 사용하여 텍스트 콘텐츠 설정하기를 수행하려면, node가 구현하는 인터페이스에 따라 아래에 정의된 대로 수행합니다.

DocumentFragment
Element: node 내에서 value를 사용하여 문자열 전체 바꾸기를 수행합니다.
Attr: node와 value를 사용하여 기존 속성 값 설정하기를 수행합니다.
CharacterData: node에 대해 0, node의 길이, 그리고 value를 사용하여 데이터 바꾸기를 수행합니다.
그 밖의 경우: 아무 작업도 하지 않습니다.

textContent setter 단계는 주어진 값이 null이면 대신 빈 문자열인 것처럼 처리한 다음, 텍스트 콘텐츠 설정하기를 this와 주어진 값을 사용하여 실행하는 것입니다.

node . normalize(): 비어 있는 배타적 Text 노드를 제거하고, 남아 있는 연속된 배타적 Text 노드의 데이터를 해당 노드 중 첫 번째 노드에 연결합니다.

normalize() 메서드 단계는 this의 각 자손 배타적 Text 노드 node에 대해 다음 단계를 실행하는 것입니다.

length를 node의 길이로 설정합니다.
length가 0이면 node를 제거하고, 다음 배타적 Text 노드가 있으면 해당 노드로 계속 진행합니다.
data를 node의 연속된 배타적 Text 노드(자기 자신 제외)의 데이터를 트리 순서대로 연결한 결과로 설정합니다.
node의 데이터 바꾸기를 length, 0, data를 사용하여 수행합니다.
currentNode를 node의 다음 형제로 설정합니다.
currentNode가 배타적 Text 노드인 동안:
1. 시작 노드가 currentNode인 각 라이브 범위에 대해: 해당 시작 오프셋에 length를 더하고 시작 노드를 node로 설정합니다.
2. 끝 노드가 currentNode인 각 라이브 범위에 대해: 해당 끝 오프셋에 length를 더하고 끝 노드를 node로 설정합니다.
3. 시작 노드가 currentNode의 부모이고 시작 오프셋이 currentNode의 인덱스인 각 라이브 범위에 대해: 해당 시작 노드를 node로, 해당 시작 오프셋을 length로 설정합니다.
4. 끝 노드가 currentNode의 부모이고 끝 오프셋이 currentNode의 인덱스인 각 라이브 범위에 대해: 해당 끝 노드를 node로, 해당 끝 오프셋을 length로 설정합니다.
5. currentNode의 길이를 length에 더합니다.
6. currentNode를 해당 노드의 다음 형제로 설정합니다.
node의 연속된 배타적 Text 노드를 (자기 자신 제외) 트리 순서대로 제거합니다.

node . cloneNode([subtree = false]): node의 복사본을 반환합니다. subtree가 true이면 복사본에 node의 자손도 포함됩니다.
node . isEqualNode(otherNode): node와 otherNode가 동일한 속성을 갖는지 반환합니다.

명세는 모든 노드 또는 일부 노드에 대해 복제 단계를 정의할 수 있습니다. 이 알고리즘에는 노드 복제하기 알고리즘에 명시된 대로 node, copy, subtree가 전달됩니다.

HTML은 input, script, 그리고 template 등의 여러 요소에 대해 복제 단계를 정의합니다. SVG도 해당 script 요소에 대해 동일하게 정의해야 하지만, 정의하지 않습니다.

노드 node와 선택적 문서 document (기본값은 node의 노드 문서), 불리언 subtree(기본값 false), 노드 또는 null인 parent(기본값 null), 그리고 null 또는 CustomElementRegistry 객체 fallbackRegistry (기본값 null)가 주어졌을 때 노드 복제하기를 수행하려면:

단언: node는 문서가 아니거나 node가 document입니다.
copy를 node, document, fallbackRegistry가 주어졌을 때 단일 노드 복제하기를 수행한 결과로 설정합니다.
node에 대해 적용 가능한 다른 명세에 정의된 모든 복제 단계를 실행하고, node, copy, 그리고 subtree를 매개변수로 전달합니다.
parent가 null이 아니면 copy를 parent에 추가합니다.
subtree가 true이면 node의 자식 각각에 대해 트리 순서대로: child가 주어졌을 때 노드 복제하기를 수행하되, document는 document로, subtree는 subtree로, parent는 copy로, 그리고 fallbackRegistry는 fallbackRegistry로 설정합니다.
node가 요소이고, node가 섀도 호스트이며, node의 섀도 루트의 복제 가능 여부가 true이면:
1. 단언: copy는 섀도 호스트가 아닙니다.
2. shadowRootRegistry를 node의 섀도 루트의 사용자 정의 요소 레지스트리로 설정합니다.
3. shadowRootRegistry가 전역 사용자 정의 요소 레지스트리이면, shadowRootRegistry를 document의 사용자 정의 요소 레지스트리의 유효한 전역 사용자 정의 요소 레지스트리로 설정합니다.
4. copy, node의 섀도 루트의 모드, node의 섀도 루트의 포커스 위임 여부, node의 섀도 루트의 직렬화 가능 여부, node의 섀도 루트의 슬롯 할당, true, 그리고 shadowRootRegistry를 사용하여 섀도 루트 연결하기를 수행합니다.
5. copy의 섀도 루트의 선언적 여부를 node의 섀도 루트의 선언적 여부로 설정합니다.
6. copy의 섀도 루트의 사용자 정의 요소 레지스트리를 null로 유지를 node의 섀도 루트의 사용자 정의 요소 레지스트리를 null로 유지로 설정합니다.
7. node의 섀도 루트의 자식 각각에 대해 트리 순서대로: child가 주어졌을 때 노드 복제하기를 수행하되, document는 document로, subtree는 true로, 그리고 parent는 copy의 섀도 루트로 설정합니다.
  
  여기서는 의도적으로 fallbackRegistry 인수를 전달하지 않습니다.
copy를 반환합니다.

노드 node, 문서 document, 그리고 null 또는 CustomElementRegistry 객체 fallbackRegistry가 주어졌을 때 단일 노드 복제하기를 수행하려면:

copy를 null로 설정합니다.
node가 요소이면:
1. registry를 node의 사용자 정의 요소 레지스트리로 설정합니다.
2. registry가 null이면 registry를 fallbackRegistry로 설정합니다.
3. registry가 전역 사용자 정의 요소 레지스트리이면, registry를 document의 사용자 정의 요소 레지스트리의 유효한 전역 사용자 정의 요소 레지스트리로 설정합니다.
4. copy를 document, node의 지역 이름, node의 네임스페이스, node의 네임스페이스 접두사, node의 is 값, false, 그리고 registry가 주어졌을 때 요소 생성하기를 수행한 결과로 설정합니다.
5. node의 속성 목록에 있는 attribute 각각에 대해 다음을 수행합니다:
  1. copyAttribute를 attribute, document, null이 주어졌을 때 단일 노드 복제하기를 수행한 결과로 설정합니다.
  2. copyAttribute를 copy에 추가합니다.
그렇지 않고 node가 문서이면, copy를 document의 관련 영역이 주어졌을 때 문서 생성하기를 수행하여 node와 동일한 인터페이스를 구현하는 문서를 생성한 결과로 설정합니다.
그렇지 않으면 copy를 document가 주어졌을 때 노드 생성하기를 수행하여 node와 동일한 인터페이스를 구현하는 노드를 생성한 결과로 설정합니다.
node가 구현하는 인터페이스에 따라 다음 추가 요구 사항을 충족합니다.
Document
1. copy의 인코딩, 콘텐츠 유형, URL, 출처, 유형, 모드, 그리고 선언적 섀도 루트 허용 여부를 node의 해당 값으로 설정합니다.
2. copy의 기준 URL 재정의를 node의 기준 URL 가져오기를 실행한 결과로 설정합니다.
3. node의 사용자 정의 요소 레지스트리의 범위 지정 여부가 true이면, copy의 사용자 정의 요소 레지스트리를 node의 사용자 정의 요소 레지스트리로 설정합니다.
DocumentType

copy의 이름, 공개 ID, 그리고 시스템 ID를 node의 해당 값으로 설정합니다.

Attr

copy의 네임스페이스, 네임스페이스 접두사, 지역 이름, 그리고 값을 node의 해당 값으로 설정합니다.

Text
Comment

copy의 데이터를 node의 데이터로 설정합니다.

ProcessingInstruction

copy의 대상과 데이터를 node의 해당 값으로 설정합니다.

그 밖의 경우

아무 작업도 하지 않습니다.
단언: copy는 노드입니다.
node가 문서이면 document를 copy로 설정합니다.
copy의 노드 문서를 document로 설정합니다.
copy를 반환합니다.

cloneNode(subtree) 메서드 단계는 다음과 같습니다.

this가 섀도 루트이면 "NotSupportedError" DOMException을 던집니다.
this가 주어졌을 때 노드 복제하기를 수행하되, subtree를 subtree로 설정한 결과를 반환합니다.

노드 A는 다음 조건이 모두 참이면 노드 B와 동등합니다.

A와 B가 동일한 인터페이스를 구현합니다.
A가 구현하는 인터페이스에 따라 다음 항목이 서로 같습니다.

DocumentType
해당 이름, 공개 ID, 그리고 시스템 ID.
Element
해당 네임스페이스, 네임스페이스 접두사, 지역 이름, 그리고 해당 속성 목록의 크기.
Attr
해당 네임스페이스, 지역 이름, 그리고 값.
ProcessingInstruction
해당 대상과 데이터.
Text
Comment
해당 데이터.
그 밖의 경우
—
A가 요소이면, 해당 속성 목록의 각 속성은 B의 속성 목록에 있는 속성과 동등합니다.
A와 B는 동일한 수의 자식을 갖습니다.
A의 각 자식은 동일한 인덱스에 있는 B의 자식과 동등합니다.

isEqualNode(otherNode) 메서드 단계는 otherNode가 null이 아니고 this가 otherNode와 동등하면 true를, 그렇지 않으면 false를 반환하는 것입니다.

isSameNode(otherNode) 메서드 단계는 otherNode가 this이면 true를, 그렇지 않으면 false를 반환하는 것입니다.

node . compareDocumentPosition(other)

node에 대한 other의 상대적 위치를 나타내는 비트마스크를 반환합니다. 설정할 수 있는 비트는 다음과 같습니다.

Node . DOCUMENT_POSITION_DISCONNECTED (1): node와 other가 동일한 트리에 있지 않으면 설정됩니다.
Node . DOCUMENT_POSITION_PRECEDING (2): other가 node보다 앞에 있으면 설정됩니다.
Node . DOCUMENT_POSITION_FOLLOWING (4): other가 node보다 뒤에 있으면 설정됩니다.
Node . DOCUMENT_POSITION_CONTAINS (8): other가 node의 조상이면 설정됩니다.
Node . DOCUMENT_POSITION_CONTAINED_BY (16, 16진수로 10): other가 node의 자손이면 설정됩니다.

node . contains(other)

other가 node의 자기 자신을 포함한 자손이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

다음은 compareDocumentPosition() 이 마스크로 반환하는 상수입니다.

DOCUMENT_POSITION_DISCONNECTED (1);
DOCUMENT_POSITION_PRECEDING (2);
DOCUMENT_POSITION_FOLLOWING (4);
DOCUMENT_POSITION_CONTAINS (8);
DOCUMENT_POSITION_CONTAINED_BY (16, 16진수로 10);
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC (32, 16진수로 20).

compareDocumentPosition(other) 메서드 단계는 다음과 같습니다.

this 가 other이면 0을 반환합니다.
node1을 other로, node2를 this로 설정합니다.
attr1과 attr2를 null로 설정합니다.
node1이 속성이면 attr1을 node1로, node1을 attr1의 요소로 설정합니다.
node2가 속성이면:
1. attr2를 node2로, node2를 attr2의 요소로 설정합니다.
2. attr1과 node1이 null이 아니고 node2가 node1이면:
  1. node2의 속성 목록에 있는 attr 각각에 대해 다음을 수행합니다:
    1. attr이 attr1과 동등하면, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 와 DOCUMENT_POSITION_PRECEDING을 더한 결과를 반환합니다.
    2. attr이 attr2와 동등하면, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC 와 DOCUMENT_POSITION_FOLLOWING을 더한 결과를 반환합니다.
node1 또는 node2가 null이거나 node1의 루트가 node2의 루트와 다르면, DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC, 그리고 DOCUMENT_POSITION_PRECEDING 또는 DOCUMENT_POSITION_FOLLOWING 중 하나를 일관성이 유지되어야 한다는 제약에 따라 모두 더한 결과를 반환합니다.

DOCUMENT_POSITION_PRECEDING 또는 DOCUMENT_POSITION_FOLLOWING 중 무엇을 반환할지는 일반적으로 포인터 비교로 구현합니다. JavaScript 구현에서는 캐시된 Math.random() 값을 사용할 수 있습니다.
node1이 node2의 조상이고 attr1이 null이거나, node1이 node2이고 attr2가 null이 아니면, DOCUMENT_POSITION_CONTAINS를 DOCUMENT_POSITION_PRECEDING에 더한 결과를 반환합니다.
node1이 node2의 자손이고 attr2가 null이거나, node1이 node2이고 attr1이 null이 아니면, DOCUMENT_POSITION_CONTAINED_BY를 DOCUMENT_POSITION_FOLLOWING에 더한 결과를 반환합니다.
node1이 node2보다 앞에 있으면, DOCUMENT_POSITION_PRECEDING을 반환합니다.

이 알고리즘에서 속성을 처리하는 방식 때문에, 노드의 속성은 해당 노드의 자식보다 앞에 있는 것으로 간주됩니다. 이는 속성이 동일한 트리에 참여하지 않음에도 그렇습니다.
DOCUMENT_POSITION_FOLLOWING을 반환합니다.

contains(other) 메서드 단계는 other가 this의 자기 자신을 포함한 자손이면 true를, 그렇지 않으면 false를 (other가 null인 경우 포함) 반환하는 것입니다.

namespace를 사용하여 element의 네임스페이스 접두사 찾기를 수행하려면 다음 단계를 실행합니다.

element의 네임스페이스가 namespace이고 해당 네임스페이스 접두사가 null이 아니면, 해당 네임스페이스 접두사를 반환합니다.
element에 속성이 있고, 해당 속성의 네임스페이스 접두사가 "xmlns"이고 값이 namespace이면, element에서 그러한 첫 번째 속성의 지역 이름을 반환합니다.
element의 부모 요소가 null이 아니면, 해당 요소에 대해 namespace를 사용하여 네임스페이스 접두사 찾기를 실행한 결과를 반환합니다.
null을 반환합니다.

prefix를 사용하여 node의 네임스페이스 찾기를 수행하려면 node가 구현하는 인터페이스에 따라 분기합니다.

Element

prefix가 "xml"이면 XML 네임스페이스를 반환합니다.
prefix가 "xmlns"이면 XMLNS 네임스페이스를 반환합니다.
해당 네임스페이스가 null이 아니고 해당 네임스페이스 접두사가 prefix이면 네임스페이스를 반환합니다.
해당 요소에 속성이 있고, 그 속성의 네임스페이스가 XMLNS 네임스페이스이고, 네임스페이스 접두사가 "xmlns"이며, 지역 이름이 prefix이거나, prefix가 null이고 해당 요소에 속성이 있으며, 그 속성의 네임스페이스가 XMLNS 네임스페이스이고, 네임스페이스 접두사가 null이며, 지역 이름이 "xmlns"이면, 해당 값이 빈 문자열이 아닐 경우 그 값을 반환하고, 그렇지 않으면 null을 반환합니다.
해당 부모 요소가 null이면 null을 반환합니다.
해당 부모 요소에 대해 prefix를 사용하여 네임스페이스 찾기를 실행한 결과를 반환합니다.

Document

해당 문서 요소가 null이면 null을 반환합니다.
해당 문서 요소에 대해 prefix를 사용하여 네임스페이스 찾기를 실행한 결과를 반환합니다.

DocumentType

DocumentFragment

null을 반환합니다.

Attr

해당 요소가 null이면 null을 반환합니다.
해당 요소에 대해 prefix를 사용하여 네임스페이스 찾기를 실행한 결과를 반환합니다.

그 밖의 경우

해당 부모 요소가 null이면 null을 반환합니다.
해당 부모 요소에 대해 prefix를 사용하여 네임스페이스 찾기를 실행한 결과를 반환합니다.

lookupPrefix(namespace) 메서드 단계는 다음과 같습니다.

namespace가 null이거나 빈 문자열이면 null을 반환합니다.
this가 구현하는 인터페이스에 따라 분기합니다.
Element

this에 대해 namespace를 사용하여 네임스페이스 접두사 찾기를 수행한 결과를 반환합니다.

Document
1. this의 문서 요소가 null이면 null을 반환합니다.
2. this의 문서 요소에 대해 namespace를 사용하여 네임스페이스 접두사 찾기를 수행한 결과를 반환합니다.
DocumentType
DocumentFragment

null을 반환합니다.

Attr
1. this의 요소가 null이면 null을 반환합니다.
2. this의 요소에 대해 namespace를 사용하여 네임스페이스 접두사 찾기를 수행한 결과를 반환합니다.
그 밖의 경우
1. this의 부모 요소가 null이면 null을 반환합니다.
2. this의 부모 요소에 대해 namespace를 사용하여 네임스페이스 접두사 찾기를 수행한 결과를 반환합니다.

lookupNamespaceURI(prefix) 메서드 단계는 다음과 같습니다.

prefix가 빈 문자열이면 null로 설정합니다.
this에 대해 prefix를 사용하여 네임스페이스 찾기를 실행한 결과를 반환합니다.

isDefaultNamespace(namespace) 메서드 단계는 다음과 같습니다.

namespace가 빈 문자열이면 null로 설정합니다.
defaultNamespace를 this에 대해 null을 사용하여 네임스페이스 찾기를 실행한 결과로 설정합니다.
defaultNamespace가 namespace와 같으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

insertBefore(node, child) 메서드 단계는 child 앞에서 node를 this에 사전 삽입한 결과를 반환하는 것입니다.

appendChild(node) 메서드 단계는 node를 this에 추가한 결과를 반환하는 것입니다.

replaceChild(node, child) 메서드 단계는 this 내에서 child를 node로 교체한 결과를 반환하는 것입니다.

removeChild(child) 메서드 단계는 child를 this에서 사전 제거한 결과를 반환하는 것입니다.

노드 root에 대한 한정 이름이 qualifiedName인 요소 목록은 다음 알고리즘에 의해 반환되는 HTMLCollection입니다.

qualifiedName이 U+002A (*)이면, root를 루트로 하고 자손 요소만 일치시키는 필터를 가진 HTMLCollection을 반환합니다.
그렇지 않고 root의 노드 문서가 HTML 문서이면, root를 루트로 하고 다음 자손 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.
- 네임스페이스가 HTML 네임스페이스이고 한정 이름이 qualifiedName과 ASCII 소문자로 일치하는 요소.
- 네임스페이스가 HTML 네임스페이스가 아니고 한정 이름이 qualifiedName인 요소.
그렇지 않으면 root를 루트로 하고 자손 요소 중 한정 이름이 qualifiedName인 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.

동일한 인수로 호출하고 root의 노드 문서의 유형이 변경되지 않았다면, 이전 호출에서 반환했던 것과 동일한 HTMLCollection 객체를 반환할 수 있습니다.

노드 root에 대한 네임스페이스가 namespace이고 지역 이름이 localName인 요소 목록은 다음 알고리즘에 의해 반환되는 HTMLCollection입니다.

namespace가 빈 문자열이면 null로 설정합니다.
namespace와 localName이 모두 U+002A (*)이면, root를 루트로 하고 자손 요소만 일치시키는 필터를 가진 HTMLCollection을 반환합니다.
namespace가 U+002A (*)이면, root를 루트로 하고 자손 요소 중 지역 이름이 localName인 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.
localName이 U+002A (*)이면, root를 루트로 하고 자손 요소 중 네임스페이스가 namespace인 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.
root를 루트로 하고 자손 요소 중 네임스페이스가 namespace이고 지역 이름이 localName인 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.

동일한 인수로 호출하면 동일한 HTMLCollection 객체를 이전 호출에서 반환했던 것과 같이 반환할 수 있습니다.

노드 root에 대한 클래스 이름이 classNames인 요소 목록은 다음 알고리즘에 의해 반환되는 HTMLCollection입니다.

classes를 classNames에 대해 순서가 있는 집합 파서를 실행한 결과로 설정합니다.
classes가 빈 집합이면 빈 HTMLCollection을 반환합니다.
root를 루트로 하고 자손 요소 중 모든 클래스가 classes에 포함되는 요소를 일치시키는 필터를 가진 HTMLCollection을 반환합니다.

root의 노드 문서의 모드가 "quirks"이면 클래스 비교는 ASCII 대소문자를 구분하지 않는 방식으로 수행해야 하며, 그렇지 않으면 완전히 동일한지 비교하는 방식으로 수행해야 합니다.

동일한 인수로 호출하면 동일한 HTMLCollection 객체를 이전 호출에서 반환했던 것과 같이 반환할 수 있습니다.

4.5. 인터페이스 `Document`

[Exposed=Window]
interface Document : Node {
  constructor();

  [SameObject] readonly attribute DOMImplementation implementation;
  readonly attribute USVString URL;
  readonly attribute USVString documentURI;
  readonly attribute DOMString compatMode;
  readonly attribute DOMString characterSet;
  readonly attribute DOMString charset; // legacy alias of .characterSet
  readonly attribute DOMString inputEncoding; // legacy alias of .characterSet
  readonly attribute DOMString contentType;

  readonly attribute DocumentType? doctype;
  readonly attribute Element? documentElement;
  HTMLCollection getElementsByTagName(DOMString qualifiedName);
  HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  HTMLCollection getElementsByClassName(DOMString classNames);

  [CEReactions, NewObject] Element createElement(DOMString localName, optional (DOMString or ElementCreationOptions) options = {});
  [CEReactions, NewObject] Element createElementNS(DOMString? namespace, DOMString qualifiedName, optional (DOMString or ElementCreationOptions) options = {});
  [NewObject] DocumentFragment createDocumentFragment();
  [NewObject] Text createTextNode(DOMString data);
  [NewObject] CDATASection createCDATASection(DOMString data);
  [NewObject] Comment createComment(DOMString data);
  [NewObject] ProcessingInstruction createProcessingInstruction(DOMString target, DOMString data);

  [CEReactions, NewObject] Node importNode(Node node, optional (boolean or ImportNodeOptions) options = false);
  [CEReactions] Node adoptNode(Node node);

  [NewObject] Attr createAttribute(DOMString localName);
  [NewObject] Attr createAttributeNS(DOMString? namespace, DOMString qualifiedName);

  [NewObject] Event createEvent(DOMString interface); // legacy

  [NewObject] Range createRange();

  // NodeFilter.SHOW_ALL = 0xFFFFFFFF
  [NewObject] NodeIterator createNodeIterator(Node root, optional unsigned long whatToShow = 0xFFFFFFFF, optional NodeFilter? filter = null);
  [NewObject] TreeWalker createTreeWalker(Node root, optional unsigned long whatToShow = 0xFFFFFFFF, optional NodeFilter? filter = null);
};

[Exposed=Window]
interface XMLDocument : Document {};

dictionary ElementCreationOptions {
  CustomElementRegistry? customElementRegistry;
  DOMString is;
};

dictionary ImportNodeOptions {
  CustomElementRegistry customElementRegistry;
  boolean selfOnly = false;
};

Document 노드는 단순히 문서라고 합니다.

문서의 노드 문서는 해당 문서 자체입니다.

각 문서에는 다음이 연결되어 있습니다. 인코딩(인코딩), 콘텐츠 유형(문자열), URL(URL), 출처(출처), 유형("xml" 또는 "html"), 모드("no-quirks", "quirks" 또는 "limited-quirks"), 선언적 섀도 루트 허용 여부(불리언), 그리고 사용자 정의 요소 레지스트리(null 또는 CustomElementRegistry 객체)가 있습니다. [ENCODING] [URL] [HTML]

달리 명시하지 않는 한, 문서의 인코딩은 utf-8 인코딩이고, 콘텐츠 유형은 "application/xml"이며, URL은 "about:blank"이고, 출처는 불투명 출처이며, 유형은 "xml"이고, 모드는 "no-quirks"이며, 선언적 섀도 루트 허용 여부는 false이고, 사용자 정의 요소 레지스트리는 null입니다.

문서의 유형이 "xml"이면 해당 문서를 XML 문서라고 합니다. 그렇지 않으면 HTML 문서라고 합니다. 문서가 HTML 문서인지 XML 문서인지에 따라 일부 API의 동작이 달라집니다.

각 문서에는 기본 URL 가져오기 알고리즘이 연결되어 있으며, 이 알고리즘은 URL 또는 null을 반환합니다. 달리 명시하지 않는 한 null을 반환합니다.

각 문서에는 기본 URL 재정의(URL 또는 null)가 있으며, 초기값은 null입니다.

기본 URL 재정의는 복제를 통해 문서를 복제할 때 설정됩니다. HTML은 기본 URL 가져오기 알고리즘을 재정의하여 base 요소와 기본 URL이 "about:" 스킴인 문서에서 상속되는 경우를 처리합니다. [HTML]

문서의 모드가 비쿼크 모드이면 해당 문서는 비쿼크 모드에 있다고 합니다. 모드가 "no-quirks"인 경우입니다. 쿼크 모드는 모드가 "quirks"인 경우이며, 제한된 쿼크 모드는 모드가 "limited-quirks"인 경우입니다.

모드는 기본적으로 문서가 생성될 때의 기본값에서 변경되는 경우가 매우 제한적입니다. HTML 파서가 DOCTYPE 문자열의 존재 여부, 부재 또는 값에 따라 생성한 문서와 새로운 브라우징 컨텍스트(초기값 "about:blank")에 한해서 변경됩니다. [HTML]

비쿼크 모드는 원래 "표준 모드"라고 불렸고, 제한된 쿼크 모드는 한때 "거의 표준 모드"라고 불렸습니다. 세부 사항이 이제 표준으로 정의되기 때문에 명칭이 변경되었습니다. (또한 Ian Hickson이 기존 명칭은 의미가 통하지 않는다는 이유로 거부했기 때문입니다.)

문서의 부모 가져오기 알고리즘은 event를 입력으로 받아, event의 type 속성 값이 "load"이거나 문서에 브라우징 컨텍스트가 없으면 null을 반환합니다. 그렇지 않으면 문서의 관련 전역 객체를 반환합니다.

interface 인터페이스를 구현하는 문서를 생성하는 방법은 다음과 같습니다. 영역 realm이 주어집니다.

단언: interface는 Document 또는 다음을 상속하는 인터페이스입니다: Document.
새로운 노드를 반환합니다. 해당 노드가 구현하는 인터페이스는 interface이며, 해당 노드는 realm에 속합니다.

document = new Document(): 새 문서를 반환합니다.
document . implementation: document에 연결된 DOMImplementation 객체를 반환합니다.
document . URL
document . documentURI: document의 URL을 반환합니다.
document . compatMode: document의 모드가 "quirks"이면 문자열 "BackCompat"를 반환하고, 그렇지 않으면 "CSS1Compat"를 반환합니다.
document . characterSet: document의 인코딩을 반환합니다.
document . contentType: document의 콘텐츠 유형을 반환합니다.

new Document() 생성자의 단계는 this의 출처를 설정하는 것입니다. 설정할 출처는 현재 전역 객체의 연결된 Document의 출처입니다. [HTML]

createDocument()와 달리, 이 생성자는 XMLDocument 객체가 아니라 문서 (Document 객체)를 반환합니다.

implementation의 getter 단계는 this에 연결된 DOMImplementation 객체를 반환하는 것입니다.

URL 및 documentURI의 getter 단계는 this의 URL을 직렬화하여 반환하는 것입니다.

compatMode의 getter 단계는 this의 모드가 "quirks"이면 "BackCompat"를 반환하고, 그렇지 않으면 "CSS1Compat"를 반환하는 것입니다.

characterSet, charset 및 inputEncoding의 getter 단계는 this의 인코딩의 이름을 반환하는 것입니다.

contentType의 getter 단계는 this의 콘텐츠 유형을 반환하는 것입니다.

document . doctype

doctype을 반환하며, doctype이 없으면 null을 반환합니다.

document . documentElement

문서 요소를 반환합니다.

collection = document . getElementsByTagName(qualifiedName)

qualifiedName이 "*"이면 모든 하위 요소 요소의 HTMLCollection을 반환합니다.

그렇지 않으면 qualifiedName이 정규화된 이름과 일치하는 모든 하위 요소 요소의 HTMLCollection을 반환합니다. (HTML 문서 내 HTML 네임스페이스에 속하는 요소와는 대소문자를 구분하지 않고 일치합니다.)

collection = document . getElementsByTagNameNS(namespace, localName)

namespace와 localName이 모두 "*"이면 모든 하위 요소 요소의 HTMLCollection을 반환합니다.

namespace만 "*"이면 하위 요소 중 요소의 로컬 이름이 localName인 모든 요소의 HTMLCollection을 반환합니다.

localName만 "*"이면 하위 요소 중 요소의 네임스페이스가 namespace인 모든 요소의 HTMLCollection을 반환합니다.

그렇지 않으면 HTMLCollection을 반환합니다. 이 컬렉션에는 하위 요소 중 요소의 네임스페이스가 namespace이고 로컬 이름이 localName인 모든 요소가 포함됩니다.

collection = document . getElementsByClassName(classNames)

collection = element . getElementsByClassName(classNames)

반환값은 HTMLCollection 이며, 다음 요소들로 구성됩니다. 해당 메서드가 호출된 객체(문서 또는 요소) 내에 있으며, 모든 클래스를 가집니다. 이 클래스들을 지정하는 것은 classNames입니다. classNames 인수는 공백으로 구분된 목록으로 해석되며, 각 항목은 클래스입니다.

다음 doctype getter 단계는 다음을 반환하는 것입니다: 자식 중 this에 속하며 문서 유형인 것. 그렇지 않으면 null입니다.

다음 documentElement getter 단계는 다음을 반환하는 것입니다: this의 문서 요소.

다음 getElementsByTagName(qualifiedName) 메서드 단계는 다음을 반환하는 것입니다: 다음 한정 이름을 가진 요소 목록: qualifiedName 대상은 this입니다.

따라서 HTML 문서에서, document.getElementsByTagName("FOO") 는 다음과 일치합니다: <FOO> 요소 중 다음에 속하지 않는 요소: HTML 네임스페이스, 그리고 <foo> 요소 중 다음에 속하는 요소: 해당 HTML 네임스페이스. 그러나 <FOO> 요소 중 다음에 속하는 요소와는 일치하지 않습니다: HTML 네임스페이스.

다음 getElementsByTagNameNS(namespace, localName) 메서드 단계는 다음을 반환하는 것입니다: 네임스페이스가 namespace이고 로컬 이름이 localName인 요소 목록. 대상은 this입니다.

다음 getElementsByClassName(classNames) 메서드 단계는 다음을 반환하는 것입니다: 클래스 이름이 classNames인 요소 목록 대상은 this입니다.

다음 XHTML 조각이 주어졌다고 가정합니다:

<div id="example">
  <p id="p1" class="aaa bbb"/>
  <p id="p2" class="aaa ccc"/>
  <p id="p3" class="bbb ccc"/>
</div>

다음을 호출하면: document.getElementById("example").getElementsByClassName("aaa") 반환값은 HTMLCollection 이며, 다음 두 문단을 포함합니다: p1과 p2.

다음을 호출하면: getElementsByClassName("ccc bbb") 그러나 하나의 노드, 즉 p3만 반환합니다. 다음을 호출하면: document.getElementById("example").getElementsByClassName("bbb ccc ") 같은 결과를 반환합니다.

다음을 호출하면: getElementsByClassName("aaa,bbb") 아무 노드도 반환하지 않습니다. 위의 요소 중 어느 것도 다음 클래스에 속하지 않기 때문입니다: aaa,bbb 클래스.

element = document . createElement(localName [, options])

반환값은 요소이며, localName을 다음으로 가집니다: 로컬 이름 (document가 HTML 문서이면, localName은 소문자로 변환됩니다). 이 요소의 네임스페이스는 HTML 네임스페이스이며, 그 조건은 document가 HTML 문서이거나 document의 콘텐츠 유형이 "application/xhtml+xml"인 것입니다. 그렇지 않으면 null입니다.

제공된 경우, options의 customElementRegistry 는 사용할 수 있습니다. 설정 대상은 CustomElementRegistry입니다.

제공된 경우, options의 is 는 다음을 생성하는 데 사용할 수 있습니다: 사용자 정의 내장 요소.

localName이 유효한 요소 로컬 이름이 아니면 "InvalidCharacterError" DOMException 이 발생합니다.

options의 customElementRegistry 와 options의 is 가 모두 제공된 경우, "NotSupportedError" DOMException 이 발생합니다.

element = document . createElementNS(namespace, qualifiedName [, options])

반환값은 요소이며, 그 네임스페이스는 namespace입니다. 해당 요소의 네임스페이스 접두사는 다음 문자 앞의 모든 부분입니다: U+003A (:). 해당 문자는 qualifiedName 내의 문자이며, 없으면 null입니다. 해당 요소의 로컬 이름은 다음 문자 뒤의 모든 부분입니다: qualifiedName 내의 U+003A (:). 해당 문자가 없으면 qualifiedName입니다.

제공된 경우, options의 customElementRegistry 는 사용할 수 있습니다. 설정 대상은 CustomElementRegistry입니다.

제공된 경우, options의 is 는 다음을 생성하는 데 사용할 수 있습니다: 사용자 정의 내장 요소.

qualifiedName이 (접두사가 있을 수도 있는) 유효한 요소 로컬 이름이 아니면 "InvalidCharacterError" DOMException 이 발생합니다.

다음 조건 중 하나가 참이면 "NamespaceError" DOMException 이 발생합니다:

네임스페이스 접두사 가 null이 아니고 namespace가 빈 문자열입니다.
네임스페이스 접두사 가 "xml"이고 namespace가 다음이 아닙니다: XML 네임스페이스.
qualifiedName 또는 네임스페이스 접두사 가 "xmlns"이고 namespace가 다음이 아닙니다: XMLNS 네임스페이스.
namespace가 XMLNS 네임스페이스이고 qualifiedName도 네임스페이스 접두사도 "xmlns"가 아닙니다.

options의 customElementRegistry 와 options의 is 가 모두 제공된 경우, "NotSupportedError" DOMException 이 발생합니다.

documentFragment = document . createDocumentFragment()

반환값은 DocumentFragment 노드입니다.

text = document . createTextNode(data)

반환값은 Text 노드이며, 해당 노드의 데이터는 data입니다.

text = document . createCDATASection(data)

반환값은 CDATASection 노드이며, 해당 노드의 데이터는 data입니다.

comment = document . createComment(data)

반환값은 Comment 노드이며, 해당 노드의 데이터는 data입니다.

processingInstruction = document . createProcessingInstruction(target, data)

반환값은 ProcessingInstruction 노드이며, 해당 노드의 대상은 target이고 데이터는 data입니다. target이 다음과 일치하지 않으면: Name 생성 규칙, "InvalidCharacterError" DOMException 이 발생합니다. data에 "?>"가 포함되어 있으면 "InvalidCharacterError" DOMException 이 발생합니다.

다음 요소 인터페이스는 임의의 name과 namespace에 대해 Element입니다. 단, 달리 명시된 경우는 제외합니다.

예를 들어 HTML 표준에서는 html과 HTML 네임스페이스에 대해 HTMLHtmlElement 인터페이스가 사용된다고 정의합니다. [HTML]

다음 createElement(localName, options) 메서드 단계는 다음과 같습니다:

localName이 유효한 요소 로컬 이름이 아니면, 예외를 던집니다: "InvalidCharacterError" DOMException.
만약 this가 HTML 문서이면, localName을 다음으로 설정합니다: localName을 ASCII 소문자로 변환한 값.
registry와 is를 다음의 결과로 둡니다: 요소 생성 옵션 평탄화. 주어진 값은 options와 this입니다.
namespace를 HTML 네임스페이스로 둡니다. 그 조건은 this가 HTML 문서이거나 this의 콘텐츠 유형이 "application/xhtml+xml"인 것입니다. 그렇지 않으면 null로 둡니다.
다음의 결과를 반환합니다: 요소 생성. 주어진 값은 this, localName, namespace, null, is, true, 그리고 registry입니다.

다음 내부 createElementNS 단계는, 주어진 값이 document, namespace, qualifiedName, options일 때 다음과 같습니다:

(namespace, prefix, localName)을 다음의 결과로 둡니다: 유효성 검사 및 추출. 대상은 namespace와 qualifiedName이며, 주어진 값은 "element"입니다.
registry와 is를 다음의 결과로 둡니다: 요소 생성 옵션 평탄화. 주어진 값은 options와 this입니다.
다음의 결과를 반환합니다: 요소 생성. 주어진 값은 document, localName, namespace, prefix, is, true, 그리고 registry입니다.

다음 createElementNS(namespace, qualifiedName, options) 메서드 단계는 다음을 실행한 결과를 반환하는 것입니다: 내부 createElementNS 단계. 주어진 값은 this, namespace, qualifiedName, 그리고 options입니다.

다음과 같이 요소 생성 옵션을 평탄화합니다. 주어진 값은 문자열 또는 ElementCreationOptions 딕셔너리 options와 문서 document입니다:

registry를 다음의 결과로 둡니다: 사용자 정의 요소 레지스트리 조회 주어진 값은 document입니다.
is를 null로 둡니다.
options가 딕셔너리이면:
1. 만약 options["is"] 가 존재하면, 다음을 설정합니다: is를 해당 값으로 설정합니다.
2. 만약 options["customElementRegistry"] 가 존재하면:
  1. is가 null이 아니면, 예외를 던집니다: "NotSupportedError" DOMException.
  2. registry를 다음으로 설정합니다: options["customElementRegistry"].
3. registry가 null이 아니고, registry의 범위 지정 여부가 false이며, registry가 다음이 아니면: document의 사용자 정의 요소 레지스트리, 예외를 던집니다: "NotSupportedError" DOMException.
registry와 is를 반환합니다.

createElement() 와 createElementNS()의 options 매개변수는 웹 호환성을 위해 문자열일 수 있습니다.

다음 createDocumentFragment() 메서드 단계는 다음의 결과를 반환하는 것입니다: 문서 조각 생성. 주어진 값은 this입니다.

다음 createTextNode(data) 메서드 단계는 다음의 결과를 반환하는 것입니다: 텍스트 노드 생성. 주어진 값은 this와 data입니다.

다음 createCDATASection(data) 메서드 단계는 다음과 같습니다:

만약 this 가 HTML 문서이면, 다음 예외를 던집니다: "NotSupportedError" DOMException.
data에 문자열 "]]>"가 포함되어 있으면, 예외를 던집니다: "InvalidCharacterError" DOMException.
다음의 결과를 반환합니다: CDATA 섹션 노드 생성. 주어진 값은 this 와 data입니다.

다음 createComment(data) 메서드 단계는 다음의 결과를 반환하는 것입니다: 주석 노드 생성. 주어진 값은 this와 data입니다.

다음 createProcessingInstruction(target, data) 메서드 단계는 다음의 결과를 반환하는 것입니다: 생성하는 처리 명령 노드. 주어진 값은 this, target, 그리고 data입니다.

clone = document . importNode(node [, options = false])

node의 복사본을 반환합니다. options가 true이거나 options가 딕셔너리이며 그 selfOnly 가 false이면, 복사본에는 다음도 포함됩니다: node의 자손.

options의 customElementRegistry 는 다음을 설정하는 데 사용할 수 있습니다: CustomElementRegistry 를 가지지 않은 요소의 해당 레지스트리.

node가 문서 또는 섀도 루트이면, 다음 예외를 던집니다: "NotSupportedError" DOMException.

node = document . adoptNode(node)

node를 다른 문서에서 이동하고 반환합니다.

node가 문서이면, 다음 예외를 던집니다: "NotSupportedError" DOMException 또는, node가 섀도 루트이면, 다음 예외를 던집니다: "HierarchyRequestError" DOMException.

다음 importNode(node, options) 메서드 단계는 다음과 같습니다:

node가 문서 또는 섀도 루트이면, 예외를 던집니다: 다음 "NotSupportedError" DOMException.
subtree를 false로 둡니다.
registry를 null로 둡니다.
options가 불리언이면, subtree를 options로 설정합니다.
그렇지 않으면:
1. subtree를 다음의 논리 부정으로 설정합니다: options["selfOnly"].
2. 만약 options["customElementRegistry"] 가 존재하면, registry를 해당 값으로 설정합니다.
3. registry의 범위 지정 여부가 false이고 registry가 this의 사용자 정의 요소 레지스트리가 아니면, 예외를 던집니다: "NotSupportedError" DOMException.
registry가 null이면, registry를 다음의 결과로 설정합니다: 사용자 정의 요소 레지스트리 조회 주어진 값은 this입니다.
다음의 결과를 반환합니다: 노드 복제. 주어진 값은 node이며, document는 this로 설정하고, subtree는 subtree로 설정하며, fallbackRegistry는 registry로 설정합니다.

명세는 다음을 정의할 수 있습니다: 채택 단계. 대상은 모든 또는 일부 노드입니다. 이 알고리즘에는 node와 oldDocument가 전달되며, 이는 다음에 명시된 대로입니다: 채택 알고리즘.

다음과 같이 채택합니다. 노드 node를 받아들이는 것은 다음 문서 document입니다:

oldDocument를 node의 노드 문서로 둡니다.
node의 부모가 null이 아니면, 제거합니다: node를.
document가 oldDocument가 아니면, 각 inclusiveDescendant에 대해, node의 섀도를 포함하는 포괄적 자손을 다음 섀도를 포함하는 트리 순서로 처리합니다:
1. inclusiveDescendant의 노드 문서를 document로 설정합니다.
2. inclusiveDescendant가 섀도 루트이고 다음 중 하나라도 참이면:
  - inclusiveDescendant의 사용자 정의 요소 레지스트리 가 null이고 inclusiveDescendant의 사용자 정의 요소 레지스트리의 null 유지 여부가 false이거나,
  - inclusiveDescendant의 사용자 정의 요소 레지스트리 가 전역 사용자 정의 요소 레지스트리이면,
  inclusiveDescendant의 사용자 정의 요소 레지스트리를 다음으로 설정합니다: document의 사용자 정의 요소 레지스트리의 유효 전역 사용자 정의 요소 레지스트리.
3. 그렇지 않고, inclusiveDescendant가 요소이면:
  1. 다음 노드 문서를 설정합니다. 각 속성은 inclusiveDescendant의 속성 목록에 있으며, 설정할 값은 document입니다.
  2. inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이거나 inclusiveDescendant의 사용자 정의 요소 레지스트리의 범위 지정 여부가 false이면:
    1. registry를 null로 둡니다.
    2. inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이 아니거나, inclusiveDescendant의 부모가 null이거나, inclusiveDescendant의 부모가 배타적 DocumentFragment 노드이면, registry를 설정합니다. 설정할 값은 document의 사용자 정의 요소 레지스트리입니다.
    3. 그렇지 않으면, registry를 다음의 결과로 설정합니다: 사용자 정의 요소 레지스트리 조회. 주어진 값은 inclusiveDescendant의 부모입니다.
    4. inclusiveDescendant의 사용자 정의 요소 레지스트리를 다음으로 설정합니다: registry의 유효 전역 사용자 정의 요소 레지스트리.
  3. inclusiveDescendant가 사용자 정의이면, 사용자 정의 요소 콜백 반응을 큐에 넣습니다. 사용할 값은 inclusiveDescendant, 콜백 이름 "adoptedCallback", 그리고 « oldDocument, document »입니다.
4. 다음 채택 단계를 실행합니다. 사용할 값은 inclusiveDescendant와 oldDocument입니다.

다음 adoptNode(node) 메서드 단계는 다음과 같습니다:

node가 문서이면, 예외를 던집니다: "NotSupportedError" DOMException.
node가 섀도 루트이면, 예외를 던집니다: "HierarchyRequestError" DOMException.
채택합니다: node를 this로.
node를 반환합니다.

null 또는 CustomElementRegistry 객체인 registry는 다음일 때 전역 사용자 정의 요소 레지스트리입니다: registry가 null이 아니고 registry의 범위 지정 여부가 false입니다.

null 또는 CustomElementRegistry 객체인 registry의 유효 전역 사용자 정의 요소 레지스트리는 다음과 같습니다:

registry가 전역 사용자 정의 요소 레지스트리이면, 반환합니다: registry를.
null을 반환합니다.

다음 createAttribute(localName) 메서드 단계는 다음과 같습니다:

localName이 유효한 속성 로컬 이름이 아니면, 예외를 던집니다: "InvalidCharacterError" DOMException.
만약 this가 HTML 문서이면, 설정합니다: localName을 다음으로: localName을 ASCII 소문자로 변환한 값.
다음의 결과를 반환합니다: 속성 생성. 주어진 값은 this와 localName입니다.

다음 createAttributeNS(namespace, qualifiedName) 메서드 단계는 다음과 같습니다:

(namespace, prefix, localName)을 다음의 결과로 둡니다: 유효성 검사 및 추출. 대상은 namespace와 qualifiedName이며, 주어진 값은 "attribute"입니다.
다음의 결과를 반환합니다: 속성 생성. 주어진 값은 this, localName, namespace, 그리고 prefix입니다.

다음 createEvent(interface) 메서드 단계는 다음과 같습니다:

constructor를 null로 둡니다.

interface가 ASCII 대소문자를 구분하지 않고 다음 문자열 중 하나와 일치하면, 즉 다음 표의 첫 번째 열에 있는 문자열과 일치하면, constructor를 일치하는 문자열과 같은 행의 두 번째 열에 있는 인터페이스로 설정합니다:

문자열	인터페이스	참고
"`beforeunloadevent`"	`BeforeUnloadEvent`	[HTML]
"`compositionevent`"	`CompositionEvent`	[UIEVENTS]
"`customevent`"	`CustomEvent`
"`devicemotionevent`"	`DeviceMotionEvent`	[DEVICE-ORIENTATION]
"`deviceorientationevent`"	`DeviceOrientationEvent`	[DEVICE-ORIENTATION]
"`dragevent`"	`DragEvent`	[HTML]
"`event`"	`Event`
"`events`"	`Event`
"`focusevent`"	`FocusEvent`	[UIEVENTS]
"`hashchangeevent`"	`HashChangeEvent`	[HTML]
"`htmlevents`"	`Event`
"`keyboardevent`"	`KeyboardEvent`	[UIEVENTS]
"`messageevent`"	`MessageEvent`	[HTML]
"`mouseevent`"	`MouseEvent`	[UIEVENTS]
"`mouseevents`"	`MouseEvent`	[UIEVENTS]
"`storageevent`"	`StorageEvent`	[HTML]
"`svgevents`"	`Event`
"`textevent`"	`TextEvent`	[UIEVENTS]
"`touchevent`"	`TouchEvent`	[TOUCH-EVENTS]
"`uievent`"	`UIEvent`	[UIEVENTS]
"`uievents`"	`UIEvent`	[UIEVENTS]

constructor가 null이면, 예외를 던집니다: "NotSupportedError" DOMException.
constructor가 나타내는 인터페이스가 다음에 노출되지 않으면: 관련 전역 객체, 그 소유자는 this이며, 이 경우 예외를 던집니다: "NotSupportedError" DOMException.

일반적으로 사용자 에이전트는 일부 구성에서 터치 이벤트 지원을 비활성화하며, 이 경우 이 조항은 다음 인터페이스에 대해 적용됩니다: TouchEvent.
event를 다음의 결과로 둡니다: 이벤트 생성. 주어진 값은 constructor입니다.
초기화할 것은 event의 type 속성이며, 빈 문자열로 초기화합니다.
초기화할 것은 event의 timeStamp 속성이며, 다음을 호출한 결과로 초기화합니다: 현재 고해상도 시간. 사용할 값은 this의 관련 전역 객체입니다.
초기화할 것은 event의 isTrusted 속성이며, false로 초기화합니다.
event의 초기화됨 플래그를 해제합니다.
event를 반환합니다.

이벤트 생성자를 대신 사용해야 합니다.

다음 createRange() 메서드 단계는 새로운 라이브 범위를 반환하는 것입니다. (this, 0)을 해당 범위의 시작과 끝으로 가집니다.

다음 Range() 생성자를 대신 사용할 수 있습니다.

다음 createNodeIterator(root, whatToShow, filter) 메서드 단계는 다음과 같습니다:

iterator를 새로운 NodeIterator 객체로 둡니다.
iterator의 루트를 root로 설정합니다.
iterator의 참조를 (root, true)로 설정합니다.
iterator의 whatToShow를 whatToShow로 설정합니다.
iterator의 필터를 filter로 설정합니다.
iterator를 반환합니다.

다음 createTreeWalker(root, whatToShow, filter) 메서드 단계는 다음과 같습니다:

walker를 새로운 TreeWalker 객체로 둡니다.
walker의 루트와 walker의 현재 노드를 root로 설정합니다.
walker의 whatToShow를 whatToShow로 설정합니다.
walker의 필터를 filter로 설정합니다.
walker를 반환합니다.

4.5.1. 인터페이스 `DOMImplementation`

사용자 에이전트는 다음 DOMImplementation 객체를 생성해야 합니다. 이는 문서가 생성될 때마다 수행하며, 해당 객체를 그 문서와 연결해야 합니다.

[Exposed=Window]
interface DOMImplementation {
  [NewObject] DocumentType createDocumentType(DOMString name, DOMString publicId, DOMString systemId);
  [NewObject] XMLDocument createDocument(DOMString? namespace, [LegacyNullToEmptyString] DOMString qualifiedName, optional DocumentType? doctype = null);
  [NewObject] Document createHTMLDocument(optional DOMString title);

  boolean hasFeature(); // 과거의 기능; 항상 true를 반환합니다
};

doctype = document . implementation . createDocumentType(name, publicId, systemId): 반환값은 문서 유형이며, 주어진 name, publicId, systemId를 가집니다.
name이 유효한 문서 유형 이름이 아니면, "InvalidCharacterError" DOMException 이 발생합니다.
doc = document . implementation . createDocument(namespace, qualifiedName [, doctype = null]): 반환값은 XMLDocument이며, 다음을 가집니다: 문서 요소. 해당 요소의 로컬 이름은 qualifiedName이고 해당 요소의 네임스페이스는 namespace입니다(qualifiedName이 빈 문자열인 경우는 제외합니다). 또한 doctype이 주어지면 이를 문서 유형으로 가집니다.
이 메서드는 다음 createElementNS() 메서드와 동일한 예외를 던지며, 이는 namespace와 qualifiedName으로 호출했을 때의 예외입니다.
doc = document . implementation . createHTMLDocument([title]): 반환값은 문서이며, 기본적인 트리가 이미 구성되어 있고 다음을 포함합니다: title 요소. 단, title 인수가 생략된 경우는 제외합니다.

다음 createDocumentType(name, publicId, systemId) 메서드 단계는 다음과 같습니다:

name이 유효한 문서 유형 이름이 아니면, 다음 예외를 던집니다: "InvalidCharacterError" DOMException.
다음의 결과를 반환합니다: 문서 유형 생성. 주어진 값은 연결된 문서, 즉 this에 연결된 문서와, name, publicId, 그리고 systemId입니다.

다음 createDocument(namespace, qualifiedName, doctype) 메서드 단계는 다음과 같습니다:

document를 다음의 결과로 둡니다: 문서 생성. 이 문서가 구현하는 것은 XMLDocument이며, 주어진 값은 this의 관련 렐름입니다.
element를 null로 둡니다.
qualifiedName이 빈 문자열이 아니면, element를 다음 실행 결과로 설정합니다: 내부 createElementNS 단계. 주어진 값은 document, namespace, qualifiedName, 그리고 빈 딕셔너리입니다.
doctype이 null이 아니면, 덧붙입니다: doctype을 document에.
element가 null이 아니면, 덧붙입니다: element를 document에.
document의 출처는 this에 연결된 문서의 출처입니다.
document의 콘텐츠 유형은 다음에 따라 결정됩니다: namespace:

HTML 네임스페이스
application/xhtml+xml
SVG 네임스페이스
image/svg+xml
그 밖의 모든 네임스페이스
application/xml
document를 반환합니다.

다음 createHTMLDocument(title) 메서드 단계는 다음과 같습니다:

doc을 다음의 결과로 둡니다: 문서 생성. 이 문서가 구현하는 것은 Document이며, 주어진 값은 this의 관련 렐름입니다.
doc의 유형을 "html"로 설정하고 콘텐츠 유형을 "text/html"로 설정합니다.
doctype을 다음의 결과로 둡니다: 문서 유형 생성. 주어진 값은 doc과 "html"입니다.
덧붙입니다: doctype을 doc에.
덧붙입니다: 다음의 결과를. 요소 생성에 주어진 값은 doc, "html", 그리고 HTML 네임스페이스이며, 덧붙일 대상은 doc입니다.
덧붙입니다: 다음의 결과를. 요소 생성에 주어진 값은 doc, "head", 그리고 HTML 네임스페이스이며, 덧붙일 대상은 html 요소로, 앞서 생성한 것입니다.
title이 주어지면:
1. 덧붙입니다: 다음 작업의 결과를. 생성할 것은 요소이며, 주어진 값은 doc, "title", 그리고 HTML 네임스페이스입니다. 덧붙일 대상은 head 요소로, 앞서 생성한 것입니다.
2. text를 다음의 결과로 둡니다: 텍스트 노드 생성. 주어진 값은 doc과 title(빈 문자열일 수 있습니다)입니다.
3. 덧붙입니다: text를 다음 title 요소에. 이 요소는 앞서 생성한 것입니다.
덧붙입니다: 다음의 결과를. 요소 생성에 주어진 값은 doc, "body", 그리고 HTML 네임스페이스이며, 덧붙일 대상은 html 요소로, 앞서 생성한 것입니다.
doc의 출처는 this에 연결된 문서의 출처입니다.
doc을 반환합니다.

다음 hasFeature() 메서드 단계는 true를 반환하는 것입니다.

hasFeature() 는 원래 사용자 에이전트가 주어진 DOM 기능을 지원한다고 주장하는지 보고했지만, 실제 경험을 통해 원하는 객체, 속성 또는 메서드가 존재하는지 단순히 확인하는 것만큼 신뢰할 수 있거나 세밀하지 않다는 점이 입증되었습니다. 따라서 더 이상 사용해서는 안 되지만, 계속 존재하며(단순히 true를 반환합니다), 이는 이전 페이지가 작동을 멈추지 않도록 하기 위한 것입니다.

4.6. 인터페이스 `DocumentType`

[Exposed=Window]
interface DocumentType : Node {
  readonly attribute DOMString name;
  readonly attribute DOMString publicId;
  readonly attribute DOMString systemId;
};

DocumentType 노드는 간단히 다음과 같이 부릅니다: 문서 유형.

문서 유형에는 다음이 연결되어 있습니다: 이름(문자열), 공개 ID(문자열), 그리고 시스템 ID(문자열).

다음과 같이 문서 유형을 생성합니다. 주어진 값은 문서 document, 문자열 name, 그리고 선택적으로 문자열 publicId(기본값은 빈 문자열)와 문자열 systemId(기본값은 빈 문자열)입니다:

doctype을 다음의 결과로 둡니다: 노드 생성. 이 노드가 구현하는 것은 DocumentType이며, 주어진 값은 document입니다.
doctype의 이름을 name으로, 공개 ID를 publicId로, 그리고 시스템 ID를 systemId로 설정합니다.
doctype을 반환합니다.

다음 name getter 단계는 다음을 반환하는 것입니다: this의 이름.

다음 publicId getter 단계는 다음을 반환하는 것입니다: this의 공개 ID.

다음 systemId getter 단계는 다음을 반환하는 것입니다: this의 시스템 ID.

4.7. 인터페이스 `DocumentFragment`

[Exposed=Window]
interface DocumentFragment : Node {
  constructor();
};

tree = new DocumentFragment(): 새로운 DocumentFragment 노드를 반환합니다.

배타적 DocumentFragment 노드는 DocumentFragment 노드이지만 ShadowRoot 노드는 아닙니다.

DocumentFragment 노드에는 연결된 호스트(null 또는 다른 요소이며, 이 요소는 다른 노드 트리에 속합니다)가 있습니다. 이는 달리 명시하지 않는 한 null입니다.

객체 A가 호스트 포함 포괄적 조상인 것은 객체 B에 대해 A가 포괄적 조상이거나, 또는 B의 루트에 null이 아닌 호스트가 있고 A가 호스트 포함 포괄적 조상으로서 B의 루트의 호스트에 대해 성립하는 경우입니다.

DocumentFragment 노드의 호스트 개념은 HTML의 template 요소와 섀도 루트에 유용하며, 사전 삽입 및 교체 알고리즘에 영향을 줍니다.

다음과 같이 생성합니다: 문서 조각을. 주어진 값은 문서 document입니다: 다음의 결과를 반환합니다: 노드 생성. 이 노드가 구현하는 것은 DocumentFragment이며, 주어진 값은 document입니다.

다음 new DocumentFragment() 생성자 단계는 다음을 설정하는 것입니다: this의 노드 문서를 현재 전역 객체의 연결된 Document로.

4.8. 인터페이스 `ShadowRoot`

[Exposed=Window]
interface ShadowRoot : DocumentFragment {
  readonly attribute ShadowRootMode mode;
  readonly attribute boolean delegatesFocus;
  readonly attribute boolean serializable;
  readonly attribute SlotAssignmentMode slotAssignment;
  readonly attribute boolean clonable;
  readonly attribute Element host;

  attribute EventHandler onslotchange;
};

enum ShadowRootMode { "open", "closed" };
enum SlotAssignmentMode { "manual", "named" };

ShadowRoot 노드는 간단히 섀도 루트라고 합니다.

섀도 루트에 연결된 호스트는 절대로 null이 아닙니다.

섀도 루트에는 연결된 모드("open" 또는 "closed")가 있습니다.

섀도 루트에는 연결된 포커스 위임 (불리언)이 있습니다. 초기값은 false입니다.

섀도 루트에는 다음 항목이 연결되어 있습니다. 요소 내부에서 사용 가능(불리언)이며, 초기값은 false입니다.

섀도 루트에는 연결된 선언적 여부 (불리언)가 있습니다. 초기값은 false입니다.

섀도 루트에는 연결된 직렬화 가능 여부(불리언)가 있습니다. 초기값은 false입니다.

섀도 루트에는 연결된 슬롯 할당 ("manual" 또는 "named")이 있습니다.

섀도 루트에는 연결된 복제 가능 여부(불리언)가 있습니다. 초기값은 false입니다.

섀도 루트에는 연결된 사용자 정의 요소 레지스트리 (null 또는 CustomElementRegistry 객체)가 있습니다. 초기값은 null입니다.

섀도 루트에는 다음 항목이 연결되어 있습니다. 사용자 정의 요소 레지스트리를 null로 유지(불리언)입니다. 초기값은 false입니다.

이 값은 선언적 섀도 루트와 함께 사용될 때만 true가 될 수 있습니다. 또한 섀도 루트의 사용자 정의 요소 레지스트리가 null인 동안에만 의미가 있습니다.

섀도 루트의 부모 가져오기 알고리즘은 event가 주어졌을 때, event의 합성 플래그가 설정되지 않았고 섀도 루트가 event의 경로에서 첫 번째 이벤트 경로 항목의 호출 대상의 루트이면 null을 반환합니다. 그렇지 않으면 섀도 루트의 호스트를 반환합니다.

다음 mode getter 단계는 다음을 반환하는 것입니다: this의 모드.

다음 delegatesFocus getter 단계는 다음을 반환하는 것입니다: this의 포커스 위임 여부.

다음 serializable getter 단계는 다음을 반환하는 것입니다: this의 직렬화 가능 여부.

다음 slotAssignment getter 단계는 다음을 반환하는 것입니다: this의 슬롯 할당.

다음 clonable getter 단계는 다음을 반환하는 것입니다: this의 복제 가능 여부.

다음 host getter 단계는 다음을 반환하는 것입니다: this의 호스트.

onslotchange 속성은 onslotchange 이벤트 핸들러를 위한 이벤트 핸들러 IDL 속성이며, 해당 이벤트 핸들러 이벤트 유형은 slotchange입니다.

섀도 포함 트리 순서는 섀도 포함 전위 깊이 우선 순회에 따른 노드 트리의 순서입니다. 노드 트리 tree의 섀도 포함 전위 깊이 우선 순회는 tree의 전위 깊이 우선 순회이며, 각 섀도 호스트를 tree에서 만날 때마다 해당 요소의 섀도 루트의 노드 트리에 대한 섀도 포함 전위 깊이 우선 순회를 섀도 호스트를 만난 직후에 수행합니다.

객체의 섀도 포함 루트는 해당 객체의 루트의 호스트의 섀도 포함 루트입니다. 단, 해당 객체의 루트가 섀도 루트인 경우이며, 그렇지 않으면 해당 객체의 루트입니다.

객체 A가 객체 B의 섀도 포함 자손인 것은 A가 B의 자손이거나, A의 루트가 섀도 루트이고 A의 루트의 호스트가 B의 섀도 포함 포괄적 자손인 경우입니다.

섀도 포함 포괄적 자손은 객체 자신 또는 해당 객체의 섀도 포함 자손 중 하나입니다.

객체 A가 객체 B의 섀도 포함 조상인 것은 B가 A의 섀도 포함 자손인 경우에 한합니다.

섀도 포함 포괄적 조상은 객체 자신 또는 해당 객체의 섀도 포함 조상 중 하나입니다.

노드 A가 노드 B에서 닫힌 섀도에 의해 숨겨진 것은 다음 조건이 모두 참인 경우입니다.

A의 루트가 섀도 루트입니다.
A의 루트가 B의 섀도 포함 포괄적 조상이 아닙니다.
A의 루트가 섀도 루트이고 해당 모드가 "closed"이거나, A의 루트의 호스트가 B에서 닫힌 섀도에 의해 숨겨져 있습니다.

객체 B를 기준으로 객체 A의 대상을 재지정하려면, 객체가 반환될 때까지 다음 단계를 반복합니다.

다음 중 하나라도 참이면
- A가 노드가 아닌 경우
- A의 루트가 섀도 루트가 아닌 경우
- B가 노드이고 A의 루트가 B의 섀도 포함 포괄적 조상인 경우
A를 반환합니다.
A를 A의 루트의 호스트로 설정합니다.

대상 재지정 알고리즘은 이벤트 디스패치뿐만 아니라 Fullscreen과 같은 다른 명세에서도 사용됩니다. [FULLSCREEN]

4.9. 인터페이스 `Element`

[Exposed=Window]
interface Element : Node {
  readonly attribute DOMString? namespaceURI;
  readonly attribute DOMString? prefix;
  readonly attribute DOMString localName;
  readonly attribute DOMString tagName;

  [CEReactions] attribute DOMString id;
  [CEReactions] attribute DOMString className;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  [CEReactions, Unscopable] attribute DOMString slot;

  boolean hasAttributes();
  [SameObject] readonly attribute NamedNodeMap attributes;
  sequence<DOMString> getAttributeNames();
  DOMString? getAttribute(DOMString qualifiedName);
  DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  [CEReactions] undefined setAttribute(DOMString qualifiedName, (TrustedType or DOMString) value);
  [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, (TrustedType or DOMString) value);
  [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  boolean hasAttribute(DOMString qualifiedName);
  boolean hasAttributeNS(DOMString? namespace, DOMString localName);

  Attr? getAttributeNode(DOMString qualifiedName);
  Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  [CEReactions] Attr? setAttributeNode(Attr attr);
  [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  [CEReactions] Attr removeAttributeNode(Attr attr);

  ShadowRoot attachShadow(ShadowRootInit init);
  readonly attribute ShadowRoot? shadowRoot;

  readonly attribute CustomElementRegistry? customElementRegistry;

  Element? closest(DOMString selectors);
  boolean matches(DOMString selectors);
  boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches

  HTMLCollection getElementsByTagName(DOMString qualifiedName);
  HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  HTMLCollection getElementsByClassName(DOMString classNames);

  [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};

dictionary ShadowRootInit {
  required ShadowRootMode mode;
  boolean delegatesFocus = false;
  boolean serializable = false;
  SlotAssignmentMode slotAssignment = "named";
  boolean clonable = false;
  CustomElementRegistry? customElementRegistry;
};

ShadowRootInit은 다소 이례적으로 undefined와 null을 모두 customElementRegistry 멤버에 전달할 수 있도록 허용합니다. 이는 웹 개발자가 사전 대신 ShadowRoot 노드를 attachShadow()에 전달할 수 있도록 하기 위한 것입니다.

Element 노드는 간단히 요소라고 합니다.

요소에는 다음 항목이 연결되어 있습니다.

네임스페이스: Null 또는 비어 있지 않은 문자열입니다.
네임스페이스 접두사: Null 또는 비어 있지 않은 문자열입니다.
로컬 이름: 비어 있지 않은 문자열입니다.
사용자 정의 요소 레지스트리: Null 또는 CustomElementRegistry 객체입니다.
사용자 정의 요소 상태: "undefined", "failed", "uncustomized", "precustomized" 또는 "custom"입니다.
사용자 정의 요소 정의: Null 또는 사용자 정의 요소 정의입니다.
is 값: Null 또는 유효한 사용자 정의 요소 이름입니다.

요소가 생성될 때 이러한 값은 모두 초기화됩니다.

요소의 사용자 정의 요소 상태가 "uncustomized" 또는 "custom"이면 정의된 것으로 간주합니다. 요소의 사용자 정의 요소 상태가 "custom"이면 사용자 정의 요소라고 합니다.

요소가 정의되었는지 여부는 :defined 의사 클래스의 동작을 결정하는 데 사용됩니다. 요소가 사용자 정의 요소인지 여부는 변경 알고리즘의 동작을 결정하는 데 사용됩니다. "failed"와 "precustomized" 상태는 사용자 정의 요소 생성자가 처음에 올바르게 실행되지 못한 경우 업그레이드를 통해 다시 실행되지 않도록 보장하는 데 사용됩니다.

다음 코드는 이러한 네 가지 상태 각각에 해당하는 요소를 보여 줍니다.

<!DOCTYPE html>
<script>
  window.customElements.define("sw-rey", class extends HTMLElement {})
  window.customElements.define("sw-finn", class extends HTMLElement {}, { extends: "p" })
  window.customElements.define("sw-kylo", class extends HTMLElement {
    constructor() {
      // 이 예제에서는 의도적으로 super() 호출을 생략했습니다.
    }
  })
</script>

<!-- "undefined" (정의되지 않음, 사용자 정의 요소가 아님) -->
<sw-han></sw-han>
<p is="sw-luke"></p>
<p is="asdf"></p>

<!-- "failed" (정의되지 않음, 사용자 정의 요소가 아님) -->
<sw-kylo></sw-kylo>

<!-- "uncustomized" (정의됨, 사용자 정의 요소가 아님) -->
<p></p>
<asdf></asdf>

<!-- "custom" (정의됨, 사용자 정의 요소임) -->
<sw-rey></sw-rey>
<p is="sw-finn"></p>

요소에는 연결된 섀도 루트(null 또는 섀도 루트)도 있습니다. 달리 명시하지 않는 한 null입니다. 요소는 자신의 섀도 루트가 null이 아니면 섀도 호스트라고 합니다.

요소의 한정 이름은 네임스페이스 접두사가 null이면 해당 요소의 로컬 이름입니다. 그렇지 않으면 해당 요소의 네임스페이스 접두사 뒤에 ":"를 붙이고, 그 뒤에 해당 요소의 로컬 이름을 붙인 것입니다.

요소의 HTML 대문자화된 한정 이름은 다음 단계의 반환값입니다.

qualifiedName을 다음으로 둡니다: this의 한정 이름.
만약 this가 HTML 네임스페이스에 속하고 그 노드 문서가 HTML 문서이면, 다음을 반환합니다: qualifiedName을 ASCII 대문자로 변환한 값.
qualifiedName을 반환합니다.

사용자 에이전트는 한정 이름과 HTML 대문자화된 한정 이름을 내부 슬롯에 저장하여 최적화할 수 있습니다.

요소를 생성하려면, 문서 document, 문자열 localName, 문자열 또는 null인 namespace, 그리고 선택적으로 문자열 또는 null인 prefix(기본값 null), 문자열 또는 null인 is(기본값 null), 불리언 synchronousCustomElements(기본값 false), 그리고 "default", null 또는 CustomElementRegistry 객체 registry(기본값 "default")가 주어졌을 때:

result를 null로 설정합니다.
registry가 "default"이면 registry를 document가 주어졌을 때 사용자 정의 요소 레지스트리를 조회한 결과로 설정합니다.
definition을 registry, namespace, localName, is가 주어졌을 때 사용자 정의 요소 정의를 조회한 결과로 설정합니다.
definition이 null이 아니고 definition의 이름이 로컬 이름과 같지 않으면(즉, definition이 사용자 정의 내장 요소를 나타내면):
1. interface를 localName과 HTML 네임스페이스에 대한 요소 인터페이스로 설정합니다.
2. result를 document, interface, localName, HTML 네임스페이스, prefix, "undefined", is, registry가 주어졌을 때 내부적으로 요소를 생성한 결과로 설정합니다.
3. synchronousCustomElements가 true이면 예외를 포착하면서 다음 단계를 실행합니다.
  1. definition을 사용하여 result를 업그레이드합니다.
  이 단계에서 예외 exception이 발생했다면:
  1. definition의 생성자에 대응하는 JavaScript 객체의 연결된 영역의 전역 객체에 대해 exception을 보고합니다.
  2. result의 사용자 정의 요소 상태를 "failed"로 설정합니다.
4. 그렇지 않으면 result와 definition이 주어졌을 때 사용자 정의 요소 업그레이드 반응을 큐에 추가합니다.
그렇지 않고 definition이 null이 아니면:
1. synchronousCustomElements가 true이면:
  1. C를 definition의 생성자로 설정합니다.
  2. previousRegistry를 주변 에이전트의 활성 사용자 정의 요소 생성자 맵[C]의 값으로 설정하며, 기본값은 null입니다.
  3. 설정합니다. 주변 에이전트의 활성 사용자 정의 요소 생성자 맵[C]을 registry로 설정합니다.
  4. 예외를 포착하면서 다음 단계를 실행합니다.
    1. result를 인수 없이 C를 생성한 결과로 설정합니다.
    2. 단언합니다: 다음 중 하나가 참입니다.
      - result의 사용자 정의 요소 상태가 "custom"이고 사용자 정의 요소 정의가 null이 아닙니다.
      - result의 사용자 정의 요소 상태가 "precustomized"입니다. 또는
      - result의 사용자 정의 요소 상태가 "custom"도 "precustomized"도 아니고 사용자 정의 요소 정의가 null입니다.
      customElements.define("x-example", class extends HTMLElement { constructor() { // 비준수: super()를 호출하는 대신 기존 요소를 반환합니다. return document.createElement("p"); } }); document.createElement("x-example");
      
      여기서 result는 p 요소이며, 해당 요소의 사용자 정의 요소 상태는 "uncustomized"이고 사용자 정의 요소 정의는 null입니다.
    3. 단언합니다: result의 네임스페이스는 HTML 네임스페이스입니다.
      
      IDL은 result가 HTMLElement 객체임을 보장하며, 이러한 객체는 모두 HTML 네임스페이스를 사용합니다.
    4. result의 속성 목록이 비어 있지 않으면 "NotSupportedError" DOMException을 던집니다.
    5. result에 자식이 있으면 "NotSupportedError" DOMException을 던집니다.
    6. result의 부모가 null이 아니면 "NotSupportedError" DOMException을 던집니다.
    7. result의 노드 문서가 document가 아니면 "NotSupportedError" DOMException을 던집니다.
    8. result의 로컬 이름이 localName과 같지 않으면 던집니다. 예외는 "NotSupportedError" DOMException입니다.
    9. result의 네임스페이스 접두사를 prefix로 설정합니다.
    10. result의 is 값을 null로 설정합니다.
    11. result의 사용자 정의 요소 레지스트리를 registry로 설정합니다.
    이 단계들 중 하나에서 예외 exception이 발생했다면:
    1. definition의 생성자에 대응하는 JavaScript 객체의 연결된 영역의 전역 객체에 대해 exception을 보고합니다.
    2. result를 document, HTMLUnknownElement, localName, HTML 네임스페이스, prefix, "failed", null, registry가 주어졌을 때 내부적으로 요소를 생성한 결과로 설정합니다.
  5. previousRegistry가 null이면 주변 에이전트의 활성 사용자 정의 요소 생성자 맵[C]을 제거합니다.
  6. 그렇지 않으면 설정합니다. 주변 에이전트의 활성 사용자 정의 요소 생성자 맵[C]을 previousRegistry로 설정합니다.
2. 그렇지 않으면:
  1. result를 document, HTMLElement, localName, HTML 네임스페이스, prefix, "undefined", null, registry가 주어졌을 때 내부적으로 요소를 생성한 결과로 설정합니다.
  2. result와 definition이 주어졌을 때 사용자 정의 요소 업그레이드 반응을 큐에 추가합니다.
그렇지 않으면:
1. interface를 localName과 namespace에 대한 요소 인터페이스로 설정합니다.
2. result를 document, interface, localName, namespace, prefix, "uncustomized", is, registry가 주어졌을 때 내부적으로 요소를 생성한 결과로 설정합니다.
3. namespace가 HTML 네임스페이스이고, localName이 유효한 사용자 정의 요소 이름이거나 is가 null이 아니면 result의 사용자 정의 요소 상태를 "undefined"로 설정합니다.
result를 반환합니다.

내부적으로 요소를 생성하려면, 문서 document, 인터페이스 interface, 문자열 localName, 문자열 또는 null인 namespace, 문자열 또는 null인 prefix, 문자열 state, 문자열 또는 null인 is, 그리고 null 또는 CustomElementRegistry 객체 registry가 주어졌을 때:

element를 document가 주어졌을 때 interface를 구현하는 노드를 생성한 결과로 설정합니다.
element의 네임스페이스를 namespace로, 네임스페이스 접두사를 prefix로, 로컬 이름을 localName으로, 사용자 정의 요소 레지스트리를 registry로, 사용자 정의 요소 상태를 state로, 사용자 정의 요소 정의를 null로, 그리고 is 값을 is로 설정합니다.
단언합니다: element의 속성 목록은 비어 있습니다.
element를 반환합니다.

요소에는 속성 목록도 있으며, 이는 NamedNodeMap을 통해 노출되는 목록입니다. 요소가 생성될 때 명시적으로 지정되지 않았다면 해당 요소의 속성 목록은 비어 있습니다.

요소의 속성 목록에 포함되어 있으면 해당 요소는 속성 A를 가지고 있습니다.

이 명세와 다른 명세에서는 요소에 대한 속성 변경 단계를 정의할 수 있습니다. 이 알고리즘에는 element, localName, oldValue, value, namespace가 전달됩니다.

속성 attribute의 속성 변경을 처리하려면, element, oldValue, newValue가 주어졌을 때 다음 단계를 실행합니다.

element에 대해 "attributes" 유형의 변경 레코드를 큐에 추가합니다. 이때 attribute의 로컬 이름, attribute의 네임스페이스, oldValue, « », « », null, null을 사용합니다.
element가 사용자 정의 요소이면, element, 콜백 이름 "attributeChangedCallback", « attribute의 로컬 이름, oldValue, newValue, attribute의 네임스페이스 »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 추가합니다.
element, attribute의 로컬 이름, oldValue, newValue, attribute의 네임스페이스를 사용하여 속성 변경 단계를 실행합니다.

속성 attribute를 value로 변경하려면:

oldValue를 attribute의 값으로 설정합니다.
attribute의 값을 value로 설정합니다.
attribute에 대한 속성 변경을 처리합니다. 이때 attribute의 요소, oldValue, value를 사용합니다.

속성 attribute를 요소 element에 추가하려면:

attribute를 element의 속성 목록에 추가합니다.
attribute의 요소를 element로 설정합니다.
attribute의 노드 문서를 element의 노드 문서로 설정합니다.
attribute에 대한 속성 변경을 처리합니다. 이때 element, null, attribute의 값을 사용합니다.

속성 attribute를 제거하려면:

element를 attribute의 요소로 설정합니다.
attribute를 element의 속성 목록에서 제거합니다.
attribute의 요소를 null로 설정합니다.
attribute에 대한 속성 변경을 처리합니다. 이때 element, attribute의 값, null을 사용합니다.

속성 oldAttribute를 속성 newAttribute로 교체하려면:

element를 oldAttribute의 요소로 설정합니다.
element의 속성 목록에서 oldAttribute를 newAttribute로 교체합니다.
newAttribute의 요소를 element로 설정합니다.
newAttribute의 노드 문서를 element의 노드 문서로 설정합니다.
oldAttribute의 요소를 null로 설정합니다.
oldAttribute에 대한 속성 변경을 처리합니다. 이때 element, oldAttribute의 값, newAttribute의 값을 사용합니다.

문자열 qualifiedName과 요소 element가 주어졌을 때 이름으로 속성을 가져오려면:

element가 HTML 네임스페이스에 속하고 해당 요소의 노드 문서가 HTML 문서이면 qualifiedName을 qualifiedName의 ASCII 소문자 형태로 설정합니다.
element의 속성 목록에서 한정 이름이 qualifiedName인 첫 번째 속성을 반환하고, 없으면 null을 반환합니다.

Null 또는 문자열 namespace, 문자열 localName, 그리고 요소 element가 주어졌을 때 네임스페이스와 로컬 이름으로 속성을 가져오려면:

namespace가 빈 문자열이면 null로 설정합니다.
element의 속성 목록에서 네임스페이스가 namespace이고 로컬 이름이 localName인 속성이 있으면 반환하고, 그렇지 않으면 null을 반환합니다.

요소 element, 문자열 localName, 그리고 선택적으로 null 또는 문자열 namespace(기본값 null)가 주어졌을 때 속성 값을 가져오려면:

attr을 namespace, localName, element가 주어졌을 때 속성을 가져온 결과로 설정합니다.
attr이 null이면 빈 문자열을 반환합니다.
attr의 값을 반환합니다.

속성 attr과 요소 element가 주어졌을 때 속성을 설정하려면:

verifiedValue를 attr의 로컬 이름, attr의 네임스페이스, element, 그리고 attr의 값을 사용하여 신뢰할 수 있는 타입을 준수하는 속성 값 가져오기를 호출한 결과로 설정합니다. [TRUSTED-TYPES]
attr의 요소가 null도 element도 아니면 "InUseAttributeError" DOMException을 던집니다.
oldAttr을 attr의 네임스페이스, attr의 로컬 이름, 그리고 element가 주어졌을 때 속성을 가져온 결과로 설정합니다.
oldAttr이 attr이면 attr을 반환합니다.
attr의 값을 verifiedValue로 설정합니다.
oldAttr이 null이 아니면 oldAttr을 attr로 교체합니다.
그렇지 않으면 attr을 element에 추가합니다.
oldAttr을 반환합니다.

요소 element, 문자열 localName, 문자열 value, 선택적으로 null 또는 문자열 prefix(기본값 null), 그리고 선택적으로 null 또는 문자열 namespace(기본값 null)가 주어졌을 때 속성 값을 설정하려면:

attribute를 namespace, localName, element가 주어졌을 때 속성을 가져온 결과로 설정합니다.
attribute가 null이면 element의 노드 문서, localName, namespace, prefix, value가 주어졌을 때 속성을 생성한 결과를 element에 추가한 다음 반환합니다.
attribute를 value로 변경합니다.

문자열 qualifiedName과 요소 element가 주어졌을 때 이름으로 속성을 제거하려면:

attr을 qualifiedName과 element가 주어졌을 때 속성을 가져온 결과로 설정합니다.
attr이 null이 아니면 attr을 제거합니다.
attr을 반환합니다.

Null 또는 문자열 namespace, 문자열 localName, 그리고 요소 element가 주어졌을 때 네임스페이스와 로컬 이름으로 속성을 제거하려면:

attr을 namespace, localName, element가 주어졌을 때 속성을 가져온 결과로 설정합니다.
attr이 null이 아니면 attr을 제거합니다.
attr을 반환합니다.

요소에는 연결된 고유 식별자(ID)가 있을 수 있습니다.

과거에는 요소가 여러 식별자를 가질 수 있었습니다. 예를 들어 HTML의 id 속성과 DTD를 함께 사용하는 방식입니다. 이 명세에서는 ID를 DOM의 개념으로 정의하고, 각 요소에 하나만 허용하며, id 속성으로 지정합니다.

요소의 ID를 갱신하려면 다음 속성 변경 단계를 사용합니다.

localName이 id이고 namespace가 null이며 value가 null 또는 빈 문자열이면 element의 ID를 해제합니다.
그렇지 않고 localName이 id이며 namespace가 null이면 element의 ID를 value로 설정합니다.

이 명세에서는 모든 요소의 class, id, slot 속성에 대한 요구 사항을 정의하지만, 요소에서 이러한 속성을 사용하는 것이 적합한지 여부에 대해서는 규정하지 않습니다.

노드의 부모가 Element 유형이면 해당 노드의 부모 요소라고 합니다. 노드의 부모가 다른 유형이라면 해당 노드의 부모 요소는 null입니다.

namespace = element . namespaceURI: 네임스페이스를 반환합니다.
prefix = element . prefix: 네임스페이스 접두사를 반환합니다.
localName = element . localName: 로컬 이름을 반환합니다.
qualifiedName = element . tagName: HTML 대문자화된 한정 이름을 반환합니다.

다음 namespaceURI getter 단계는 다음을 반환하는 것입니다: this의 네임스페이스.

다음 prefix getter 단계는 다음을 반환하는 것입니다: this의 네임스페이스 접두사.

다음 localName getter 단계는 다음을 반환하는 것입니다: this의 로컬 이름.

다음 tagName getter 단계는 다음을 반환하는 것입니다: this의 HTML 대문자화 한정 이름.

element . id [ = value ]: element의 id 콘텐츠 속성 값을 반환합니다. 값을 설정하여 변경할 수 있습니다.
element . className [ = value ]: element의 class 콘텐츠 속성 값을 반환합니다. 값을 설정하여 변경할 수 있습니다.
element . classList: element의 class 콘텐츠 속성을 공백으로 구분된 토큰 집합으로 조작할 수 있게 하며, 다음 DOMTokenList 객체를 통해 조작합니다.
element . slot [ = value ]: element의 slot 콘텐츠 속성 값을 반환합니다. 값을 설정하여 변경할 수 있습니다.

다음을 반영하도록 정의된 IDL 속성은, 문자열 name에 대해 다음 getter 및 setter 단계를 가져야 합니다:

getter 단계: 다음을 실행한 결과를 반환합니다: 속성 값 가져오기. 주어진 값은 this 와 name입니다.
setter 단계: 속성 값을 설정합니다. 대상은 this이며, name과 주어진 값을 사용합니다.

다음 id 속성은 반드시 반영해야 합니다: "id"를.

다음 className 속성은 반드시 반영해야 합니다: "class"를.

다음 classList getter 단계는 다음을 반환하는 것입니다: DOMTokenList 객체로, 연결된 요소는 this이고 연결된 속성의 로컬 이름은 class입니다. 해당 토큰 집합은 이 특정 DOMTokenList 객체에 속하며, 다음과 같이 부르기도 합니다: 요소의 클래스.

다음 slot 속성은 반드시 반영해야 합니다: "slot"을.

id, class, slot은 사실상 초전역 속성입니다. 모든 요소에 나타날 수 있으며, 해당 요소의 네임스페이스와 무관하기 때문입니다.

element . hasAttributes()

element에 속성이 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

element . getAttributeNames()

반환값은 한정 이름들이며, element의 모든 속성에 대한 것입니다. 중복을 포함할 수 있습니다.

element . getAttribute(qualifiedName)

반환값은 element의 첫 번째 속성으로, 해당 속성의 한정 이름은 qualifiedName이며, 그러한 속성이 없으면 null입니다.

element . getAttributeNS(namespace, localName)

반환값은 element의 속성으로, 해당 속성의 네임스페이스는 namespace이고 로컬 이름은 localName입니다. null을 반환하는 경우는 다음과 같습니다: 그러한 속성이 없는 경우입니다.

element . setAttribute(qualifiedName, value)

설정할 값은 element의 첫 번째 속성의 값이며, 해당 속성의 한정 이름은 qualifiedName입니다. 설정할 값은 value입니다.

element . setAttributeNS(namespace, localName, value)

설정할 값은 element의 속성의 값이며, 해당 속성의 네임스페이스는 namespace이고 로컬 이름은 localName입니다. 값을 value로 설정합니다.

element . removeAttribute(qualifiedName)

제거할 것은 element의 첫 번째 속성으로, 해당 속성의 한정 이름은 qualifiedName입니다.

element . removeAttributeNS(namespace, localName)

제거할 것은 element의 속성으로, 해당 속성의 네임스페이스는 namespace이고 로컬 이름은 localName입니다.

element . toggleAttribute(qualifiedName [, force])

force가 주어지지 않으면, qualifiedName을 "전환"하며, 해당 속성이 있으면 제거하고 없으면 추가합니다. force가 true이면, 추가할 것은 qualifiedName입니다. force가 false이면, qualifiedName을 제거합니다.

qualifiedName이 현재 존재하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

element . hasAttribute(qualifiedName)

true를 반환하는 조건은 element에 속성이 있으며, 해당 속성의 한정 이름이 qualifiedName인 것입니다. 그렇지 않으면 false를 반환합니다.

element . hasAttributeNS(namespace, localName)

true를 반환하는 조건은 element에 속성이 있으며, 해당 속성의 네임스페이스 가 namespace이고 로컬 이름이 localName인 것입니다.

다음 hasAttributes() 메서드 단계는 false를 반환하는 것입니다. 그 조건은 this의 속성 목록이 비어 있는 것입니다. 그렇지 않으면 true를 반환합니다.

다음 attributes getter 단계는 다음을 반환하는 것입니다: 연결된 NamedNodeMap.

다음 getAttributeNames() 메서드 단계는 반환하는 것입니다: 다음 한정 이름들을. 해당 속성들은 this의 속성 목록에 있으며, 순서대로 반환합니다. 그렇지 않으면 새로운 목록을 반환합니다.

이 이름들이 고유하다는 보장은 없습니다.

다음 getAttribute(qualifiedName) 메서드 단계는 다음과 같습니다:

attr을 다음의 결과로 둡니다: 속성 가져오기. 주어진 값은 qualifiedName과 this입니다.
attr이 null이면, null을 반환합니다.
반환값은 attr의 값입니다.

다음 getAttributeNS(namespace, localName) 메서드 단계는 다음과 같습니다:

attr을 다음의 결과로 둡니다: 속성 가져오기. 주어진 값은 namespace, localName, 그리고 this입니다.
attr이 null이면, null을 반환합니다.
반환값은 attr의 값입니다.

다음 setAttribute(qualifiedName, value) 메서드 단계는 다음과 같습니다:

qualifiedName이 유효한 속성 로컬 이름이 아니면, 예외를 던집니다: "InvalidCharacterError" DOMException.

매개변수 이름과는 달리, qualifiedName이 한정 이름으로 사용되는 것은 속성이 이미 해당 한정 이름으로 존재하는 경우뿐입니다. 그렇지 않으면 다음 로컬 이름으로 사용되며, 이는 새로운 속성의 이름입니다. 후자의 경우에 대해서만 유효성을 검사하면 됩니다.
만약 this가 HTML 네임스페이스에 속하고 그 노드 문서가 HTML 문서이면, qualifiedName을 qualifiedName의 다음 변환 결과로 설정합니다: ASCII 소문자.
verifiedValue를 다음을 호출한 결과로 둡니다: 신뢰할 수 있는 타입을 준수하는 속성 값 가져오기. 사용할 값은 qualifiedName, null, this, 그리고 value입니다. [TRUSTED-TYPES]
attribute을 첫 번째 속성으로 둡니다. 해당 속성은 this의 속성 목록에 있으며, 그 한정 이름은 qualifiedName입니다. 그렇지 않으면 null로 둡니다.
attribute이 null이 아니면, 변경합니다: attribute을 verifiedValue로 변경하고 반환합니다.
attribute을 다음의 결과로 설정합니다: 속성 생성. 주어진 값은 this의 노드 문서, qualifiedName, null, null, 그리고 verifiedValue입니다.
덧붙입니다: attribute을 this에.

다음 setAttributeNS(namespace, qualifiedName, value) 메서드 단계는 다음과 같습니다:

(namespace, prefix, localName)을 다음의 결과로 둡니다: 유효성 검사 및 추출. 대상은 namespace와 qualifiedName이며, 주어진 값은 "attribute"입니다.
verifiedValue를 다음을 호출한 결과로 둡니다: 신뢰할 수 있는 타입을 준수하는 속성 값 가져오기. 사용할 값은 localName, namespace, this, 그리고 value입니다. [TRUSTED-TYPES]
속성 값을 설정합니다. 대상은 this이며, 사용할 값은 localName, verifiedValue, prefix, 그리고 namespace입니다.

다음 removeAttribute(qualifiedName) 메서드 단계는 속성을 제거하는 것입니다. 주어진 값은 qualifiedName과 this이며, 그런 다음 undefined를 반환합니다.

다음 removeAttributeNS(namespace, localName) 메서드 단계는 속성을 제거하는 것입니다. 주어진 값은 namespace, localName, 그리고 this이며, 그런 다음 반환할 값은 undefined입니다.

다음 hasAttribute(qualifiedName) 메서드 단계는 다음과 같습니다:

만약 this가 HTML 네임스페이스에 속하고 그 노드 문서가 HTML 문서이면, qualifiedName을 qualifiedName의 다음 변환 결과로 설정합니다: ASCII 소문자.
true를 반환하는 조건은 this가 가지는 속성의 한정 이름이 qualifiedName인 것입니다. 그렇지 않으면 false를 반환합니다.

다음 toggleAttribute(qualifiedName, force) 메서드 단계는 다음과 같습니다:

qualifiedName이 유효한 속성 로컬 이름이 아니면, 예외를 던집니다: "InvalidCharacterError" DOMException.

위의 설명을 참조하세요. 여기서는 그 이유를 설명합니다: 한정 이름이 아닌 로컬 이름으로 유효성을 검사하는 이유입니다.
만약 this가 HTML 네임스페이스에 속하고 그 노드 문서가 HTML 문서이면, qualifiedName을 qualifiedName의 다음 변환 결과로 설정합니다: ASCII 소문자.
attribute을 첫 번째 속성으로 둡니다. 해당 속성은 this의 속성 목록에 있으며, 그 한정 이름은 qualifiedName입니다. 그렇지 않으면 null로 둡니다.
attribute이 null이면:
1. force가 주어지지 않았거나 true이면, 덧붙입니다: 다음의 결과를. 속성 생성에 주어진 값은 this의 노드 문서 와 qualifiedName이며, 덧붙일 대상은 this입니다. 그런 다음 true를 반환합니다.
2. false를 반환합니다.
force가 주어지지 않았거나 false이면, 속성을 제거합니다. 주어진 값은 qualifiedName과 this이며, 그런 다음 false를 반환합니다.
true를 반환합니다.

다음 hasAttributeNS(namespace, localName) 메서드 단계는 다음과 같습니다:

namespace가 빈 문자열이면, 이를 null로 설정합니다.
true를 반환하는 조건은 this가 가지는 속성의 네임스페이스가 namespace이고 로컬 이름이 localName인 것입니다. 그렇지 않으면 false를 반환합니다.

다음 getAttributeNode(qualifiedName) 메서드 단계는 다음의 결과를 반환하는 것입니다: 속성 가져오기. 주어진 값은 qualifiedName과 this입니다.

다음 getAttributeNodeNS(namespace, localName) 메서드 단계는 다음의 결과를 반환하는 것입니다: 속성 가져오기. 주어진 값은 namespace, localName, 그리고 this입니다.

다음 setAttributeNode(attr)와 setAttributeNodeNS(attr) 메서드의 단계는 다음의 결과를 반환하는 것입니다: 속성 설정. 주어진 값은 attr과 this입니다.

다음 removeAttributeNode(attr) 메서드 단계는 다음과 같습니다:

만약 this의 속성 목록이 다음을 포함하지 않으면: attr, 다음 예외를 던집니다: "NotFoundError" DOMException.
제거합니다: attr을.
attr을 반환합니다.

shadow = element . attachShadow(init): 생성할 것은 섀도 루트로, element에 대해 생성하고 반환합니다.
shadow = element . shadowRoot: 반환값은 element의 섀도 루트이며, 해당 루트가 존재하고 섀도 루트의 모드가 "open"인 경우입니다. 그렇지 않으면 null입니다.

유효한 섀도 호스트 이름은 다음과 같습니다:

다음 유효한 사용자 정의 요소 이름
"article", "aside", "blockquote", "body", "div", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "main", "nav", "p", "section", 또는 "span"

이 목록은 의도적으로 제한되어 있습니다. 내장 요소가 내부 섀도 트리를 향후 필요에 따라 가질 수 있도록 하기 위해서입니다.

다음 attachShadow(init) 메서드 단계는 다음과 같습니다:

registry를 다음으로 둡니다: this의 노드 문서의 사용자 정의 요소 레지스트리.
만약 init["customElementRegistry"] 가 존재하면, registry를 해당 값으로 설정합니다.
registry가 null이 아니고, registry의 범위 지정 여부가 false이며, registry가 다음이 아니면: this의 노드 문서의 사용자 정의 요소 레지스트리, 다음 예외를 던집니다: "NotSupportedError" DOMException.
다음을 실행합니다: 섀도 루트 연결. 사용할 값은 this, init["mode"], init["delegatesFocus"], init["serializable"], init["slotAssignment"], init["clonable"], 그리고 registry입니다.
반환값은 this의 섀도 루트입니다.

다음과 같이 연결합니다: 섀도 루트를. 주어진 값은 요소 element, 문자열 mode, 불리언 delegatesFocus, 불리언 serializable, 문자열 slotAssignment, 불리언 clonable, 그리고 null 또는 CustomElementRegistry 객체인 registry입니다:

element의 네임스페이스가 다음이 아니면: HTML 네임스페이스, 다음 예외를 던집니다: "NotSupportedError" DOMException.
element의 로컬 이름이 다음이 아니면: 유효한 섀도 호스트 이름, 다음 예외를 던집니다: "NotSupportedError" DOMException.
element의 로컬 이름이 유효한 사용자 정의 요소 이름이거나, element의 is 값이 null이 아니면:
1. definition을 다음의 결과로 둡니다: 사용자 정의 요소 정의 조회 주어진 값은 element의 사용자 정의 요소 레지스트리, 해당 요소의 네임스페이스, 해당 요소의 로컬 이름, 그리고 해당 요소의 is 값입니다.
2. definition이 null이 아니고 definition의 섀도 비활성화 여부가 true이면, 다음 예외를 던집니다: "NotSupportedError" DOMException.
element가 섀도 호스트이면:
1. currentShadowRoot를 element의 섀도 루트로 둡니다.
2. 다음 중 하나라도 참이면:
  - currentShadowRoot의 선언적 여부가 false이거나,
  - currentShadowRoot의 모드가 mode가 아니면,
  다음 예외를 던집니다: "NotSupportedError" DOMException.
3. 제거합니다: currentShadowRoot의 모든 자식을, 다음 트리 순서로.
4. currentShadowRoot의 선언적 여부를 false로 설정합니다.
5. 반환합니다.
shadow를 다음의 결과로 둡니다: 노드 생성. 이 노드가 구현하는 것은 ShadowRoot이며, 주어진 값은 element의 노드 문서입니다.
shadow의 호스트를 element로 설정합니다.
shadow의 모드를 mode로 설정합니다.
shadow의 포커스 위임 여부를 delegatesFocus로 설정합니다.
element의 사용자 정의 요소 상태가 "precustomized" 또는 "custom"이면, 설정할 것은 shadow의 요소 내부에서 사용 가능 여부이며, 설정할 값은 true입니다.
shadow의 선언적 여부를 false로 설정합니다.
shadow의 직렬화 가능 여부를 serializable로 설정합니다.
shadow의 슬롯 할당을 slotAssignment로 설정합니다.
shadow의 복제 가능 여부를 clonable로 설정합니다.
shadow의 사용자 정의 요소 레지스트리를 registry로 설정합니다.
element의 섀도 루트를 shadow로 설정합니다.

다음 shadowRoot getter 단계는 다음과 같습니다:

shadow를 다음으로 둡니다: this의 섀도 루트.
shadow가 null이거나 그 모드가 "closed"이면, null을 반환합니다.
shadow를 반환합니다.

registry = element . customElementRegistry: 반환값은 element의 CustomElementRegistry 객체이며, 해당 객체가 있는 경우입니다. 그렇지 않으면 null입니다.

다음 customElementRegistry getter 단계는 다음을 반환하는 것입니다: this의 사용자 정의 요소 레지스트리.

element . closest(selectors): 반환값은 (element에서 시작하는) 첫 번째 포괄적 조상으로, 다음과 일치합니다: selectors. 그렇지 않으면 null입니다.
element . matches(selectors): true를 반환하는 조건은 selectors를 element의 루트에 대해 일치시킨 결과로 element를 얻는 것입니다. 그렇지 않으면 false를 반환합니다.

다음 closest(selectors) 메서드 단계는 다음과 같습니다:

selector를 다음의 결과로 둡니다: 선택자 파싱. 원본은 selectors입니다. [SELECTORS4]
selector가 실패이면, 예외를 던집니다: "SyntaxError" DOMException.
elements를 다음으로 둡니다: this의 포괄적 조상 중 요소인 것들로, 역순의 트리 순서를 따릅니다.
elements의 각 element에 대해: 만약 요소에 대해 선택자 일치시키기를, selector, element, 그리고 범위 지정 루트인 this를 사용하여 실행한 결과가 성공이면, element를 반환합니다. [SELECTORS4]
null을 반환합니다.

다음 matches(selectors)와 webkitMatchesSelector(selectors) 메서드 단계는 다음과 같습니다:

selector를 다음의 결과로 둡니다: 선택자 파싱. 원본은 selectors입니다. [SELECTORS4]
selector가 실패이면, 예외를 던집니다: "SyntaxError" DOMException.
다음의 결과가, 요소에 대해 선택자 일치시키기를, selector, this, 그리고 범위 지정 루트인 this를 사용하여 실행했을 때 성공이면, true를 반환합니다. 그렇지 않으면, false를 반환합니다. [SELECTORS4]

다음 getElementsByTagName(qualifiedName) 메서드 단계는 다음을 반환하는 것입니다: 다음 한정 이름을 가진 요소 목록: qualifiedName 대상은 this입니다.

다음 getElementsByClassName(classNames) 메서드 단계는 다음을 반환하는 것입니다: 클래스 이름이 classNames인 요소 목록 대상은 this입니다.

다음과 같이 인접 삽입을 수행합니다. 주어진 값은 요소 element, 문자열 where, 그리고 노드 node입니다. 다음 중 첫 번째로 일치하는 항목에 연결된 단계를 실행하며, ASCII 대소문자를 구분하지 않고 where와 비교합니다:

"beforebegin"

element의 부모가 null이면, null을 반환합니다.

다음의 결과를 반환합니다: 사전 삽입. node를 삽입할 대상은 element의 부모이며, element 앞에 삽입합니다.

"afterbegin"

다음의 결과를 반환합니다: 사전 삽입. node를 element에 삽입하며, 다음의 앞에 삽입합니다: element의 첫 번째 자식.

"beforeend"

다음의 결과를 반환합니다: 사전 삽입. node를 element에 삽입하며, 다음의 앞에 삽입합니다: null.

"afterend"

element의 부모가 null이면, null을 반환합니다.

다음의 결과를 반환합니다: 사전 삽입. node를 삽입할 대상은 element의 부모이며, 삽입 위치는 element의 다음 형제 앞입니다.

그렇지 않으면

예외를 던집니다: "SyntaxError" DOMException.

다음 insertAdjacentElement(where, element) 메서드 단계는 다음을 실행한 결과를 반환하는 것입니다: 인접 삽입. 주어진 값은 this, where, 그리고 element입니다.

다음 insertAdjacentText(where, data) 메서드 단계는 다음과 같습니다:

text를 다음의 결과로 둡니다: 텍스트 노드 생성. 주어진 값은 this의 노드 문서와 data입니다.
다음을 실행합니다: 삽입: 인접 위치에. 주어진 값은 this, where, 그리고 text입니다.

이 메서드는 설계할 기회가 생기기 전에 이미 존재했으므로 아무것도 반환하지 않습니다.

4.9.1. 인터페이스 `NamedNodeMap`

[Exposed=Window,
 LegacyUnenumerableNamedProperties]
interface NamedNodeMap {
  readonly attribute unsigned long length;
  getter Attr? item(unsigned long index);
  getter Attr? getNamedItem(DOMString qualifiedName);
  Attr? getNamedItemNS(DOMString? namespace, DOMString localName);
  [CEReactions] Attr? setNamedItem(Attr attr);
  [CEReactions] Attr? setNamedItemNS(Attr attr);
  [CEReactions] Attr removeNamedItem(DOMString qualifiedName);
  [CEReactions] Attr removeNamedItemNS(DOMString? namespace, DOMString localName);
};

NamedNodeMap에는 연결된 요소(하나의 요소)가 있다.

NamedNodeMap 객체의 속성 목록은 해당 요소의 속성 목록이다.

NamedNodeMap 객체의 지원되는 속성 인덱스는 0부터 해당 속성 목록의 크기 − 1까지 범위의 숫자이다. 단, 속성 목록이 비어 있으면 지원되는 속성 인덱스가 없다.

length getter 단계는 속성 목록의 크기를 반환하는 것이다.

item(index) 메서드 단계는 다음과 같다:

index가 this의 속성 목록의 크기 이상이면 다음을 반환합니다: null.
그렇지 않으면 다음을 반환합니다: this의 속성 목록[index].

다음 NamedNodeMap 객체의 지원하는 속성 이름은 다음 단계를 실행한 반환값입니다:

names를 다음 한정 이름들로 둡니다. 이 이름들은 속성들의 이름이며, 이 NamedNodeMap 객체의 속성 목록에 있는 것에서 중복을 제외하고, 순서대로 나열합니다.
이 NamedNodeMap 객체의 요소가 HTML 네임스페이스에 속하고 그 노드 문서가 HTML 문서이면, 각 name(names에 속함)에 대해:
1. lowercaseName을 name의 ASCII 소문자 형태로 둡니다.
2. lowercaseName이 name과 같지 않으면, name을 다음에서 제거합니다: names.
names를 반환합니다.

getNamedItem(qualifiedName) 메서드 단계는 qualifiedName과 요소가 주어졌을 때 속성을 가져온 결과를 반환하는 것이다.

getNamedItemNS(namespace, localName) 메서드 단계는 namespace, localName, 요소가 주어졌을 때 속성을 가져온 결과를 반환하는 것이다.

setNamedItem(attr) 및 setNamedItemNS(attr) 메서드 단계는 attr과 요소가 주어졌을 때 속성을 설정한 결과를 반환하는 것이다.

removeNamedItem(qualifiedName) 메서드 단계는 다음과 같다:

attr을 qualifiedName과 요소가 주어졌을 때 속성을 제거한 결과로 설정한다.
attr이 null이면 "NotFoundError" DOMException을 발생시킨다.
attr을 반환한다.

removeNamedItemNS(namespace, localName) 메서드 단계는 다음과 같다:

attr을 namespace, localName, 요소가 주어졌을 때 속성을 제거한 결과로 설정한다.
attr이 null이면 "NotFoundError" DOMException을 발생시킨다.
attr을 반환한다.

4.9.2. 인터페이스 `Attr`

[Exposed=Window]
interface Attr : Node {
  readonly attribute DOMString? namespaceURI;
  readonly attribute DOMString? prefix;
  readonly attribute DOMString localName;
  readonly attribute DOMString name;
  [CEReactions] attribute DOMString value;

  readonly attribute Element? ownerElement;

  readonly attribute boolean specified; // historical; always returns true
};

Attr 노드는 간단히 속성이라고 합니다. IDL 속성과 구별하기 위해 콘텐츠 속성이라고도 합니다.

속성에는 네임스페이스 (null 또는 비어 있지 않은 문자열), 네임스페이스 접두사 (null 또는 비어 있지 않은 문자열), 로컬 이름 (비어 있지 않은 문자열), 값 (문자열), 그리고 요소 (null 또는 요소)가 있습니다.

오늘날 설계했다면 이름과 값만 있었을 것입니다. ☹

속성의 한정 이름은 해당 속성의 로컬 이름입니다. 단, 네임스페이스 접두사가 null인 경우이며, 그렇지 않으면 네임스페이스 접두사 뒤에 ":"를 붙이고, 그 뒤에 해당 속성의 로컬 이름을 붙인 것입니다.

사용자 에이전트는 최적화를 위해 이를 내부 슬롯에 저장할 수 있습니다.

속성 생성을 수행하려면, 주어진 문서 document, 문자열 localName, 그리고 선택적으로 문자열 또는 null인 namespace(기본값은 null), 문자열 또는 null인 prefix(기본값은 null), 문자열 value(기본값은 빈 문자열)를 사용하여 다음을 수행합니다:

attribute를 다음 노드 생성의 결과로 둡니다. 이 노드는 Attr를 구현하며, 주어진 값은 document입니다.
attribute의 네임스페이스를 namespace로, 네임스페이스 접두사를 prefix로, 로컬 이름을 localName으로, 값을 value로 설정합니다.
attribute를 반환합니다.

다음 A 속성은 다음 조건을 만족하는 속성입니다: 로컬 이름은 A이고, 네임스페이스와 네임스페이스 접두사는 null입니다.

다음 namespaceURI getter 단계는 다음을 반환하는 것입니다: this의 네임스페이스.

다음 prefix getter 단계는 다음을 반환하는 것입니다: this의 네임스페이스 접두사.

다음 localName getter 단계는 다음을 반환하는 것입니다: this의 로컬 이름.

다음 name getter 단계는 다음을 반환하는 것입니다: this의 한정 이름.

다음 value getter 단계는 다음을 반환하는 것입니다: this의 값.

기존 속성 값 설정을 수행하려면, 주어진 속성 attribute와 문자열 value를 사용하여 다음 단계를 실행합니다:

attribute의 요소가 null이면, attribute의 값을 value로 설정하고 반환합니다.
element를 attribute의 요소로 둡니다.
verifiedValue를 다음을 호출한 결과로 둡니다: 신뢰할 수 있는 타입에 부합하는 속성 값 가져오기. 인수는 attribute의 로컬 이름, attribute의 네임스페이스, element, 그리고 value입니다. [TRUSTED-TYPES]
attribute의 요소가 null이면, attribute의 값을 verifiedValue로 설정하고 반환합니다.
변경합니다: attribute를 verifiedValue로.

다음 value setter 단계는 기존 속성 값 설정을 수행하는 것입니다. 인수는 this 및 주어진 값입니다.

다음 ownerElement getter 단계는 다음을 반환하는 것입니다: this의 요소.

다음 specified getter 단계는 true를 반환하는 것입니다.

4.10. 인터페이스 `CharacterData`

[Exposed=Window]
interface CharacterData : Node {
  attribute [LegacyNullToEmptyString] DOMString data;
  readonly attribute unsigned long length;
  DOMString substringData(unsigned long offset, unsigned long count);
  undefined appendData(DOMString data);
  undefined insertData(unsigned long offset, DOMString data);
  undefined deleteData(unsigned long offset, unsigned long count);
  undefined replaceData(unsigned long offset, unsigned long count, DOMString data);
};

CharacterData 는 추상 인터페이스입니다. 직접 인스턴스를 얻을 수 없습니다. 이 인터페이스는 Text, ProcessingInstruction, 그리고 Comment 노드에서 사용됩니다.

노드 중 CharacterData 인터페이스를 상속하는 노드에는 연결된 변경 가능한 문자열이 있으며, 이를 데이터라고 합니다.

데이터를 교체하려면, 노드 node에 대해 정수 offset, 정수 count, 문자열 data, 그리고 선택적 불리언 piAttributesAlreadyUpdated(기본값 false)가 주어졌을 때:

length를 node의 길이로 설정합니다.
offset이 length보다 크면 "IndexSizeError" DOMException을 던집니다.
offset + count가 length보다 크면 count를 length − offset으로 설정합니다.
node에 대해 "characterData" 유형의 변경 레코드를 큐에 추가합니다. 이때 null, null, node의 데이터, « », « », null, 그리고 null을 사용합니다.
data를 node의 데이터에서 offset 코드 단위 뒤에 삽입합니다.
deleteOffset을 offset + data의 길이로 설정합니다.
deleteOffset 코드 단위부터 node의 데이터에서 count개의 코드 단위를 제거합니다.
시작 노드가 node이고 시작 오프셋이 offset보다 크지만 offset + count 이하인 각 라이브 범위에 대해 해당 시작 오프셋을 offset으로 설정합니다.
끝 노드가 node이고 끝 오프셋이 offset보다 크지만 offset + count 이하인 각 라이브 범위에 대해 해당 끝 오프셋을 offset으로 설정합니다.
시작 노드가 node이고 시작 오프셋이 offset + count보다 큰 각 라이브 범위에 대해 시작 오프셋에 data의 길이를 더하고 count를 뺍니다.
끝 노드가 node이고 끝 오프셋이 offset + count보다 큰 각 라이브 범위에 대해 끝 오프셋에 data의 길이를 더하고 count를 뺍니다.
node가 ProcessingInstruction 노드이고 piAttributesAlreadyUpdated가 false이면 node가 주어졌을 때 데이터에서 속성 갱신을 실행합니다.
node의 부모가 null이 아니면 node의 부모에 대해 자식 변경 단계를 실행합니다.

노드 node의 데이터에서 부분 문자열을 추출하려면, 정수 offset과 정수 count가 주어졌을 때:

length를 node의 길이로 설정합니다.
offset이 length보다 크면 "IndexSizeError" DOMException을 던집니다.
offset + count가 length보다 크면 node의 데이터에서 offset^번째 코드 단위부터 끝까지의 코드 단위로 구성된 문자열을 반환합니다.
node의 데이터에서 offset^번째 코드 단위부터 offset+count^번째 코드 단위까지의 코드 단위로 구성된 문자열을 반환합니다.

다음 data getter 단계는 다음을 반환하는 것입니다: this의 데이터. 해당 setter 단계는 데이터 교체를 수행하는 것입니다. 대상은 this이며, 인수는 0, this의 길이, 그리고 주어진 값입니다.

다음 length getter 단계는 다음을 반환하는 것입니다: this의 길이.

다음 substringData(offset, count) 메서드 단계는 다음 데이터 부분 문자열 추출의 결과를 반환하는 것입니다. 대상은 this이며, 인수는 offset과 count입니다.

다음 appendData(data) 메서드 단계는 다음 데이터 교체를 수행하는 것입니다. 대상은 this이며, 인수는 this의 길이, 0, 그리고 data입니다.

다음 insertData(offset, data) 메서드 단계는 데이터 교체를 수행하는 것입니다. 대상은 this이며, 인수는 offset, 0, 그리고 data입니다.

다음 deleteData(offset, count) 메서드 단계는 데이터 교체를 수행하는 것입니다. 대상은 this이며, 인수는 offset, count, 그리고 빈 문자열입니다.

다음 replaceData(offset, count, data) 메서드 단계는 데이터 교체를 수행하는 것입니다. 대상은 this이며, 인수는 offset, count, 그리고 data입니다.

4.11. 인터페이스 `Text`

[Exposed=Window]
interface Text : CharacterData {
  constructor(optional DOMString data = "");

  [NewObject] Text splitText(unsigned long offset);
  readonly attribute DOMString wholeText;
};

text = new Text([data = ""]): 데이터가 data인 새로운 Text 노드를 반환합니다.
text . splitText(offset): 데이터를 주어진 offset에서 분할하고 나머지를 Text 노드로 반환합니다.
text . wholeText: 모든 직접적인 Text 노드 형제 노드의 데이터를 결합한 결과를 반환합니다.

배타적 Text 노드는 Text 노드 중 CDATASection 노드가 아닌 노드입니다.

노드 node의 연속된 Text 노드는 node, node의 이전 형제 노드인 Text 노드(있는 경우)와 해당 노드의 연속된 Text 노드, 그리고 node의 다음 형제 노드인 Text 노드(있는 경우)와 해당 노드의 연속된 Text 노드로 구성되며, 중복은 제외합니다.

노드 node의 연속된 배타적 Text 노드는 node, node의 이전 형제 노드인 배타적 Text 노드(있는 경우)와 해당 노드의 연속된 배타적 Text 노드, 그리고 node의 다음 형제 노드인 배타적 Text 노드(있는 경우)와 해당 노드의 연속된 배타적 Text 노드로 구성되며, 중복은 제외합니다.

노드 node의 자식 텍스트 콘텐츠는 node의 Text 노드 자식 모두의 데이터를 트리 순서로 연결한 결과입니다.

노드 node의 자손 텍스트 콘텐츠는 node의 Text 노드 자손 모두의 데이터를 트리 순서로 연결한 결과입니다.

텍스트 노드 생성을 수행하려면, 주어진 문서 document와 문자열 data를 사용하여 다음을 수행합니다:

text를 다음 노드 생성의 결과로 둡니다. 이 노드는 Text를 구현하며, 주어진 값은 document입니다.
text의 데이터를 data로 설정합니다.
text를 반환합니다.

다음 new Text(data) 생성자 단계는 this의 데이터를 data로 설정하고, this의 노드 문서를 현재 전역 객체의 연결된 Document로 설정하는 것입니다.

다음과 같이 분할합니다. 대상은 Text 노드 node이며, 인수는 정수 offset입니다:

length를 node의 길이로 둡니다.
offset이 length보다 크면, 다음 예외를 던집니다: "IndexSizeError" DOMException.
count를 length − offset으로 둡니다.
newData를 다음 데이터 부분 문자열 추출의 결과로 둡니다. 대상은 node이며, 인수는 offset과 count입니다.
newNode를 다음 텍스트 노드 생성의 결과로 둡니다. 주어진 값은 node의 노드 문서와 newData입니다.
parent를 node의 부모로 둡니다.
parent가 null이 아니면:
1. 삽입합니다: newNode를 parent에, node의 다음 형제 앞에.
2. 각 라이브 범위에 대해, 그 시작 노드가 node이고 시작 오프셋이 offset보다 크면, 그 시작 노드를 newNode로 설정하고 그 시작 오프셋을 offset만큼 줄입니다.
3. 각 라이브 범위에 대해, 그 끝 노드가 node이고 끝 오프셋이 offset보다 크면, 그 끝 노드를 newNode로 설정하고 그 끝 오프셋을 offset만큼 줄입니다.
4. 각 라이브 범위에 대해, 그 시작 노드가 parent이고 시작 오프셋이 인덱스(node의 인덱스)에 1을 더한 값과 같으면, 그 시작 오프셋을 1만큼 늘립니다.
5. 각 라이브 범위에 대해, 그 끝 노드가 parent이고 끝 오프셋이 인덱스(node의 인덱스)에 1을 더한 값과 같으면, 그 끝 오프셋을 1만큼 늘립니다.
데이터 교체를 수행합니다. 대상은 node이며, 인수는 offset, count, 그리고 빈 문자열입니다.
newNode를 반환합니다.

다음 splitText(offset) 메서드 단계는 분할을 수행하는 것입니다. 대상은 this이며, 인수는 오프셋 offset입니다.

다음 wholeText getter 단계는 다음 연결 결과를 반환하는 것입니다. 연결 대상은 데이터이며, 이는 연속된 Text 노드(this에 대한 노드)의 데이터로서, 트리 순서로 연결합니다.

4.12. 인터페이스 `CDATASection`

[Exposed=Window]
interface CDATASection : Text {
};

CDATA 섹션 노드를 생성하려면 문서 document와 문자열 data가 주어졌을 때:

node를 CDATASection을 구현하는 노드를 생성한 결과로 둡니다. 이때 document가 주어집니다.
node의 데이터를 data로 설정합니다.
node를 반환합니다.

4.13. 인터페이스 `ProcessingInstruction`

[Exposed=Window]
interface ProcessingInstruction : CharacterData {
  constructor(DOMString target, optional DOMString data = "");

  readonly attribute DOMString target;

  boolean hasAttributes();
  sequence<DOMString> getAttributeNames();
  DOMString? getAttribute(DOMString name);
  undefined setAttribute(DOMString name, DOMString value);
  undefined removeAttribute(DOMString name);
  boolean toggleAttribute(DOMString name, optional boolean force);
  boolean hasAttribute(DOMString name);
};

pi = new ProcessingInstruction(target [, data = ""])

새로운 ProcessingInstruction 노드를 반환하며, 해당 노드의 대상은 target이고 데이터는 data입니다.

pi . target

대상을 반환합니다.

pi . hasAttributes()

pi에 속성이 있으면 true를, 그렇지 않으면 false를 반환합니다.

pi . getAttributeNames()

pi의 모든 속성 이름을 반환합니다. 중복된 이름은 포함될 수 없습니다.

pi . getAttribute(name)

pi에서 이름이 name인 속성의 값을 반환하며, 해당 속성이 없으면 null을 반환합니다.

pi . setAttribute(name, value)

pi에서 이름이 name인 속성을 value로 설정합니다.

pi . removeAttribute(name)

pi에서 이름이 name인 속성을 제거합니다.

pi . toggleAttribute(name [, force])

force가 주어지지 않으면 name을 "토글"하여, 존재하면 제거하고 존재하지 않으면 추가합니다. force가 true이면 name을 추가하고, force가 false이면 name을 제거합니다.

현재 name이 존재하면 true를, 그렇지 않으면 false를 반환합니다.

pi . hasAttribute(name)

pi에 이름이 name인 속성이 있으면 true를, 그렇지 않으면 false를 반환합니다.

ProcessingInstruction 노드에는 연결된 대상이 있습니다.

ProcessingInstruction 노드에는 연결된 속성 맵이 있으며, 이는 맵으로, 초기에는 비어 있습니다.

처리 명령 노드를 생성하려면, 문서 document, 문자열 target, 문자열 data가 주어졌을 때:

pi를 노드를 생성한 결과로 설정합니다. 이 노드는 ProcessingInstruction을 구현하며, document가 주어집니다.
pi를 target과 data로 초기화합니다.
pi를 반환합니다.

ProcessingInstruction 노드 pi를 target과 data로 초기화하려면:

target이 Name 생성 규칙과 일치하지 않으면 "InvalidCharacterError" DOMException을 던집니다.
data에 문자열 "?>"가 포함되어 있으면 "InvalidCharacterError" DOMException을 던집니다.
pi의 대상을 target으로 설정합니다.
pi의 데이터를 data로 설정합니다.
pi가 주어졌을 때 데이터에서 속성을 갱신합니다.

ProcessingInstruction 노드 pi가 주어졌을 때 데이터에서 속성을 갱신하려면:

pi의 속성 맵을 비웁니다.
result를 pi의 데이터가 주어졌을 때 문자열에서 의사 속성을 파싱하는 규칙을 호출한 파싱 결과로 설정합니다.
result가 오류이면 반환합니다.
result의 각 의사 속성 pseudoAttr에 대해: pi의 속성 맵[pseudoAttr의 이름]을 pseudoAttr의 값으로 설정합니다.

ProcessingInstruction 노드 pi가 주어졌을 때 속성에서 데이터를 갱신하려면:

data를 빈 문자열로 설정합니다.
pi의 속성 맵에 있는 각 name → value에 대해:
1. data가 빈 문자열이 아니면 U+0020 SPACE를 data에 추가합니다.
2. name을 data에 추가합니다.
3. U+003D (=)를 data에 추가합니다.
4. U+0022 (")를 data에 추가합니다.
5. value에 있는 모든 U+0026 (&)를 "&"로 교체합니다.
6. value에 있는 모든 U+003C (<)를 "<"로 교체합니다.
7. value에 있는 모든 U+003E (>)를 ">"로 교체합니다.
8. value에 있는 모든 U+0022 (")를 """로 교체합니다.
9. value를 data에 추가합니다.
10. U+0022 (")를 data에 추가합니다.
pi의 길이, 0, data, true를 사용하여 pi의 데이터를 교체합니다.

ProcessingInstruction 노드 pi와 문자열 name이 주어졌을 때 처리 명령 속성을 가져오려면: pi의 속성 맵[name]을 반환하며, 기본값은 null입니다.

다음 new ProcessingInstruction(target, data) 생성자 단계는 다음과 같습니다:

다음 this의 노드 문서를 현재 전역 객체의 연결된 Document로 설정합니다.
초기화합니다. 대상은 this이며, 인수는 target과 data입니다.

다음 target getter 단계는 다음을 반환하는 것입니다: this의 대상.

다음 hasAttributes() 메서드 단계는 다음과 같습니다: 다음 this의 속성 맵이 비어 있으면 false를 반환하고, 그렇지 않으면 true를 반환합니다.

다음 getAttributeNames() 메서드 단계는 다음의 결과를 반환하는 것입니다: 키 가져오기. 대상은 this의 속성 맵입니다.

다음 getAttribute(name) 메서드 단계는 다음의 결과를 반환하는 것입니다: 처리 명령 속성 가져오기. 주어진 값은 this와 name입니다.

다음 setAttribute(name, value) 메서드 단계는 다음과 같습니다:

name이 유효한 속성 로컬 이름이 아니면, 다음 예외를 던집니다: "InvalidCharacterError" DOMException.
설정합니다: this의 속성 맵[name]을 value로.
속성에서 데이터 갱신을 수행합니다. 주어진 값은 this입니다.

다음 removeAttribute(name) 메서드 단계는 다음과 같습니다:

제거합니다: this의 속성 맵[name].
속성에서 데이터 갱신을 수행합니다. 주어진 값은 this입니다.

다음 toggleAttribute(name, force) 메서드 단계는 다음과 같습니다:

name이 유효한 속성 로컬 이름이 아니면, 다음 예외를 던집니다: "InvalidCharacterError" DOMException.
attributes를 this의 속성 맵으로 둡니다.
attributes[name]이 존재하지 않으면:
1. force가 주어지지 않았거나 true이면, 다음과 같이 설정합니다: attributes[name]을 빈 문자열로. 이어서 속성에서 데이터 갱신을 수행합니다. 주어진 값은 this이며, 그런 다음 true를 반환합니다.
2. false를 반환합니다.
force가 주어지지 않았거나 false이면, 다음을 제거합니다: attributes[name]. 이어서 속성에서 데이터 갱신을 수행합니다. 주어진 값은 this이며, 그런 다음 false를 반환합니다.
true를 반환합니다.

다음 hasAttribute(name) 메서드 단계는 다음과 같습니다: this의 속성 맵[name]이 존재하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

4.14. 인터페이스 `Comment`

[Exposed=Window]
interface Comment : CharacterData {
  constructor(optional DOMString data = "");
};

comment = new Comment([data = ""]): 새로운 Comment 노드를 반환하며, 해당 노드의 데이터는 data입니다.

주석 노드 생성을 수행하려면, 주어진 문서 document와 문자열 data를 사용하여 다음을 수행합니다:

comment를 다음 노드 생성의 결과로 둡니다. 이 노드는 Comment를 구현하며, 주어진 값은 document입니다.
comment의 데이터를 data로 설정합니다.
comment를 반환합니다.

다음 new Comment(data) 생성자 단계는 this의 데이터를 data로 설정하고, this의 노드 문서를 현재 전역 객체의 연결된 Document로 설정하는 것입니다.

5. 범위(Ranges)

5.1. "DOM Ranges" 소개

StaticRange 및 Range 객체(범위)는 노드 트리 안의 콘텐츠 시퀀스를 나타낸다. 각 범위에는 시작과 끝이 있으며, 이들은 경계점이다. 경계점은 노드와 오프셋으로 구성된 튜플이다. 즉, 다른 말로 하면 범위는 노드 트리 안에서 두 경계점 사이의 콘텐츠 조각을 나타낸다.

범위는 편집에서 콘텐츠를 선택하고 복사하는 데 자주 사용된다.

Element: p
- Element: <img src="insanity-wolf" alt="Little-endian BOM; decode as big-endian!">
- Text: CSS 2.1 syndata is
- Element: <em>
  - Text: awesome
- Text: !

위 노드 트리에서 범위를 사용하여 “syndata is awes” 시퀀스를 나타낼 수 있다. p가 p 요소에 할당되고, em이 em 요소에 할당되었다고 가정하면 다음과 같이 수행할 수 있다:

var range = new Range(),
    firstText = p.childNodes[1],
    secondText = em.firstChild
range.setStart(firstText, 9) // do not forget the leading space
range.setEnd(secondText, 4)
// range now stringifies to the aforementioned quote

위 노드 트리의 src 및 alt와 같은 속성은 범위로 나타낼 수 없다. 범위는 노드에만 유용하다.

Range 객체는 StaticRange 객체와 달리 노드 트리의 변경에 영향을 받는다. 따라서 라이브 범위라고도 한다. 이러한 변경은 범위를 무효화하지 않으며, 범위가 계속 같은 콘텐츠 부분을 나타내도록 한다. 필연적으로, 예를 들어 범위가 나타내는 콘텐츠 일부가 변경되면 라이브 범위 자체도 노드 트리 변경의 일부로 수정될 수 있다.

자세한 내용은 삽입 및 제거 알고리즘, normalize() 메서드, 그리고 데이터 교체 및 분할 알고리즘을 참조한다.

노드 트리 변경에 대응하여 라이브 범위를 갱신하는 작업은 비용이 많이 들 수 있다. 모든 노드 트리 변경마다 영향을 받는 모든 Range 객체를 갱신해야 한다. 애플리케이션이 일부 라이브 범위에 관심이 없더라도 변경이 발생할 때 이를 최신 상태로 유지하는 비용을 여전히 부담해야 한다.

StaticRange 객체는 노드 트리가 변경되어도 갱신되지 않는 경량 범위이다. 따라서 라이브 범위와 동일한 유지 관리 비용이 발생하지 않는다.

5.2. 경계점(boundary points)

경계점은 튜플이며, 다음으로 구성된다: 노드(하나의 노드)와 오프셋(음이 아닌 정수).

올바른 경계점의 오프셋은 0과 경계점의 노드의 길이 사이에 있으며, 양 끝값을 포함한다.

경계점 (nodeA, offsetA)의 경계점 (nodeB, offsetB)에 대한 위치는 다음 단계에서 반환되는 앞, 같음, 또는 뒤이다:

단언: nodeA와 nodeB는 같은 루트를 가진다.
nodeA가 nodeB이면, offsetA가 offsetB일 때 같음을 반환하고, offsetA가 offsetB보다 작을 때 앞을 반환하며, offsetA가 offsetB보다 클 때 뒤를 반환한다.
nodeA가 nodeB의 뒤에 오는 노드이면, (nodeA, offsetA)에 대한 (nodeB, offsetB)의 위치가 앞이면 뒤를 반환하고, 뒤이면 앞을 반환한다.
nodeA가 nodeB의 조상이면:
1. child를 nodeB로 둔다.
2. child가 nodeA의 자식이 아닌 동안, child를 그 부모로 설정한다.
3. child의 인덱스가 offsetA보다 작으면, 뒤를 반환한다.
앞을 반환한다.

5.3. 인터페이스 `AbstractRange`

[Exposed=Window]
interface AbstractRange {
  readonly attribute Node startContainer;
  readonly attribute unsigned long startOffset;
  readonly attribute Node endContainer;
  readonly attribute unsigned long endOffset;
  readonly attribute boolean collapsed;
};

AbstractRange 인터페이스를 구현하는 객체는 범위(range)라고 합니다.

범위(range)는 두 개의 경계점(boundary point) — 시작(start)과 끝(end) — 을 가집니다.

편의를 위해, 범위(range)의 시작 노드(start node)는 시작(start)의 노드(node)이고, 시작 오프셋(start offset)은 시작(start)의 오프셋(offset)이며, 끝 노드(end node)는 끝(end)의 노드(node), 그리고 끝 오프셋(end offset)은 끝(end)의 오프셋(offset)입니다.

range가 collapsed 상태란, start node와 end node가 같고, start offset과 end offset도 같을 때를 의미한다.

node = range . startContainer: range의 시작 노드(start node)를 반환합니다.
offset = range . startOffset: range의 시작 오프셋(start offset)을 반환합니다.
node = range . endContainer: range의 끝 노드(end node)를 반환합니다.
offset = range . endOffset: range의 끝 오프셋(end offset)을 반환합니다.
collapsed = range . collapsed: range가 접힘(collapsed) 상태이면 true, 아니면 false를 반환합니다.

다음 startContainer getter 단계는 다음을 반환하는 것입니다: this의 시작 노드.

다음 startOffset getter 단계는 다음을 반환하는 것입니다: this의 시작 오프셋.

다음 endContainer getter 단계는 다음을 반환하는 것입니다: this의 끝 노드.

다음 endOffset getter 단계는 다음을 반환하는 것입니다: this의 끝 오프셋.

다음 collapsed getter 단계는 다음과 같습니다: this가 축소된 상태이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

5.4. 인터페이스 `StaticRange`

dictionary StaticRangeInit {
  required Node startContainer;
  required unsigned long startOffset;
  required Node endContainer;
  required unsigned long endOffset;
};

[Exposed=Window]
interface StaticRange : AbstractRange {
  constructor(StaticRangeInit init);
};

staticRange = new StaticRange(init): 노드 트리가 변이될 때 갱신되지 않는 새로운 범위 객체를 반환한다.

다음 new StaticRange(init) 생성자의 단계는 다음과 같습니다.

init["startContainer"] 또는 init["endContainer"]가 DocumentType 또는 Attr 노드이면 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
다음과 같이 설정합니다: this의 시작은 (init["startContainer"], init["startOffset"]) 이고 끝은 (init["endContainer"], init["endOffset"]).

StaticRange는 다음이 모두 참이면 유효하다:

그 시작과 끝은 같은 노드 트리에 있다.
그 시작 오프셋은 0과 그 시작 노드의 길이 사이에 있으며, 양 끝값을 포함한다.
그 끝 오프셋은 0과 그 끝 노드의 길이 사이에 있으며, 양 끝값을 포함한다.
그 시작은 그 끝보다 앞에 있거나 같다.

5.5. 인터페이스 `Range`

[Exposed=Window]
interface Range : AbstractRange {
  constructor();

  readonly attribute Node commonAncestorContainer;

  undefined setStart(Node node, unsigned long offset);
  undefined setEnd(Node node, unsigned long offset);
  undefined setStartBefore(Node node);
  undefined setStartAfter(Node node);
  undefined setEndBefore(Node node);
  undefined setEndAfter(Node node);
  undefined collapse(optional boolean toStart = false);
  undefined selectNode(Node node);
  undefined selectNodeContents(Node node);

  const unsigned short START_TO_START = 0;
  const unsigned short START_TO_END = 1;
  const unsigned short END_TO_END = 2;
  const unsigned short END_TO_START = 3;
  short compareBoundaryPoints(unsigned short how, Range sourceRange);

  [CEReactions] undefined deleteContents();
  [CEReactions, NewObject] DocumentFragment extractContents();
  [CEReactions, NewObject] DocumentFragment cloneContents();
  [CEReactions] undefined insertNode(Node node);
  [CEReactions] undefined surroundContents(Node newParent);

  [NewObject] Range cloneRange();
  undefined detach();

  boolean isPointInRange(Node node, unsigned long offset);
  short comparePoint(Node node, unsigned long offset);

  boolean intersectsNode(Node node);

  stringifier;
};

Range 인터페이스를 구현하는 객체는 라이브 범위라고 합니다.

트리를 수정하는 알고리즘(특히 삽입, 제거, 이동, 데이터 교체, 분할 알고리즘)는 해당 트리에 연결된 라이브 범위를 수정합니다.

라이브 범위의 루트는 해당 범위의 시작 노드의 루트입니다.

노드 node가 라이브 범위 range에 포함되는 것은 node의 루트가 range의 루트이고, (node, 0)이 range의 시작보다 뒤에 있으며, (node, node의 길이)가 range의 끝보다 앞에 있는 경우입니다.

노드가 라이브 범위에 부분적으로 포함되는 것은 해당 노드가 그 라이브 범위의 시작 노드의 포괄적 조상이지만 끝 노드의 포괄적 조상은 아니거나, 그 반대인 경우입니다.

이러한 정의를 더 잘 이해하는 데 도움이 되는 몇 가지 사실은 다음과 같습니다.

라이브 범위 안에 있다고 생각할 수 있는 콘텐츠는 모든 포함된 노드와, 경우에 따라 시작 노드와 끝 노드의 콘텐츠 일부로 구성됩니다. 해당 노드들이 CharacterData 노드인 경우입니다.
라이브 범위에 포함된 노드들은 일반적으로 연속되어 있지 않습니다. 포함된 노드의 부모가 항상 포함되는 것은 아니기 때문입니다.
그러나 포함된 노드의 자손들은 모두 포함됩니다. 또한 두 형제 노드가 포함되어 있다면 그 사이에 있는 모든 형제 노드도 포함됩니다.
라이브 범위의 시작 노드와 끝 노드는 해당 범위에 절대로 포함되지 않습니다.
첫 번째 포함된 노드(있는 경우)는 항상 시작 노드 뒤에 있으며, 마지막 포함된 노드는 항상 끝 노드의 마지막 자손과 같거나 그 앞에 있습니다.
부분적으로 포함된 노드가 존재하는 것은 시작 노드와 끝 노드가 서로 다른 경우에 한합니다.
commonAncestorContainer 속성 값은 포함되지도 않고 부분적으로 포함되지도 않습니다.
시작 노드가 끝 노드의 조상이면 공통 포괄적 조상은 시작 노드가 됩니다. 그 노드의 자식 중 정확히 하나가 부분적으로 포함되며, 자식이 포함되는 것은 그 자식이 부분적으로 포함된 자식보다 앞서는 경우에 한합니다. 끝 노드가 시작 노드의 조상이면 그 반대가 성립합니다.
시작 노드가 끝 노드의 포괄적 조상이 아니고, 그 반대도 아니라면 공통 포괄적 조상은 두 노드와 모두 다릅니다. 그 노드의 자식 중 정확히 두 개가 부분적으로 포함되며, 자식이 포함되는 것은 두 자식 사이에 있는 경우에 한합니다.

노드 node가 주어졌을 때 라이브 범위 사전 제거 단계는 다음과 같습니다.

parent를 node의 부모로 설정합니다.
단언합니다: parent는 null이 아닙니다.
index를 node의 인덱스로 설정합니다.
시작 노드가 node의 포괄적 자손인 각 라이브 범위에 대해 해당 시작을 (parent, index)로 설정합니다.
끝 노드가 node의 포괄적 자손인 각 라이브 범위에 대해 해당 끝을 (parent, index)로 설정합니다.
시작 노드가 parent이고 시작 오프셋이 index보다 큰 각 라이브 범위에 대해 해당 시작 오프셋을 1만큼 감소시킵니다.
끝 노드가 parent이고 끝 오프셋이 index보다 큰 각 라이브 범위에 대해 해당 끝 오프셋을 1만큼 감소시킵니다.

range = new Range(): 새로운 라이브 범위를 반환합니다.

다음 new Range() 생성자 단계는 다음 this의 시작점과 끝점을 (현재 전역 객체의 연결된 Document, 0)으로 설정하는 것입니다.

container = range . commonAncestorContainer: 다음 노드를 반환합니다. 이 노드는 문서에서 가장 멀리 떨어져 있는 조상으로, range의 시작 노드와 끝 노드 둘 모두의 조상입니다.

공통 조상 가져오기를 수행하려면, 대상인 라이브 범위 range에 대해 다음을 수행합니다:

container를 range의 시작 노드로 둡니다.
container가 다음의 포괄적 조상이 아닌 동안: range의 끝 노드, container를 container의 부모로 설정합니다.
container를 반환합니다.

다음 commonAncestorContainer getter 단계는 다음의 결과를 반환하는 것입니다: 공통 조상 가져오기. 대상은 this입니다.

다음과 같이 시작점 또는 끝점을 설정합니다. 대상은 range이며, 설정할 값은 경계점 (node, offset)입니다:

node가 문서 유형이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
offset이 node의 길이보다 크면, 던집니다: "IndexSizeError" DOMException.
boundaryPoint를 다음 경계점으로 둡니다: (node, offset).
이 단계들이 "시작점 설정"으로 호출된 경우
1. range의 루트가 node의 루트와 다르거나, boundaryPoint가 다음보다 뒤에 있으면: range의 끝점, range의 끝점을 boundaryPoint로 설정합니다.
2. range의 시작점을 boundaryPoint로 설정합니다.
이 단계들이 "끝점 설정"으로 호출된 경우
1. range의 루트가 node의 루트와 다르거나, boundaryPoint가 다음보다 앞에 있으면: range의 시작점, range의 시작점을 boundaryPoint로 설정합니다.
2. range의 끝점을 boundaryPoint로 설정합니다.

다음 setStart(node, offset) 메서드 단계는 시작점 설정을 수행하는 것입니다. 대상은 this이며, 설정할 값은 경계점 (node, offset)입니다.

다음 setEnd(node, offset) 메서드 단계는 끝점 설정을 수행하는 것입니다. 대상은 this이며, 설정할 값은 경계점 (node, offset)입니다.

다음 setStartBefore(node) 메서드 단계는 다음과 같습니다:

parent를 node의 부모로 둡니다.
parent가 null이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
시작점 설정을 수행합니다. 대상은 this이며, 설정할 값은 경계점 (parent, node의 인덱스)입니다.

다음 setStartAfter(node) 메서드 단계는 다음과 같습니다:

parent를 node의 부모로 둡니다.
parent가 null이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
시작점 설정을 수행합니다. 대상은 this이며, 설정할 값은 경계점 (parent, node의 인덱스에 1을 더한 값)입니다.

다음 setEndBefore(node) 메서드 단계는 다음과 같습니다:

parent를 node의 부모로 둡니다.
parent가 null이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
끝점 설정을 수행합니다. 대상은 this이며, 설정할 값은 경계점 (parent, node의 인덱스)입니다.

다음 setEndAfter(node) 메서드 단계는 다음과 같습니다:

parent를 node의 부모로 둡니다.
parent가 null이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
끝점 설정을 수행합니다. 대상은 this이며, 설정할 값은 경계점 (parent, node의 인덱스에 1을 더한 값)입니다.

다음 collapse(toStart) 메서드 단계는 다음과 같습니다: toStart가 true이면, 끝점을 시작점으로 설정합니다. 그렇지 않으면 시작점을 끝점으로 설정합니다.

다음과 같이 선택합니다. 대상은 노드 node이며, 선택에 사용하는 범위는 range입니다:

parent를 node의 부모로 둡니다.
parent가 null이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
index를 node의 인덱스로 둡니다.
range의 시작점을 경계점 (parent, index)로 설정합니다.
range의 끝점을 경계점 (parent, index에 1을 더한 값)으로 설정합니다.

다음 selectNode(node) 메서드 단계는 선택을 수행하는 것입니다. 대상은 node이며, 선택에 사용하는 범위는 this입니다.

다음 selectNodeContents(node) 메서드 단계는 다음과 같습니다:

node가 문서 유형이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
length를 다음 길이로 둡니다: node의 길이.
다음 시작점을 경계점 (node, 0)으로 설정합니다.
다음 끝점을 경계 점 (node, length)으로 설정합니다.

다음 compareBoundaryPoints(how, sourceRange) 메서드 단계는 다음과 같습니다:

how가 다음 중 어느 것도 아니면
- START_TO_START,
- START_TO_END,
- END_TO_END, 그리고
- END_TO_START,
다음 예외를 던집니다: "NotSupportedError" DOMException.
다음 this의 루트가 sourceRange의 루트와 다르면, 다음 예외를 던집니다: "WrongDocumentError" DOMException.
thisPoint와 sourcePoint를 null로 둡니다.
how에 따라 분기합니다:

START_TO_START:

thisPoint를 this의 시작점으로, sourcePoint를 sourceRange의 시작점으로 설정합니다.

START_TO_END:

thisPoint를 this의 끝점으로, sourcePoint를 sourceRange의 시작점으로 설정합니다.

END_TO_END:

thisPoint를 this의 끝점으로, sourcePoint를 sourceRange의 끝점으로 설정합니다.

END_TO_START:

thisPoint를 this의 시작점으로, sourcePoint를 sourceRange의 끝점으로 설정합니다.
다음 위치에 따라 분기합니다. thisPoint의 위치이며, 기준은 sourcePoint입니다:

앞
−1을 반환합니다.
같음
0을 반환합니다.
뒤
1을 반환합니다.

다음 deleteContents() 메서드 단계는 다음과 같습니다:

다음 this가 축소된 상태이면 반환합니다.
originalStartNode, originalStartOffset, originalEndNode, originalEndOffset을 각각 this의 시작 노드, 시작 오프셋, 끝 노드, 그리고 끝 오프셋으로 둡니다.
originalStartNode가 originalEndNode이고 이것이 CharacterData 노드이면:
1. 데이터 교체를 수행합니다. 대상은 originalStartNode이며, 인수는 originalStartOffset, originalEndOffset − originalStartOffset, 그리고 빈 문자열입니다.
2. 반환합니다.
nodesToRemove를 다음 모든 노드의 목록으로 둡니다. 이 노드들은 포함되어 있습니다. 포함하는 범위는 this이며, 트리 순서로 나열하되, 다음 노드는 제외합니다. 해당 노드의 부모 또한 포함되어 있으며, 포함하는 범위는 this입니다.
newNode와 newOffset을 null로 둡니다.
originalStartNode가 다음의 포괄적 조상이면: originalEndNode, newNode를 originalStartNode로, newOffset을 originalStartOffset으로 설정합니다.
그렇지 않으면:
1. referenceNode를 originalStartNode로 둡니다.
2. referenceNode의 부모가 null이 아니고 다음의 포괄적 조상이 아닌 동안: originalEndNode, referenceNode를 그 부모로 설정합니다.
3. newNode를 referenceNode의 부모로, newOffset을 referenceNode의 인덱스 + 1로 설정합니다.
  
  referenceNode의 부모가 null이라면, 해당 노드는 루트일 것입니다. 해당 범위는 this입니다. 그러면 해당 노드는 다음의 포괄적 조상일 것입니다: originalEndNode. 따라서 이 지점에 도달할 수 없었을 것입니다.
다음 this의 시작점과 끝점을 (newNode, newOffset)으로 설정합니다.
originalStartNode가 CharacterData 노드이면, 데이터 교체를 수행합니다. 대상은 originalStartNode이며, 인수는 originalStartOffset, originalStartNode의 길이 − originalStartOffset, 그리고 빈 문자열입니다.
각 node(nodesToRemove에 속함)에 대해, 트리 순서로: 제거합니다: node를.
originalEndNode가 CharacterData 노드이면, 데이터 교체를 수행합니다. 대상은 originalEndNode이며, 인수는 0, originalEndOffset, 그리고 빈 문자열입니다.

다음과 같이 추출합니다. 대상은 라이브 범위 range입니다:

fragment를 다음 문서 조각 생성의 결과로 둡니다. 주어진 값은 range의 시작 노드의 노드 문서입니다.
range가 축소된 상태이면, fragment를 반환합니다.
originalStartNode, originalStartOffset, originalEndNode, originalEndOffset을 각각 range의 시작 노드, 시작 오프셋, 끝 노드, 그리고 끝 오프셋으로 둡니다.
originalStartNode가 originalEndNode이고 이것이 CharacterData 노드이면:
1. clone을 다음의 복제본으로 둡니다: originalStartNode.
2. clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalStartNode이며, 인수는 originalStartOffset과 originalEndOffset − originalStartOffset입니다.
3. 덧붙입니다: clone을 fragment에.
4. 데이터 교체를 수행합니다. 대상은 originalStartNode이며, 인수는 originalStartOffset, originalEndOffset − originalStartOffset, 그리고 빈 문자열입니다.
5. fragment를 반환합니다.
commonAncestor를 다음 공통 조상 가져오기의 결과로 둡니다. 대상은 range입니다.
firstPartiallyContainedChild를 null로 둡니다.
originalStartNode가 다음의 포괄적 조상이 아니면: originalEndNode, firstPartiallyContainedChild를 다음 첫 번째 자식으로 설정합니다. 해당 자식은 commonAncestor의 자식이며, 부분적으로 포함되어 있습니다. 포함하는 범위는 range입니다.
lastPartiallyContainedChild를 null로 둡니다.
originalEndNode가 다음의 포괄적 조상이 아니면: originalStartNode, lastPartiallyContainedChild를 다음 마지막 자식으로 설정합니다. 해당 자식은 commonAncestor의 자식이며, 부분적으로 포함되어 있습니다. 포함하는 범위는 range입니다.

이 변수 할당들은 실제로 항상 타당합니다. 예를 들어, 다음 조건을 생각해 봅니다: originalStartNode가 다음의 포괄적 조상이 아닌 경우: originalEndNode. 그러면 originalStartNode 자체가 부분적으로 포함되어 있습니다. 포함하는 범위는 range이며, 그 모든 조상도 다음 자식에 이르기까지 마찬가지입니다: commonAncestor의 자식. commonAncestor는 originalStartNode일 수 없습니다. 다음의 포괄적 조상이어야 하기 때문입니다: originalEndNode. 다른 경우도 비슷합니다. 또한, 두 자식이 모두 정의되어 있다면 절대로 같을 수 없다는 점에 유의합니다.
containedChildren을 다음 모든 자식의 목록으로 둡니다. 이들은 commonAncestor의 자식이며, 포함하는 범위가 range인 것들입니다. 나열 순서는 트리 순서입니다.
containedChildren의 구성원 중 하나라도 문서 유형이면, 다음 예외를 던집니다: "HierarchyRequestError" DOMException.

첫 번째 또는 마지막으로 부분적으로 포함된 노드는 걱정할 필요가 없습니다. 문서 유형은 절대로 부분적으로 포함될 수 없기 때문입니다. 범위의 경계점이 될 수 없으며, 어떤 것의 조상도 될 수 없습니다.
newNode와 newOffset을 null로 둡니다.
originalStartNode가 다음의 포괄적 조상이면: originalEndNode, newNode를 originalStartNode로, newOffset을 originalStartOffset으로 설정합니다.
그렇지 않으면:
1. referenceNode를 originalStartNode로 둡니다.
2. referenceNode의 부모가 null이 아니고 다음의 포괄적 조상이 아닌 동안: originalEndNode, referenceNode를 그 부모로 설정합니다.
3. newNode를 다음 부모로 설정합니다: referenceNode의 부모. 그리고 newOffset을 referenceNode의 인덱스 + 1로 설정합니다.
  
  referenceNode의 부모가 null이라면, 해당 노드는 루트일 것입니다. 해당 범위는 range입니다. 그러면 해당 노드는 다음의 포괄적 조상일 것입니다: originalEndNode. 따라서 이 지점에 도달할 수 없었을 것입니다.
range의 시작점과 끝점을 (newNode, newOffset)으로 설정합니다.
firstPartiallyContainedChild가 CharacterData 노드이면:

이 경우, firstPartiallyContainedChild는 originalStartNode입니다.
1. clone을 다음의 복제본으로 둡니다: originalStartNode.
2. 다음 데이터, 즉 clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalStartNode이며, 인수는 originalStartOffset과 originalStartNode의 길이 − originalStartOffset입니다.
3. 덧붙입니다: clone을 fragment에.
4. 데이터 교체를 수행합니다. 대상은 originalStartNode이며, 인수는 originalStartOffset, originalStartNode의 길이 − originalStartOffset, 그리고 빈 문자열입니다.
그렇지 않고 firstPartiallyContainedChild가 null이 아니면:
1. clone을 다음의 복제본으로 둡니다: firstPartiallyContainedChild.
2. 덧붙입니다: clone을 fragment에.
3. subrange를 새로운 라이브 범위로 둡니다. 그 시작점은 (originalStartNode, originalStartOffset)이고, 그 끝점은 (firstPartiallyContainedChild, firstPartiallyContainedChild의 길이)입니다.
4. subfragment를 다음 추출의 결과로 둡니다. 대상은 subrange입니다.
5. 덧붙입니다: subfragment를 clone에.
각 contained child(containedChildren에 속함)에 대해: 덧붙입니다: contained child를 fragment에.
lastPartiallyContainedChild가 CharacterData 노드이면:

이 경우, lastPartiallyContainedChild는 originalEndNode입니다.
1. clone을 다음의 복제본으로 둡니다: originalEndNode.
2. clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalEndNode이며, 인수는 0과 originalEndOffset입니다.
3. 덧붙입니다: clone을 fragment에.
4. 데이터 교체를 수행합니다. 대상은 originalEndNode이며, 인수는 0, originalEndOffset, 그리고 빈 문자열입니다.
그렇지 않고 lastPartiallyContainedChild가 null이 아니면:
1. clone을 다음의 복제본으로 둡니다: lastPartiallyContainedChild.
2. 덧붙입니다: clone을 fragment에.
3. subrange를 새로운 라이브 범위로 둡니다. 그 시작점은 (lastPartiallyContainedChild, 0)이고, 그 끝점은 (originalEndNode, originalEndOffset)입니다.
4. subfragment를 다음 추출의 결과로 둡니다. 대상은 subrange입니다.
5. 덧붙입니다: subfragment를 clone에.
fragment를 반환합니다.

다음 extractContents() 메서드 단계는 다음의 결과를 반환하는 것입니다: 추출. 대상은 this입니다.

다음과 같이 내용을 복제합니다. 대상은 라이브 범위 range입니다:

fragment를 다음 문서 조각 생성의 결과로 둡니다. 주어진 값은 range의 시작 노드의 노드 문서입니다.
range가 축소된 상태이면, fragment를 반환합니다.
originalStartNode, originalStartOffset, originalEndNode, originalEndOffset을 각각 range의 시작 노드, 시작 오프셋, 끝 노드, 그리고 끝 오프셋으로 둡니다.
originalStartNode가 originalEndNode이고 이것이 CharacterData 노드이면:
1. clone을 다음의 복제본으로 둡니다: originalStartNode.
2. clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalStartNode이며, 인수는 originalStartOffset과 originalEndOffset − originalStartOffset입니다.
3. 덧붙입니다: clone을 fragment에.
4. fragment를 반환합니다.
commonAncestor를 다음 공통 조상 가져오기의 결과로 둡니다. 대상은 range입니다.
firstPartiallyContainedChild를 null로 둡니다.
originalStartNode가 다음의 포괄적 조상이 아니면: originalEndNode, firstPartiallyContainedChild를 다음 첫 번째 자식으로 설정합니다. 해당 자식은 commonAncestor의 자식이며, 부분적으로 포함되어 있습니다. 포함하는 범위는 range입니다.
lastPartiallyContainedChild를 null로 둡니다.
originalEndNode가 다음의 포괄적 조상이 아니면: originalStartNode, lastPartiallyContainedChild를 다음 마지막 자식으로 설정합니다. 해당 자식은 commonAncestor의 자식이며, 부분적으로 포함되어 있습니다. 포함하는 범위는 range입니다.

이 변수 할당들은 실제로 항상 타당합니다. 예를 들어, 다음 조건을 생각해 봅니다: originalStartNode가 다음의 포괄적 조상이 아닌 경우: originalEndNode. 그러면 originalStartNode 자체가 부분적으로 포함되어 있습니다. 포함하는 범위는 range이며, 그 모든 조상도 다음 자식에 이르기까지 마찬가지입니다: commonAncestor의 자식. commonAncestor는 originalStartNode일 수 없습니다. 다음의 포괄적 조상이어야 하기 때문입니다: originalEndNode. 다른 경우도 비슷합니다. 또한, 두 자식이 모두 정의되어 있다면 절대로 같을 수 없다는 점에 유의합니다.
containedChildren을 다음 모든 자식의 목록으로 둡니다. 이들은 commonAncestor의 자식이며, 포함하는 범위가 range인 것들입니다. 나열 순서는 트리 순서입니다.
containedChildren의 구성원 중 하나라도 문서 유형이면, 다음 예외를 던집니다: "HierarchyRequestError" DOMException.

첫 번째 또는 마지막으로 부분적으로 포함된 노드는 걱정할 필요가 없습니다. 문서 유형은 절대로 부분적으로 포함될 수 없기 때문입니다. 범위의 경계점이 될 수 없으며, 어떤 것의 조상도 될 수 없습니다.
firstPartiallyContainedChild가 CharacterData 노드이면:

이 경우, firstPartiallyContainedChild는 originalStartNode입니다.
1. clone을 다음의 복제본으로 둡니다: originalStartNode.
2. 다음 데이터, 즉 clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalStartNode이며, 인수는 originalStartOffset과 originalStartNode의 길이 − originalStartOffset입니다.
3. 덧붙입니다: clone을 fragment에.
그렇지 않고 firstPartiallyContainedChild가 null이 아니면:
1. clone을 다음의 복제본으로 둡니다: firstPartiallyContainedChild.
2. 덧붙입니다: clone을 fragment에.
3. subrange를 새로운 라이브 범위로 둡니다. 그 시작점은 (originalStartNode, originalStartOffset)이고, 그 끝점은 (firstPartiallyContainedChild, firstPartiallyContainedChild의 길이)입니다.
4. subfragment를 다음 내용 복제의 결과로 둡니다. 대상은 subrange입니다.
5. 덧붙입니다: subfragment를 clone에.
각 contained child(containedChildren에 속함)에 대해:
1. clone을 다음의 복제본으로 둡니다: contained child. 이때 subtree는 true로 설정합니다.
2. 덧붙입니다: clone을 fragment에.
lastPartiallyContainedChild가 CharacterData 노드이면:

이 경우, lastPartiallyContainedChild는 originalEndNode입니다.
1. clone을 다음의 복제본으로 둡니다: originalEndNode.
2. clone의 데이터를 다음의 결과로 설정합니다: 데이터 부분 문자열 추출. 대상은 originalEndNode이며, 인수는 0과 originalEndOffset입니다.
3. 덧붙입니다: clone을 fragment에.
그렇지 않고 lastPartiallyContainedChild가 null이 아니면:
1. clone을 다음의 복제본으로 둡니다: lastPartiallyContainedChild.
2. 덧붙입니다: clone을 fragment에.
3. subrange를 새로운 라이브 범위로 둡니다. 그 시작점은 (lastPartiallyContainedChild, 0)이고, 그 끝점은 (originalEndNode, originalEndOffset)입니다.
4. subfragment를 다음 내용 복제의 결과로 둡니다. 대상은 subrange입니다.
5. 덧붙입니다: subfragment를 clone에.
fragment를 반환합니다.

다음 cloneContents() 메서드 단계는 다음의 결과를 반환하는 것입니다: 내용 복제. 대상은 this입니다.

다음과 같이 삽입합니다. 삽입할 노드는 node이며, 삽입 대상은 라이브 범위 range입니다:

range의 시작 노드가 ProcessingInstruction 또는 Comment 노드이거나, Text 노드이면서 그 부모가 null이거나, node이면, 다음 예외를 던집니다: "HierarchyRequestError" DOMException.
referenceNode를 null로 둡니다.
range의 시작 노드가 Text 노드이면, referenceNode를 해당 Text 노드로 설정합니다.
그렇지 않으면, referenceNode를 다음 자식으로 설정합니다. 이 자식은 range의 시작 노드의 자식이며, 그 인덱스는 range의 시작 오프셋과 같습니다. 그러한 자식이 있으면 그 자식으로, 그렇지 않으면 null로 설정합니다.
parent를 range의 시작 노드로 둡니다. 이는 referenceNode가 null인 경우이며, 그렇지 않으면 referenceNode의 부모로 둡니다.
사전 삽입 유효성을 보장합니다. 주어진 값은 node, parent, referenceNode, 그리고 « »입니다.
range의 시작 노드가 Text 노드이면, referenceNode를 해당 노드를 분할한 결과로 설정합니다. 이때 오프셋은 range의 시작 오프셋입니다.
node가 referenceNode이면, referenceNode를 그 다음 형제로 설정합니다.
node의 부모가 null이 아니면, 제거합니다: node를.
newOffset을 parent의 길이로 둡니다. 이는 referenceNode가 null인 경우이며, 그렇지 않으면 referenceNode의 인덱스로 둡니다.
newOffset을 node의 길이만큼 늘립니다. 이는 node가 DocumentFragment 노드인 경우이며, 그렇지 않으면 1만큼 늘립니다.
사전 삽입합니다: node를 parent에, referenceNode 앞에.
range가 축소된 상태이면, range의 끝점을 (parent, newOffset)으로 설정합니다.

다음 insertNode(node) 메서드 단계는 삽입을 수행하는 것입니다. 삽입할 노드는 node이며, 삽입 대상은 this입니다.

다음 surroundContents(newParent) 메서드 단계는 다음과 같습니다:

다음 Text가 아닌 노드가 부분적으로 포함되어 있고, 포함하는 범위가 this이면, 다음 예외를 던집니다: "InvalidStateError" DOMException.
newParent가 Document, DocumentType, 또는 DocumentFragment 노드이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.

역사적인 이유로 CharacterData 노드는 여기서 검사하지 않으며, 나중에 부수 효과로 예외를 던지게 됩니다.
fragment를 다음 추출의 결과로 둡니다. 대상은 this입니다.
newParent에 자식이 있으면, 모두 교체합니다. 교체할 노드는 null이며, 대상은 newParent입니다.
삽입합니다: newParent를 this에.
덧붙입니다: fragment를 newParent에.
선택합니다. 대상은 newParent이며, 선택에 사용하는 범위는 this입니다.

다음 cloneRange() 메서드 단계는 새로운 라이브 범위를 반환하는 것입니다. 이 범위의 시작점과 끝점은 this의 것과 같습니다.

다음 detach() 메서드 단계는 아무것도 하지 않는 것입니다. 해당 기능(Range 객체 비활성화)은 제거되었지만, 메서드 자체는 호환성을 위해 유지됩니다.

position = range . comparePoint(node, offset): 점이 범위 앞에 있으면 −1을, 점이 범위 안에 있으면 0을, 점이 범위 뒤에 있으면 1을 반환합니다.
intersects = range . intersectsNode(node): range가 다음과 교차하는지 여부를 반환합니다: node.

다음 isPointInRange(node, offset) 메서드 단계는 다음과 같습니다:

node의 루트가 this의 루트와 다르면, false를 반환합니다.
node가 문서 유형이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
offset이 node의 길이보다 크면, 던집니다: "IndexSizeError" DOMException.
(node, offset)이 다음보다 앞에 있으면: 시작점, 또는 다음보다 뒤에 있으면: 끝점, 다음을 반환합니다: false.
true를 반환합니다.

다음 comparePoint(node, offset) 메서드 단계는 다음과 같습니다:

node의 루트가 this의 루트와 다르면, 다음 예외를 던집니다: "WrongDocumentError" DOMException.
node가 문서 유형이면, 다음 예외를 던집니다: "InvalidNodeTypeError" DOMException.
offset이 node의 길이보다 크면, 던집니다: "IndexSizeError" DOMException.
(node, offset)이 다음보다 앞에 있으면: 시작점, −1을 반환합니다.
(node, offset)이 다음보다 뒤에 있으면: 끝점, 1을 반환합니다.
0을 반환합니다.

다음 intersectsNode(node) 메서드 단계는 다음과 같습니다:

node의 루트가 this의 루트와 다르면, false를 반환합니다.
parent를 node의 부모로 둡니다.
parent가 null이면, true를 반환합니다.
offset을 node의 인덱스로 둡니다.
(parent, offset)이 다음보다 앞에 있고: 끝점, (parent, offset + 1)이 다음보다 뒤에 있으면: 시작점, true를 반환합니다.
false를 반환합니다.

다음 문자열화 동작은 다음 단계를 실행해야 합니다:

string을 빈 문자열로 둡니다.
다음 this의 시작 노드가 this의 끝 노드이고, 이것이 Text 노드이면, 다음 부분 문자열을 반환합니다. 해당 Text 노드의 데이터 중 다음 this의 시작 오프셋에서 시작하고 다음 this의 끝 오프셋에서 끝나는 부분 문자열입니다.
다음 this의 시작 노드가 Text 노드이면, 다음 부분 문자열을 덧붙입니다. 해당 노드의 데이터 중 this의 시작 오프셋부터 끝까지의 부분 문자열이며, 덧붙일 대상은 string입니다.
다음 연결 결과를 덧붙입니다. 연결할 값은 데이터이며, 다음 모든 Text 노드의 데이터입니다. 해당 노드는 포함되어 있으며, 포함하는 범위는 this입니다. 연결 순서는 트리 순서이며, 덧붙일 대상은 string입니다.
다음 this의 끝 노드가 Text 노드이면, 해당 노드의 데이터 중 시작부터 다음 this의 끝 오프셋까지의 부분 문자열을 string에 덧붙입니다.
string을 반환합니다.

다음 createContextualFragment(), getClientRects(), 그리고 getBoundingClientRect() 메서드는 다른 명세에 정의되어 있습니다. [DOM-Parsing] [CSSOM-VIEW]

6. 트래버설(Traversal)

NodeIterator 및 TreeWalker 객체를 사용하여 노드 트리를 필터링하고 순회할 수 있습니다.

각 NodeIterator 및 TreeWalker 객체에는 재귀 호출을 방지하기 위한 불리언 값인 활성 상태 여부가 연결되어 있습니다. 이 값은 초기에는 false입니다.

각 NodeIterator 및 TreeWalker 객체에는 다음 항목도 연결되어 있습니다. 루트(노드), whatToShow(비트마스크), 그리고 필터(콜백)입니다.

필터링하려면, 노드 node를 다음 중 하나인 NodeIterator 또는 TreeWalker 객체 traverser 내에서:

traverser의 활성 상태 여부가 true이면 "InvalidStateError" DOMException을 던집니다.
n을 node의 nodeType 속성 값 − 1로 설정합니다.
traverser의 n^번째 비트(0은 최하위 비트)가 whatToShow에서 설정되지 않았으면 FILTER_SKIP을 반환합니다.
traverser의 필터가 null이면 FILTER_ACCEPT를 반환합니다.
traverser의 활성 상태 여부를 true로 설정합니다.
result를 사용자 객체의 작업을 호출한 반환값으로 설정합니다. 이때 traverser의 필터, "acceptNode", 그리고 « node »를 사용합니다. 예외가 발생하면 traverser의 활성 상태 여부를 false로 설정하고 예외를 다시 던집니다.
traverser의 활성 상태 여부를 false로 설정합니다.
result를 반환합니다.

6.1. 인터페이스 `NodeIterator`

[Exposed=Window]
interface NodeIterator {
  [SameObject] readonly attribute Node root;
  readonly attribute Node referenceNode;
  readonly attribute boolean pointerBeforeReferenceNode;
  readonly attribute unsigned long whatToShow;
  readonly attribute NodeFilter? filter;

  Node? nextNode();
  Node? previousNode();

  undefined detach();
};

NodeIterator 객체는 createNodeIterator() 메서드를 사용하여 생성할 수 있습니다. 이 메서드는 Document 객체에서 제공됩니다.

각 NodeIterator 객체에는 연결된 반복자 컬렉션이 있으며, 이는 NodeIterator 객체의 루트를 루트로 하는 컬렉션으로, 필터가 모든 노드와 일치합니다.

노드 포인터는 노드(노드)와 앞쪽 포인터(불리언)로 구성된 튜플입니다.

각 NodeIterator 객체에는 연결된 참조( 노드 포인터)와 후보 참조(null 또는 노드 포인터이며, 초기값은 null)도 있습니다.

앞서 언급했듯이 NodeIterator 객체에는 활성 상태 여부, 루트, whatToShow, 그리고 필터도 연결되어 있습니다.

NodeIterator 객체 nodeIterator와 노드 toBeRemovedNode가 주어졌을 때 NodeIterator 사전 제거 단계는 다음과 같습니다.

nodeIterator의 참조를 nodeIterator의 참조, nodeIterator, 그리고 toBeRemovedNode가 주어졌을 때 노드 포인터를 조정한 결과로 설정합니다.
nodeIterator의 후보 참조가 null이 아니면 nodeIterator의 후보 참조를 nodeIterator의 후보 참조, nodeIterator, toBeRemovedNode가 주어졌을 때 노드 포인터를 조정한 결과로 설정합니다.

노드 포인터 nodePointer, NodeIterator 객체 nodeIterator, 그리고 노드 toBeRemovedNode가 주어졌을 때 노드 포인터를 조정하려면 다음 단계를 수행합니다. 이 단계는 노드 포인터를 반환합니다.

toBeRemovedNode가 nodePointer의 노드의 포괄적 조상이 아니거나, toBeRemovedNode가 nodeIterator의 루트의 포괄적 조상이면 nodePointer를 반환합니다.
nodePointer의 앞쪽 포인터가 true이면:
1. next를 toBeRemovedNode의 첫 번째 후속 노드 중 nodeIterator의 루트의 포괄적 자손이면서 toBeRemovedNode의 포괄적 자손이 아닌 노드로 설정합니다. 해당 노드가 있으면 사용하고, 그렇지 않으면 null로 설정합니다.
2. next가 null이 아니면 (next, true)를 반환합니다.
toBeRemovedNode의 이전 형제 노드가 null이면 newNode를 toBeRemovedNode의 부모로 설정합니다. 그렇지 않으면 toBeRemovedNode의 이전 형제 노드의 포괄적 자손 중 트리 순서에서 마지막에 나타나는 노드로 설정합니다.
(newNode, false)를 반환합니다.

다음 root getter 단계는 다음을 반환하는 것입니다: this의 루트.

다음 referenceNode getter 단계는 다음을 반환하는 것입니다: this의 참조의 노드.

다음 pointerBeforeReferenceNode getter 단계는 다음을 반환하는 것입니다: this의 참조의 포인터가 앞에 있는지 여부.

다음 whatToShow getter 단계는 다음을 반환하는 것입니다: this의 whatToShow.

다음 filter getter 단계는 다음을 반환하는 것입니다: this의 필터.

다음과 같이 순회합니다. 주어진 값은 NodeIterator 객체 iterator와 "next" 또는 "previous"인 type입니다:

iterator의 후보 참조를 iterator의 참조로 설정합니다.
result를 null로 둡니다.
true인 동안:
1. type이 "next"이면:
  1. iterator의 후보 참조의 포인터가 앞에 있는지 여부가 false이면:
    1. following을 다음 첫 번째 노드로 둡니다. 이 노드는 다음에 후행합니다: iterator의 후보 참조의 노드. 찾는 범위는 iterator의 반복자 컬렉션입니다. 그러한 해당 노드가 없으면, 반복을 중단합니다.
    2. iterator의 후보 참조를 (following, false)로 설정합니다.
  2. 그렇지 않으면, iterator의 후보 참조를 (iterator의 후보 참조의 노드, false)로 설정합니다.
2. 그렇지 않으면:
  1. iterator의 후보 참조의 포인터가 앞에 있는지 여부가 true이면:
    1. preceding을 다음 첫 번째 노드로 둡니다. 이 노드는 다음에 선행합니다: iterator의 후보 참조의 노드. 찾는 범위는 iterator의 반복자 컬렉션입니다. 그러한 해당 노드가 없으면, 반복을 중단합니다.
    2. iterator의 후보 참조를 (preceding, true)로 설정합니다.
  2. 그렇지 않으면, iterator의 후보 참조를 (iterator의 후보 참조의 노드, true)로 설정합니다.
3. node를 iterator의 후보 참조의 노드로 둡니다.
4. filterResult를 다음 필터링의 결과로 둡니다. 대상은 node이며, 사용하는 반복자는 iterator입니다. 이 과정에서 예외를 던지면, iterator의 후보 참조를 null로 설정하고 해당 예외를 다시 던집니다.
5. filterResult가 FILTER_ACCEPT이면:
  1. iterator의 참조를 iterator의 후보 참조로 설정합니다.
  2. result를 node로 설정합니다.
  3. 반복을 중단합니다.
iterator의 후보 참조를 null로 설정합니다.
result를 반환합니다.

다음 nextNode() 메서드 단계는 다음의 결과를 반환하는 것입니다: 순회. 인수는 this와 "next"입니다.

다음 previousNode() 메서드 단계는 다음의 결과를 반환하는 것입니다: 순회. 인수는 this와 "previous"입니다.

다음 detach() 메서드 단계는 아무것도 하지 않는 것입니다. 해당 기능(NodeIterator 객체 비활성화)은 제거되었지만, 메서드 자체는 호환성을 위해 유지됩니다.

6.2. 인터페이스 `TreeWalker`

[Exposed=Window]
interface TreeWalker {
  [SameObject] readonly attribute Node root;
  readonly attribute unsigned long whatToShow;
  readonly attribute NodeFilter? filter;
           attribute Node currentNode;

  Node? parentNode();
  Node? firstChild();
  Node? lastChild();
  Node? previousSibling();
  Node? nextSibling();
  Node? previousNode();
  Node? nextNode();
};

TreeWalker 객체는 createTreeWalker() 메서드를 사용하여 Document 객체에서 생성할 수 있습니다.

각 TreeWalker 객체에는 연결된 현재 노드(노드)가 있습니다.

앞서 언급했듯이 TreeWalker 객체에는 루트, whatToShow, 그리고 필터도 연결되어 있습니다.

다음 root getter 단계는 다음을 반환하는 것입니다: this의 루트.

다음 whatToShow getter 단계는 다음을 반환하는 것입니다: this의 whatToShow.

다음 filter getter 단계는 다음을 반환하는 것입니다: this의 필터.

다음 currentNode getter 단계는 다음을 반환하는 것입니다: this의 현재 노드.

다음 currentNode setter 단계는 this의 현재 노드를 주어진 값으로 설정하는 것입니다.

다음 parentNode() 메서드 단계는 다음과 같습니다:

node를 this의 현재 노드로 둡니다.
node가 null이 아니고 this의 루트가 아닌 동안:
1. node를 node의 부모로 설정합니다.
2. node가 null이 아니고 필터링(대상: node, 수행할 객체: this)의 반환값이 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환합니다.
null을 반환합니다.

자식 순회를 수행하려면, 주어진 TreeWalker 객체 walker와 "first" 또는 "last"인 type에 대해:

node를 walker의 현재 노드로 둡니다.
node를 node의 첫 번째 자식으로 설정합니다. 단, type이 "first"인 경우이며, 그렇지 않으면 node의 마지막 자식으로 설정합니다.
node가 null이 아닌 동안:
1. result를 다음 필터링의 결과로 둡니다. 대상은 node이며, 수행할 객체는 walker입니다.
2. result가 FILTER_ACCEPT이면, walker의 현재 노드를 node로 설정하고 node를 반환합니다.
3. result가 FILTER_SKIP이면:
  1. child를 node의 첫 번째 자식으로 둡니다. 단, type이 "first"인 경우이며, 그렇지 않으면 node의 마지막 자식으로 둡니다.
  2. child가 null이 아니면, node를 child로 설정하고 다음 반복으로 넘어갑니다.
4. node가 null이 아닌 동안:
  1. sibling을 node의 다음 형제로 둡니다. 단, type이 "first"인 경우이며, 그렇지 않으면 node의 이전 형제로 둡니다.
  2. sibling이 null이 아니면, node를 sibling으로 설정합니다. 그런 다음 반복을 중단합니다.
  3. parent를 node의 부모로 둡니다.
  4. parent가 null, walker의 루트, 또는 walker의 현재 노드이면, null을 반환합니다.
  5. node를 parent로 설정합니다.
null을 반환합니다.

다음 firstChild() 메서드 단계는 다음과 같이 자식 순회를 수행하는 것입니다. 인수는 this와 "first"입니다.

다음 lastChild() 메서드 단계는 다음과 같이 자식 순회를 수행하는 것입니다. 인수는 this와 "last"입니다.

형제 순회를 수행하려면, 주어진 TreeWalker 객체 walker와 "next" 또는 "previous"인 type에 대해:

node를 walker의 현재 노드로 둡니다.
node가 루트이면, null을 반환합니다.
true인 동안:
1. sibling을 node의 다음 형제로 둡니다. 단, type이 "next"인 경우이며, 그렇지 않으면 node의 이전 형제로 둡니다.
2. sibling이 null이 아닌 동안:
  1. node를 sibling으로 설정합니다.
  2. result를 다음 필터링의 결과로 둡니다. 대상은 node이며, 수행할 객체는 walker입니다.
  3. result가 FILTER_ACCEPT이면, walker의 현재 노드를 node로 설정하고 node를 반환합니다.
  4. sibling을 node의 첫 번째 자식으로 설정합니다. 단, type이 "next"인 경우이며, 그렇지 않으면 node의 마지막 자식으로 설정합니다.
  5. result가 FILTER_REJECT이거나 sibling이 null이면, sibling을 node의 다음 형제로 설정합니다. 단, type의 값이 "next"인 경우이며, 그렇지 않으면 node의 이전 형제로 설정합니다.
3. node를 node의 부모로 설정합니다.
4. node가 null이거나 walker의 루트이면, 다음을 반환합니다: null.
5. 다음 필터링의 반환값(대상: node, 수행할 객체: walker)이 FILTER_ACCEPT이면, null을 반환합니다.

다음 nextSibling() 메서드 단계는 다음과 같이 형제 순회를 수행하는 것입니다. 인수는 this와 "next"입니다.

다음 previousSibling() 메서드 단계는 다음과 같이 형제 순회를 수행하는 것입니다. 인수는 this와 "previous"입니다.

다음 previousNode() 메서드 단계는 다음과 같습니다:

node를 this의 현재 노드로 둡니다.
node가 this의 루트가 아닌 동안:
1. sibling을 node의 이전 형제로 둡니다.
2. sibling이 null이 아닌 동안:
  1. node를 sibling으로 설정합니다.
  2. result를 다음 필터링의 결과로 둡니다. 대상은 node이며, 수행할 객체는 this입니다.
  3. result가 FILTER_REJECT가 아니고 node에 자식이 있는 동안:
    1. node를 node의 마지막 자식으로 설정합니다.
    2. result를 다음 필터링의 결과로 설정합니다. 대상은 node이며, 수행할 객체는 this입니다.
  4. result가 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환합니다.
  5. sibling을 node의 이전 형제로 설정합니다.
3. node가 this의 루트이거나 node의 부모가 null이면, null을 반환합니다.
4. node를 node의 부모로 설정합니다.
5. 다음 필터링의 반환값(대상: node, 수행할 객체: this)이 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환합니다.
null을 반환합니다.

다음 nextNode() 메서드 단계는 다음과 같습니다:

node를 this의 현재 노드로 둡니다.
result를 FILTER_ACCEPT로 둡니다.
true인 동안:
1. result가 FILTER_REJECT가 아니고 node에 자식이 있는 동안:
  1. node를 자신의 첫 번째 자식으로 설정합니다.
  2. result를 다음 필터링의 결과로 설정합니다. 대상은 node이며, 수행할 객체는 this입니다.
  3. result가 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환합니다.
2. sibling을 null로 둡니다.
3. temporary를 node로 둡니다.
4. temporary가 null이 아닌 동안:
  1. temporary가 this의 루트이면, null을 반환합니다.
  2. sibling을 temporary의 다음 형제로 설정합니다.
  3. sibling이 null이 아니면, 반복을 중단합니다.
  4. temporary를 temporary의 부모로 설정합니다.
5. sibling이 null이면, null을 반환합니다.
6. node를 sibling으로 설정합니다.
7. result를 다음 필터링의 결과로 설정합니다. 대상은 node이며, 수행할 객체는 this입니다.
8. result가 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환합니다.

6.3. 인터페이스 `NodeFilter`

[Exposed=Window]
callback interface NodeFilter {
  // Constants for acceptNode()
  const unsigned short FILTER_ACCEPT = 1;
  const unsigned short FILTER_REJECT = 2;
  const unsigned short FILTER_SKIP = 3;

  // Constants for whatToShow
  const unsigned long SHOW_ALL = 0xFFFFFFFF;
  const unsigned long SHOW_ELEMENT = 0x1;
  const unsigned long SHOW_ATTRIBUTE = 0x2;
  const unsigned long SHOW_TEXT = 0x4;
  const unsigned long SHOW_CDATA_SECTION = 0x8;
  const unsigned long SHOW_ENTITY_REFERENCE = 0x10; // legacy
  const unsigned long SHOW_ENTITY = 0x20; // legacy
  const unsigned long SHOW_PROCESSING_INSTRUCTION = 0x40;
  const unsigned long SHOW_COMMENT = 0x80;
  const unsigned long SHOW_DOCUMENT = 0x100;
  const unsigned long SHOW_DOCUMENT_TYPE = 0x200;
  const unsigned long SHOW_DOCUMENT_FRAGMENT = 0x400;
  const unsigned long SHOW_NOTATION = 0x800; // legacy

  unsigned short acceptNode(Node node);
};

NodeFilter 객체는 필터로서 NodeIterator 및 TreeWalker 객체에 사용할 수 있고, whatToShow 비트마스크 상수를 제공합니다. NodeFilter 객체는 일반적으로 자바스크립트 함수로 구현됩니다.

이 상수들은 filter(필터) 반환값으로 사용할 수 있습니다:

FILTER_ACCEPT (1);
FILTER_REJECT (2);
FILTER_SKIP (3);

이 상수들은 whatToShow에 사용할 수 있습니다:

SHOW_ALL (4294967295, 16진수로 FFFFFFFF);
SHOW_ELEMENT (1);
SHOW_ATTRIBUTE (2);
SHOW_TEXT (4);
SHOW_CDATA_SECTION (8);
SHOW_PROCESSING_INSTRUCTION (64, 16진수로 40);
SHOW_COMMENT (128, 16진수로 80);
SHOW_DOCUMENT (256, 16진수로 100);
SHOW_DOCUMENT_TYPE (512, 16진수로 200);
SHOW_DOCUMENT_FRAGMENT (1024, 16진수로 400);

7. 집합(Sets)

예, DOMTokenList 라는 이름은 유감스러운 레거시 오류입니다.

7.1. 인터페이스 `DOMTokenList`

[Exposed=Window]
interface DOMTokenList {
  readonly attribute unsigned long length;
  getter DOMString? item(unsigned long index);
  boolean contains(DOMString token);
  [CEReactions] undefined add(DOMString... tokens);
  [CEReactions] undefined remove(DOMString... tokens);
  [CEReactions] boolean toggle(DOMString token, optional boolean force);
  [CEReactions] boolean replace(DOMString token, DOMString newToken);
  boolean supports(DOMString token);
  [CEReactions] stringifier attribute DOMString value;
  iterable<DOMString>;
};

하나의 DOMTokenList 객체에는 연결된 토큰 집합(집합)이 있으며, 이는 초기에는 비어 있습니다.

하나의 DOMTokenList 객체에는 연결된 요소 (요소)와 속성 이름(속성의 로컬 이름)도 있습니다.

명세는 DOMTokenList의 요소와 속성 이름에 대한 지원되는 토큰을 정의할 수 있습니다.

DOMTokenList 객체 set의 검증 단계는 주어진 token에 대해 다음과 같습니다.

set의 요소와 속성 이름에 지원되는 토큰이 정의되어 있지 않으면 TypeError를 던집니다.
lowercaseToken을 token을 ASCII 소문자로 변환한 값으로 설정합니다.
lowercaseToken이 set의 요소와 속성 이름의 지원되는 토큰에 존재하면 true를 반환합니다.
false를 반환합니다.

DOMTokenList 객체 set의 갱신 단계는 다음과 같습니다.

null, set의 속성 이름, 그리고 set의 요소가 주어졌을 때 네임스페이스와 로컬 이름으로 속성을 가져온 결과가 null이고 set의 토큰 집합이 비어 있으면 반환합니다.
set의 요소, set의 속성 이름, 그리고 set의 토큰 집합에 대해 순서가 있는 집합 직렬화기를 실행한 결과가 주어졌을 때 속성 값을 설정합니다.

DOMTokenList 객체 set의 직렬화 단계에서는 set의 요소와 set의 속성 이름이 주어졌을 때 속성 값을 가져오는 작업을 실행한 결과를 반환합니다.

DOMTokenList 객체 set에는 set의 요소에 대한 다음 속성 변경 단계가 있습니다.

localName이 set의 속성 이름이고, namespace가 null이고 value가 null이면 set의 토큰 집합을 비웁니다.
그렇지 않고 localName이 set의 속성 이름이고 namespace가 null이면 set의 토큰 집합을 value를 파싱한 결과로 설정합니다.

DOMTokenList 객체 set이 생성될 때:

element를 set의 요소로 설정합니다.
attributeName을 set의 속성 이름으로 설정합니다.
value를 element와 attributeName이 주어졌을 때 속성 값을 가져온 결과로 설정합니다.
element, attributeName, value, value, null에 대해 속성 변경 단계를 실행합니다.

tokenlist . length

토큰의 개수를 반환합니다.

tokenlist . item(index)

tokenlist[index]

인덱스가 index인 토큰을 반환합니다.

tokenlist . contains(token)

token이 존재하면 true를, 그렇지 않으면 false를 반환합니다.

tokenlist . add(tokens…)

전달된 모든 인수를 추가하되, 이미 존재하는 인수는 제외합니다.

인수 중 하나가 빈 문자열이면 "SyntaxError" DOMException을 던집니다.

인수 중 하나에 ASCII 공백 문자가 포함되어 있으면 "InvalidCharacterError" DOMException을 던집니다.

tokenlist . remove(tokens…)

전달된 인수가 존재하면 제거합니다.

인수 중 하나가 빈 문자열이면 "SyntaxError" DOMException을 던집니다.

인수 중 하나에 ASCII 공백 문자가 포함되어 있으면 "InvalidCharacterError" DOMException을 던집니다.

tokenlist . toggle(token [, force])

force가 주어지지 않으면 token을 "토글"하여, 존재하면 제거하고 존재하지 않으면 추가합니다. force가 true이면 token을 추가합니다. (이는 add()와 같습니다.) force가 false이면 token을 제거합니다. (이는 remove()와 같습니다.)

현재 token이 존재하면 true를, 그렇지 않으면 false를 반환합니다.

token이 비어 있으면 "SyntaxError" DOMException을 던집니다.

token에 공백이 포함되어 있으면 "InvalidCharacterError" DOMException을 던집니다.

tokenlist . replace(token, newToken)

token을 newToken으로 교체합니다.

token이 newToken으로 교체되었으면 true를, 그렇지 않으면 false를 반환합니다.

인수 중 하나가 빈 문자열이면 "SyntaxError" DOMException을 던집니다.

인수 중 하나에 ASCII 공백 문자가 포함되어 있으면 "InvalidCharacterError" DOMException을 던집니다.

tokenlist . supports(token)

token이 연결된 속성의 지원되는 토큰에 있으면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.

연결된 속성에 지원되는 토큰이 정의되어 있지 않으면 TypeError를 던집니다.

tokenlist . value

연결된 집합을 문자열로 반환합니다.

설정할 수 있으며, 이를 통해 연결된 속성을 변경합니다.

다음 length getter 단계는 다음을 반환하는 것입니다: this의 토큰 집합의 크기.

객체의 지원되는 속성 인덱스는 다음 범위의 숫자입니다: 0부터 객체의 토큰 집합의 크기 − 1까지. 단, 토큰 집합이 비어 있으면, 이 경우에는 지원되는 속성 인덱스가 없습니다.

다음 item(index) 메서드 단계는 다음과 같습니다:

index가 this의 토큰 집합의 크기보다 크거나 같으면, null을 반환합니다.
다음을 반환합니다: this의 토큰 집합[index].

다음 contains(token) 메서드 단계는 true를 반환하는 것입니다. 단, this의 토큰 집합[token]이 존재하는 경우이며, 그렇지 않으면 false를 반환합니다.

다음 add(tokens…) 메서드 단계는 다음과 같습니다:

각 token(tokens에 속함)에 대해:
1. token이 빈 문자열이면, 다음 예외를 던집니다: "SyntaxError" DOMException.
2. token에 ASCII 공백이 하나라도 포함되어 있으면, 던집니다: 다음 예외인 "InvalidCharacterError" DOMException.
각 token(tokens에 속함)에 대해: 덧붙입니다: token을 this의 토큰 집합에.
다음 갱신 단계를 실행합니다.

다음 remove(tokens…) 메서드 단계는 다음과 같습니다:

각 token(tokens에 속함)에 대해:
1. token이 빈 문자열이면, 다음 예외를 던집니다: "SyntaxError" DOMException.
2. token에 ASCII 공백이 하나라도 포함되어 있으면, 던집니다: 다음 예외인 "InvalidCharacterError" DOMException.
각 token(tokens에 속함)에 대해: 제거합니다: token을 다음에서: this의 토큰 집합.
다음 갱신 단계를 실행합니다.

다음 toggle(token, force) 메서드 단계는 다음과 같습니다:

token이 빈 문자열이면, 다음 예외를 던집니다: "SyntaxError" DOMException.
token에 ASCII 공백이 하나라도 포함되어 있으면, 다음 예외를 던집니다: "InvalidCharacterError" DOMException.
만약 this의 토큰 집합[token]이 존재하면:
1. force가 주어지지 않았거나 false이면, 제거합니다: token을 this의 토큰 집합에서. 그런 다음 갱신 단계를 실행하고 반환합니다: false.
2. true를 반환합니다.
그렇지 않고, force가 주어지지 않았거나 true이면, 덧붙입니다: token을 다음 this의 토큰 집합에. 그런 다음 갱신 단계를 실행하고 true를 반환합니다.
false를 반환합니다.

다음 갱신 단계는 toggle()에서 웹 호환성을 위해 항상 실행되지는 않습니다.

다음 replace(token, newToken) 메서드 단계는 다음과 같습니다:

token 또는 newToken 중 하나라도 빈 문자열이면, 다음 예외를 던집니다: "SyntaxError" DOMException.
token 또는 newToken 중 하나라도 ASCII 공백을 포함하면, 다음 예외를 던집니다: "InvalidCharacterError" DOMException.
만약 this의 토큰 집합에 다음 토큰이 포함되어 있지 않으면: token, false를 반환합니다.
교체합니다: token을 this의 토큰 집합에서 newToken으로.
다음 갱신 단계를 실행합니다.
true를 반환합니다.

다음 갱신 단계는 replace()에서 웹 호환성을 위해 항상 실행되지는 않습니다.

다음 supports(token) 메서드 단계는 다음과 같습니다:

result를 다음 검증 단계의 반환값으로 둡니다. 호출 인수는 token입니다.
result를 반환합니다.

다음 value getter 단계는 다음 단계의 실행 결과를 반환하는 것입니다: this의 직렬화 단계.

다음 value setter 단계는 다음과 같이 속성 값 설정을 수행하는 것입니다. 대상은 this의 요소이며, 사용할 인수는 this의 속성 이름과 주어진 값입니다.

8. XPath

DOM Level 3 XPath는 XPath 1.0 표현식을 평가하는 API를 정의했습니다. 이 API들은 널리 구현되어 있지만 유지 관리되고 있지 않습니다. 인터페이스 정의는 Web IDL이 변경될 때 업데이트할 수 있도록 여기에서 유지되고 있습니다. 이러한 API의 전체 정의는 여전히 필요하며, 관련 작업은 whatwg/dom#67에서 추적 및 기여할 수 있습니다. [DOM-Level-3-XPath] [XPath] [WEBIDL]

8.1. 인터페이스 `XPathResult`

[Exposed=Window]
interface XPathResult {
  const unsigned short ANY_TYPE = 0;
  const unsigned short NUMBER_TYPE = 1;
  const unsigned short STRING_TYPE = 2;
  const unsigned short BOOLEAN_TYPE = 3;
  const unsigned short UNORDERED_NODE_ITERATOR_TYPE = 4;
  const unsigned short ORDERED_NODE_ITERATOR_TYPE = 5;
  const unsigned short UNORDERED_NODE_SNAPSHOT_TYPE = 6;
  const unsigned short ORDERED_NODE_SNAPSHOT_TYPE = 7;
  const unsigned short ANY_UNORDERED_NODE_TYPE = 8;
  const unsigned short FIRST_ORDERED_NODE_TYPE = 9;

  readonly attribute unsigned short resultType;
  readonly attribute unrestricted double numberValue;
  readonly attribute DOMString stringValue;
  readonly attribute boolean booleanValue;
  readonly attribute Node? singleNodeValue;
  readonly attribute boolean invalidIteratorState;
  readonly attribute unsigned long snapshotLength;

  Node? iterateNext();
  Node? snapshotItem(unsigned long index);
};

8.2. 인터페이스 `XPathExpression`

[Exposed=Window]
interface XPathExpression {
  // XPathResult.ANY_TYPE = 0
  XPathResult evaluate(Node contextNode, optional unsigned short type = 0, optional XPathResult? result = null);
};

8.3. 믹스인 `XPathEvaluatorBase`

callback interface XPathNSResolver {
  DOMString? lookupNamespaceURI(DOMString? prefix);
};

interface mixin XPathEvaluatorBase {
  [NewObject] XPathExpression createExpression(DOMString expression, optional XPathNSResolver? resolver = null);
  Node createNSResolver(Node nodeResolver); // legacy
  // XPathResult.ANY_TYPE = 0
  XPathResult evaluate(DOMString expression, Node contextNode, optional XPathNSResolver? resolver = null, optional unsigned short type = 0, optional XPathResult? result = null);
};
Document includes XPathEvaluatorBase;

createNSResolver(nodeResolver) 메서드의 단계는 nodeResolver를 반환하는 것입니다.

이 메서드는 오직 역사적 이유로 존재합니다.

8.4. 인터페이스 `XPathEvaluator`

[Exposed=Window]
interface XPathEvaluator {
  constructor();
};

XPathEvaluator includes XPathEvaluatorBase;

역사적인 이유로 XPathEvaluator를 생성할 수도 있고 Document에서 동일한 메서드에 접근할 수도 있다.

9. XSLT

브라우저에서 클라이언트 측 XSLT를 사용하지 말아야 한다. 브라우저의 XSLT 구현은 메모리 안전 취약점에 매우 취약하며, 웹 플랫폼은 안전한 대체 수단으로 JavaScript를 사용하는 방향으로 발전해 왔다. 이러한 이유로 이 기능은 웹 플랫폼에서 제거되는 중이다. (이는 수년이 걸리는 긴 과정이다.)

XSL Transformations (XSLT)는 XML 문서를 다른 XML 문서로 변환하는 언어입니다. 이 섹션에서 정의된 API는 널리 구현되어 있으며, Web IDL이 변경될 때 업데이트될 수 있도록 이곳에서 유지 관리됩니다. 이러한 API의 전체 정의는 여전히 필요하며, 관련 작업은 whatwg/dom#181에서 추적 및 기여할 수 있습니다. [XSLT]

9.1. 인터페이스 `XSLTProcessor`

[Exposed=Window]
interface XSLTProcessor {
  constructor();
  undefined importStylesheet(Node style);
  [CEReactions] DocumentFragment transformToFragment(Node source, Document output);
  [CEReactions] Document transformToDocument(Node source);
  undefined setParameter([LegacyNullToEmptyString] DOMString namespaceURI, DOMString localName, any value);
  any getParameter([LegacyNullToEmptyString] DOMString namespaceURI, DOMString localName);
  undefined removeParameter([LegacyNullToEmptyString] DOMString namespaceURI, DOMString localName);
  undefined clearParameters();
  undefined reset();
};

10. 보안 및 개인정보 보호 고려 사항

이 표준에는 알려진 보안 또는 개인정보 보호 고려 사항이 없습니다.

11. 과거(Historical)

이 표준에는 제거된 여러 인터페이스와 인터페이스 멤버가 있었습니다.

아래 인터페이스들이 제거되었습니다:

DOMConfiguration
DOMError
DOMErrorHandler
DOMImplementationList
DOMImplementationSource
DOMLocator
DOMObject
DOMUserData
Entity
EntityReference
MutationEvent
MutationNameEvent
NameList
Notation
RangeException
TypeInfo
UserDataHandler

그리고 아래 인터페이스 멤버들이 제거되었습니다:

Attr

schemaTypeInfo
isId

Document

createEntityReference()
xmlEncoding
xmlStandalone
xmlVersion
strictErrorChecking
domConfig
normalizeDocument()
renameNode()

DocumentType

entities
notations
internalSubset

DOMImplementation

getFeature()

Element

schemaTypeInfo
setIdAttribute()
setIdAttributeNS()
setIdAttributeNode()

Node

isSupported
getFeature()
getUserData()
setUserData()

NodeIterator

expandEntityReferences

Text

isElementContentWhitespace
replaceWholeText()

TreeWalker

expandEntityReferences

감사의 글

DOM의 상호운용성을 높이고 이 표준의 목표를 발전시키는 데 수많은 사람들이 오랜 세월 동안 도움을 주었습니다. 마찬가지로, 오늘날 이 표준이 이 자리에 오기까지 많은 분들이 기여해 주셨습니다.

이에 감사의 마음을 전합니다: Adam Klein, Adrian Bateman, Ahmid snuggs, Alex Komoroske, Alex Russell, Alexey Shvayka, Andreas Kling, Andreu Botella, Anthony Ramine, Arkadiusz Michalski, Armen Michaeli, Arnaud Le Hors, Arun Ranganathan, Benjamin Gruenbaum, Björn Höhrmann, Boris Zbarsky, Brandon Payton, Brandon Slade, Brandon Wallace, Brian Kardell, C. Scott Ananian, Cameron McCormack, Chris Dumez, Chris Paris, Chris Rebert, Cyrille Tuzi, Dan Burzo, Daniel Clark, Daniel Glazman, Darien Maillet Valentine, Darin Fisher, David Baron, David Bruant, David Flanagan, David Håsäther, David Hyatt, Deepak Sherveghar, Dethe Elza, Dimitri Glazkov, Domenic Denicola, Dominic Cooney, Dominique Hazaël-Massieux, Don Jordan, Doug Schepers, Edgar Chen, Elisée Maurer, Elliott Sprehn, Emilio Cobos Álvarez, Eric Bidelman, Erik Arvidsson, Evgeny Kapun, François Daoust, François Remy, Gary Kacmarcik, Gavin Nicol, Giorgio Liscio, Glen Huang, Glenn Adams, Glenn Maynard, Hajime Morrita, Harald Alvestrand, Hayato Ito, Henri Sivonen, Hongchan Choi, Hunan Rostomyan, Ian Hickson, Igor Bukanov, Jacob Rossi, Jake Archibald, Jake Verbaten, James Graham, James Greene, James M Snell, James Robinson, Jayson Chen, Jeffrey Yasskin, Jens Lindström, Jeremy Davis, Jesse McCarthy, Jinho Bang, João Eiras, Joe Kesselman, John Atkins, John Dai, Jonas Sicking, Jonathan Kingston, Jonathan Robie, Joris van der Wel, Joshua Bell, J. S. Choi, Jungkee Song, Justin Summerlin, Kagami Sascha Rosylight, 呂康豪 (Kang-Hao Lu), 田村健人 (Kent TAMURA), Kevin J. Sung, Kevin Sweeney, Kirill Topolyan, Koji Ishii, Lachlan Hunt, Lauren Wood, Luca Casonato, Luke Zielinski, Magne Andersson, Majid Valipour, Malte Ubl, Manish Goregaokar, Manish Tripathi, Marcos Caceres, Mark Miller, Martijn van der Ven, Mason Freed, Mats Palmgren, Mounir Lamouri, Michael Stramel, Michael™ Smith, Mike Champion, Mike Taylor, Mike West, Nicolás Peña Moreno, Nidhi Jaju, Ojan Vafai, Oliver Nightingale, Olli Pettay, Ondřej Žára, Peter Sharpe, Philip Jägenstedt, Philippe Le Hégaret, Piers Wombwell, Pierre-Marie Dartus, prosody—Gab Vereable Context(, Rafael Weinstein, Rakina Zata Amni, Richard Bradshaw, Rick Byers, Rick Waldron, Robbert Broersma, Robin Berjon, Roland Steiner, Rune F. Halvorsen, Russell Bicknell, Ruud Steltenpool, Ryosuke Niwa, Sam Dutton, Sam Sneddon, Samuel Giles, Sanket Joshi, Scott Haseley, Sebastian Mayr, Seo Sanghyeon, Sergey G. Grekhov, Shiki Okasaka, Shinya Kawanaka, Simon Pieters, Simon Wülker, Stef Busking, Steve Byrne, Steven Obiajulu, Stig Halvorsen, Tab Atkins, Takashi Sakamoto, Takayoshi Kochi, Theresa O’Connor, Theodore Dubois, timeless, Timo Tijhof, Tobie Langel, Tom Pixley, Travis Leithead, Trevor Rowbotham, triple-underscore, Tristan Fraipont, Veli Şenol, Vidur Apparao, Warren He, Xidorn Quan, Yash Handa, Yehuda Katz, Yoav Weiss, Yoichi Osato, Yoshinori Sano, Yu Han, Yusuke Abe, and Zack Weinberg 여러분 모두 정말 훌륭합니다!

이 표준은 Anne van Kesteren (Apple, annevk@annevk.nl) 그리고 Aryeh Gregor(ayg@aryeh.name), Ms2ger(ms2ger@gmail.com)의 큰 기여로 작성되었습니다.

지적재산권(Intellectual property rights)

커스텀 요소 관련 통합 지점의 개정 이력 일부는 custom elements에서 볼 수 있으며, w3c/webcomponents 저장소에서 확인할 수 있습니다. 해당 저장소는 W3C 소프트웨어 및 문서 라이선스로 제공됩니다.

이 문서는 Living Standard입니다. 특허 심사 버전에 관심 있는 분들은 Living Standard Review Draft를 참고하세요.

DOM

개요

1. 인프라스트럭처

1.1. 트리

1.2. 순서가 있는 집합

1.3. 셀렉터

1.4. 이름 검증

2. 이벤트

2.1. "DOM 이벤트" 소개

2.2. 인터페이스 Event

2.3. Window 인터페이스에 대한 레거시 확장

2.4. 인터페이스 CustomEvent

2.5. 이벤트 생성

2.6. 이벤트 인터페이스 정의

2.7. 인터페이스 EventTarget

2.8. 이벤트 리스너 관찰

2.9. 이벤트 디스패치

2.10. 이벤트 발생

2.11. 동작과 발생의 차이

3. 진행 중인 작업 중단

3.1. 인터페이스 AbortController

3.2. 인터페이스 AbortSignal

3.2.1. 가비지 컬렉션

3.3. API에서 AbortController 와 AbortSignal 객체 사용하기

4. 노드

4.1. "DOM" 소개

4.2. 노드 트리

4.2.1. 문서 트리

4.2.2. 섀도 트리

4.2.2.1. 슬롯

4.2.2.2. 슬롯 가능한 요소

4.2.2.3. 슬롯과 슬롯 가능한 요소 찾기

4.2.2.4. 슬롯 가능한 요소와 슬롯 할당

4.2.2.5. 슬롯 변경 신호

4.2.3. 변경 알고리즘

4.2.4. 믹스인 NonElementParentNode

4.2.5. 믹스인 DocumentOrShadowRoot

4.2.6. 믹스인 ParentNode

4.2.7. 믹스인 NonDocumentTypeChildNode

4.2.8. 믹스인 ChildNode

4.2.9. 믹스인 Slottable

4.2.10. 구식 컬렉션: NodeList 및 HTMLCollection

4.2.10.1. 인터페이스 NodeList

4.2.10.2. 인터페이스 HTMLCollection

4.3. 변이 옵저버(Mutation observers)

4.3.1. 인터페이스 MutationObserver

4.3.2. 변이 레코드 큐잉

4.3.3. 인터페이스 MutationRecord

4.4. 인터페이스 Node

4.5. 인터페이스 Document

4.5.1. 인터페이스 DOMImplementation

4.6. 인터페이스 DocumentType

4.7. 인터페이스 DocumentFragment

4.8. 인터페이스 ShadowRoot

4.9. 인터페이스 Element

4.9.1. 인터페이스 NamedNodeMap

4.9.2. 인터페이스 Attr

4.10. 인터페이스 CharacterData

4.11. 인터페이스 Text

4.12. 인터페이스 CDATASection

4.13. 인터페이스 ProcessingInstruction

4.14. 인터페이스 Comment

5. 범위(Ranges)

5.1. "DOM Ranges" 소개

5.2. 경계점(boundary points)

5.3. 인터페이스 AbstractRange

5.4. 인터페이스 StaticRange

5.5. 인터페이스 Range

6. 트래버설(Traversal)

6.1. 인터페이스 NodeIterator

6.2. 인터페이스 TreeWalker

6.3. 인터페이스 NodeFilter

7. 집합(Sets)

7.1. 인터페이스 DOMTokenList

8. XPath

8.1. 인터페이스 XPathResult

8.2. 인터페이스 XPathExpression

8.3. 믹스인 XPathEvaluatorBase

8.4. 인터페이스 XPathEvaluator

9. XSLT

2.2. 인터페이스 `Event`

2.3. `Window` 인터페이스에 대한 레거시 확장

2.4. 인터페이스 `CustomEvent`

2.7. 인터페이스 `EventTarget`

3.1. 인터페이스 `AbortController`

3.2. 인터페이스 `AbortSignal`

3.3. API에서 `AbortController` 와 `AbortSignal` 객체 사용하기

4.2.4. 믹스인 `NonElementParentNode`

4.2.5. 믹스인 `DocumentOrShadowRoot`

4.2.6. 믹스인 `ParentNode`

4.2.7. 믹스인 `NonDocumentTypeChildNode`

4.2.8. 믹스인 `ChildNode`

4.2.9. 믹스인 `Slottable`

4.2.10. 구식 컬렉션: `NodeList` 및 `HTMLCollection`

4.2.10.1. 인터페이스 `NodeList`

4.2.10.2. 인터페이스 `HTMLCollection`

4.3.1. 인터페이스 `MutationObserver`

4.3.3. 인터페이스 `MutationRecord`

4.4. 인터페이스 `Node`

4.5. 인터페이스 `Document`

4.5.1. 인터페이스 `DOMImplementation`

4.6. 인터페이스 `DocumentType`

4.7. 인터페이스 `DocumentFragment`

4.8. 인터페이스 `ShadowRoot`

4.9. 인터페이스 `Element`

4.9.1. 인터페이스 `NamedNodeMap`

4.9.2. 인터페이스 `Attr`

4.10. 인터페이스 `CharacterData`

4.11. 인터페이스 `Text`

4.12. 인터페이스 `CDATASection`

4.13. 인터페이스 `ProcessingInstruction`

4.14. 인터페이스 `Comment`

5.3. 인터페이스 `AbstractRange`

5.4. 인터페이스 `StaticRange`

5.5. 인터페이스 `Range`

6.1. 인터페이스 `NodeIterator`

6.2. 인터페이스 `TreeWalker`

6.3. 인터페이스 `NodeFilter`

7.1. 인터페이스 `DOMTokenList`

8.1. 인터페이스 `XPathResult`

8.2. 인터페이스 `XPathExpression`

8.3. 믹스인 `XPathEvaluatorBase`

8.4. 인터페이스 `XPathEvaluator`

9.1. 인터페이스 `XSLTProcessor`