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를 반환합니다. true라면 event가 ShadowRoot 노드를 넘어 리스너를 실행하며, 해당 노드가 event의 루트인 경우에만 해당합니다. 아니면 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의 이벤트 리스너 목록이 포함하지 않는 경우, 이벤트 리스너 listener를 추가합니다.
만약 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의 이벤트 리스너 목록이 포함하는 경우, 이벤트 리스너 listener를 이벤트 리스너 제거를 사용하여 제거합니다.

이벤트 리스너 목록은 동일한 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. 이벤트 디스패치

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

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, boolean 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. global을 listener 콜백의 연관된 realm의 전역 객체로 둔다.
7. currentEvent를 undefined로 둔다.
8. global이 Window 객체라면:
  1. currentEvent를 global의 현재 이벤트로 설정한다.
  2. invocationTargetInShadowTree가 false라면, global의 현재 이벤트를 event로 설정한다.
9. listener의 passive가 true라면, event의 수동 리스너 안 플래그를 설정한다.
10. global이 Window 객체라면, event 및 listener가 주어진 이벤트 리스너의 타이밍 정보 기록을 수행한다.
11. listener의 콜백, "handleEvent", « event », 및 event의 currentTarget 속성 값으로 사용자 객체의 연산 호출을 수행한다. 이것이 예외 exception을 던진다면:
  1. listener의 콜백의 대응 JavaScript 객체의 연관된 realm의 전역 객체에 대해 exception을 보고한다.
  2. 주어진 경우 legacyOutputDidListenersThrowFlag를 설정한다.
    
    legacyOutputDidListenersThrowFlag는 Indexed Database API에서만 사용된다. [INDEXEDDB]
12. event의 수동 리스너 안 플래그를 해제한다.
13. global이 Window 객체라면, global의 현재 이벤트를 currentEvent로 설정한다.
14. event의 즉시 전파 중지 플래그가 설정되어 있다면, 중단한다.
found를 반환한다.

2.10. 이벤트 발생

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

eventConstructor가 주어지지 않았다면, eventConstructor를 Event로 한다.
event를 이벤트 생성을 eventConstructor와 target의 관련 realm에서 실행한 결과로 한다.
event의 type 속성을 e로 초기화한다.
이 알고리즘 호출에서 설명된 대로 event의 다른 IDL 속성들도 초기화한다.

이렇게 하면 isTrusted 속성을 false로 설정할 수도 있다.
디스패치를 event와 target에 대해 실행한 결과를 반환한다. legacy target override flag가 설정되어 있다면 함께 사용한다.

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
- 요소: html class="e"
  - 요소: head
    - 요소: title
      - 텍스트: Aliens?
  - 텍스트: ⏎␣
  - 요소: body
    - 텍스트: Why yes.⏎

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

아주 훌륭한 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을 던진다.

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

node, parent, child, 그리고 « »가 주어졌을 때 사전 삽입 유효성을 보장한다.
referenceChild를 child로 둔다.
referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정한다.
referenceChild 앞에서 node를 parent에 삽입한다.
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를 실행하는 연결 관련 작업을 수행할 기회를 제공하는 것이다. 이 단계들은 노드 묶음이 스크립트에 대해 원자적으로 삽입되고, 모든 주요 부수 효과가 노드 트리에 대한 일괄 삽입이 완료된 후 발생하도록 한다. 이를 통해 추가 삽입이 발생하기 전에 보류 중인 모든 노드 트리 삽입이 완전히 완료되도록 한다.

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

null 또는 노드 child 앞에서 노드 node를 노드 parent에 삽입하려면, 선택적 불리언 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. 그렇지 않으면, child의 인덱스 앞에서 node를 parent의 자식들에 삽입한다.
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에 추가하려면: null 앞에서 node를 parent에 사전 삽입한다.

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

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

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를 사용하여 트리에 슬롯 가능 항목 할당을 실행한다.
child가 null이 아니면:
1. 시작 노드가 newParent이고 시작 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 시작 오프셋을 1만큼 증가시킨다.
2. 끝 노드가 newParent이고 끝 오프셋이 child의 인덱스보다 큰 각 라이브 범위에 대해: 그 끝 오프셋을 1만큼 증가시킨다.
child가 null이 아니면 newPreviousSibling을 child의 이전 형제로 두고, 그렇지 않으면 newParent의 마지막 자식으로 둔다.
child가 null이면 node를 newParent의 자식들에 추가한다.
그렇지 않으면, child의 인덱스 앞에서 node를 newParent의 자식들에 삽입한다.
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를 사용하여 트리 변이 레코드를 대기열에 추가한다.

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

node, parent, child, 그리고 « child »가 주어졌을 때 사전 삽입 유효성을 보장한다.
referenceChild를 child의 다음 형제로 둔다.
referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정한다.
previousSibling을 child의 이전 형제로 둔다.
removedNodes를 빈 집합으로 둔다.
node를 parent의 노드 문서로 입양한다.
child의 부모가 null이 아니면:
1. removedNodes를 « child »로 설정한다.
2. suppressObservers를 true로 설정하여 child를 제거한다.
위 조건은 child가 node인 경우에만 false일 수 있다.
node가 DocumentFragment 노드이면 nodes를 node의 자식들로 두고, 그렇지 않으면 « node »로 둔다.
suppressObservers를 true로 설정하고, referenceChild 앞에서 node를 parent에 삽입한다.
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로 설정하고, null 앞에서 node를 parent에 삽입한다.
addedNodes 또는 removedNodes 중 하나가 비어 있지 않으면, parent에 대해 addedNodes, removedNodes, null, null을 사용하여 트리 변이 레코드를 대기열에 추가한다.

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

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

child의 부모가 parent가 아니면, 예외를 발생시켜 "NotFoundError" DOMException을 던진다.
child를 제거한다.
child를 반환한다.

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

선택적 불리언 suppressObservers(기본값 false)를 사용하여 노드 node를 제거하려면:

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", 그리고 « »를 사용하여 사용자 정의 요소 콜백 반응을 대기열에 추가한다.
parent의 각 포괄적 조상 inclusiveAncestor에 대해, 그런 다음 inclusiveAncestor의 등록된 관찰자 목록에 있는 각 registered에 대해, registered의 옵션["subtree"]가 true이면, observer가 registered의 관찰자이고, 옵션이 registered의 옵션이며, 소스가 registered인 새 일시적 등록 관찰자를 node의 등록된 관찰자 목록에 추가한다.
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의 문자열을 동등한 Text 노드로 교체하면서, nodes를 node의 첫 번째 자식 앞에 삽입한다.

노드 트리의 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 발생시킨다.

node . append(nodes)

nodes의 문자열을 동등한 Text 노드로 교체하면서, nodes를 node의 마지막 자식 뒤에 삽입한다.

노드 트리의 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 발생시킨다.

node . replaceChildren(nodes)

nodes의 문자열을 동등한 Text 노드로 교체하면서, node의 모든 자식을 nodes로 교체한다.

노드 트리의 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 발생시킨다.

node . moveBefore(movedNode, child)

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

노드 트리의 제약 조건을 위반하거나 이동된 노드와 연결된 상태를 보존할 수 없으면 "HierarchyRequestError" DOMException을 발생시킨다.

node . querySelector(selectors)

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

node . querySelectorAll(selectors)

selectors와 일치하는 node의 모든 요소 자손을 반환한다.

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를 referenceChild 앞에서 this 내부로 이동한다.

querySelector(selectors) 메서드 단계는 선택자 문자열을 범위 일치시키기를 this에 대해 selectors로 실행한 첫 번째 결과를 반환하는 것이다. 결과가 빈 목록이면 null을 반환한다.

querySelectorAll(selectors) 메서드 단계는 선택자 문자열을 범위 일치시키기를 this에 대해 selectors로 실행한 정적 결과를 반환하는 것이다.

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를 viablePreviousSibling 앞에서 parent에 사전 삽입한다.

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

parent를 this의 부모로 설정한다.
parent가 null이면 반환한다.
viableNextSibling을 this의 뒤에 있으면서 nodes에 포함되지 않은 첫 번째 형제로 설정한다. 그러한 형제가 없으면 null로 설정한다.
node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 설정한다.
node를 viableNextSibling 앞에서 parent에 사전 삽입한다.

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

parent를 this의 부모로 설정한다.
parent가 null이면 반환한다.
viableNextSibling을 this의 뒤에 있으면서 nodes에 포함되지 않은 첫 번째 형제로 설정한다. 그러한 형제가 없으면 null로 설정한다.
node를 nodes와 this의 노드 문서가 주어졌을 때 노드를 하나의 노드로 변환한 결과로 설정한다.
this의 부모가 parent이면, parent 내에서 this를 node로 교체한다.

This가 node에 삽입되었을 수도 있다.
그렇지 않으면 node를 viableNextSibling 앞에서 parent에 사전 삽입한다.

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부터 컬렉션이 나타내는 노드 수보다 1 작은 값까지의 범위에 있는 숫자이다. 그러한 요소가 없으면 지원되는 속성 인덱스도 없다.

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 객체)도 가지고 있으며, 초기값은 빈 집합입니다.

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

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

변이 관찰자에게 알림을 수행하려면:

주변 에이전트의 변이 관찰자 마이크로태스크 큐에 추가됨을 false로 설정한다.
notifySet을 복제한 주변 에이전트의 대기 중인 변이 관찰자 목록을 사용해 만든다.
비운다 주변 에이전트의 대기 중인 변이 관찰자를.
signalSet을 복제한 주변 에이전트의 시그널 슬롯 목록을 사용해 만든다.
비운다 주변 에이전트의 시그널 슬롯을.
각 mo를 notifySet에서 반복:
1. records를 복제한 mo의 레코드 큐로 만든다.
2. 비운다 mo의 레코드 큐를.
3. 각 node를 mo의 노드 목록에서 반복: 다음 조건의 임시 등록 관찰자 중 관찰자가 mo인 것을 node의 등록 관찰자 목록에서 모두 제거한다.
4. records가 비어 있지 않으면, 호출한다. mo의 콜백에 « records, mo », "report"를 전달하고, 콜백 this 값으로 mo를 사용한다.
각 slot을 signalSet에서 반복: 이벤트를 발생시킨다. 이름은 slotchange이고, bubbles 속성은 true로, slot에서 발생한다.

각 노드에는 등록된 관찰자 목록(0개 이상의 등록된 관찰자로 이루어진 목록)이 있으며, 처음에는 비어 있다.

등록된 관찰자는 관찰자(MutationObserver 객체)와 옵션(MutationObserverInit 딕셔너리)으로 구성된다.

일시적으로 등록된 관찰자는 소스(등록된 관찰자)도 함께 포함하는 등록된 관찰자이다.

일시적으로 등록된 관찰자는 주어진 노드가 제거된 후에도 그 자손 내부의 변형을 추적하는 데 사용되며, 이를 통해 노드의 부모에서 subtree가 true로 설정된 경우에도 이러한 변형이 누락되지 않도록 한다.

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: attributes가 true이거나 생략되었으며 변형 전 target의 속성 값을 기록해야 하는 경우 true로 설정한다.
characterDataOldValue: characterData가 true로 설정되었거나 생략되었으며 변형 전 target의 데이터를 기록해야 하는 경우 true로 설정한다.
attributeFilter: 모든 속성 변형을 관찰할 필요가 없고 attributes가 true이거나 생략된 경우, 속성 로컬 이름(네임스페이스 제외)의 목록으로 설정한다.

observer . disconnect()

observer가 모든 변형을 관찰하는 것을 중지한다. observe() 메서드를 다시 사용할 때까지 observer의 콜백은 호출되지 않는다.

observer . takeRecords()

레코드 큐를 비우고 그 안에 있던 항목을 반환한다.

new MutationObserver(callback) 생성자 단계는 this의 콜백을 callback으로 설정하는 것이다.

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를 던진다.
target의 등록된 관찰자 목록에 있는 각 registered에 대해: registered의 관찰자가 this이면:
1. this의 노드 목록에 있는 각 node에 대해: node의 등록된 관찰자 목록에서 소스가 registered인 모든 일시적 등록 관찰자를 제거한다.
2. registered의 옵션을 options로 설정한다.
그렇지 않으면:
1. 관찰자가 this이고 옵션이 options인 새 등록된 관찰자를 target의 등록된 관찰자 목록에 추가한다.
2. target에 대한 약한 참조를 this의 노드 목록에 추가한다.

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

this의 노드 목록에 있는 각 node에 대해: this가 관찰자인 모든 등록된 관찰자를 node의 등록된 관찰자 목록에서 제거한다.
this의 레코드 큐를 비운다.

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

records를 this의 레코드 큐의 복제본으로 둔다.
this의 레코드 큐를 비운다.
records를 반환한다.

4.3.2. 변이 레코드 큐잉

변이 레코드를 큐에 추가하다를 type에 대해, target과 name, namespace, oldValue, addedNodes, removedNodes, previousSibling, nextSibling을 가지고 수행하려면:

interestedObservers를 빈 맵으로 둔다.
nodes를 target의 inclusive ancestors로 둔다.
nodes의 각 node에 대해, 그런 다음 node의 등록된 observer 목록의 각 registered에 대해 반복한다:
1. options를 registered의 options로 둔다.
2. 다음 중 true인 것이 하나도 없으면
  - 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의 observer로 둔다.
  2. interestedObservers[mo]가 존재하지 않으면, interestedObservers[mo]를 null로 설정한다.
  3. type이 "attributes"이고 options["attributeOldValue"]가 true이거나, type이 "characterData"이고 options["characterDataOldValue"]가 true이면, interestedObservers[mo]를 oldValue로 설정한다.
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의 record queue에 큐에 넣는다.
3. observer를 surrounding agent의 대기 중인 mutation observer에 추가한다.
mutation observer microtask를 큐에 넣는다.

트리 구조 변이 레코드를 큐에 추가하다를 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가 주어졌을 때, 노드가 할당되어 있으면 노드의 할당된 슬롯을 반환하고, 그렇지 않으면 노드의 부모를 반환한다.

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

문서 document가 주어졌을 때, 인터페이스 interface를 구현하는 노드를 생성하려면:

Assert: interface는 Document도 아니고, Document를 상속하는 인터페이스도 아니다. 문서를 생성하려면 대신 문서 생성을 사용한다.
document의 관련 렐름에서 interface를 구현하며, 노드 문서가 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 getter 단계는 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 getter 단계는 this가 구현하는 인터페이스에 따라 분기하여 처음으로 일치하는 명령문을 반환하는 것이다:

Element: 해당 HTML 대문자화된 정규화된 이름.
Attr: 해당 정규화된 이름.
배타적 Text 노드: "#text".
CDATASection: "#cdata-section".
ProcessingInstruction: 해당 대상.
Comment: "#comment".
Document: "#document".
DocumentType: 해당 이름.
DocumentFragment: "#document-fragment".

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

baseURI getter 단계는 this의 노드 문서의 문서 기준 URL을 직렬화하여 반환하는 것이다.

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. length에 currentNode의 길이를 더한다.
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)이 주어졌을 때 노드를 복제하려면:

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

copy의 이름, 공개 ID, 시스템 ID를 node의 해당 값으로 설정한다.

Attr

copy의 네임스페이스, 네임스페이스 접두사, 로컬 이름, 값을 node의 해당 값으로 설정한다.

Text
Comment

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

ProcessingInstruction

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

그렇지 않은 경우

아무 작업도 하지 않는다.
Assert: 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_PRECEDING에 DOCUMENT_POSITION_CONTAINS를 더한 결과를 반환한다.
node1이 node2의 자손이고 attr2가 null이거나, node1이 node2이고 attr1이 null이 아니면, DOCUMENT_POSITION_FOLLOWING에 DOCUMENT_POSITION_CONTAINED_BY를 더한 결과를 반환한다.
node1이 node2보다 앞에 있으면 DOCUMENT_POSITION_PRECEDING을 반환한다.

이 알고리즘에서 속성을 처리하는 방식으로 인해, 속성은 동일한 트리에 참여하지 않지만, 노드의 속성은 해당 노드의 자식보다 앞에 있는 것으로 간주된다.
DOCUMENT_POSITION_FOLLOWING을 반환한다.

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

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

namespace를 사용하여 this의 네임스페이스 접두사를 찾은 결과를 반환한다.

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

null을 반환한다.

Attr
1. this의 요소가 null이면 null을 반환한다.
2. namespace를 사용하여 this의 요소에 대한 네임스페이스 접두사를 찾은 결과를 반환한다.
그렇지 않은 경우
1. this의 부모 요소가 null이면 null을 반환한다.
2. namespace를 사용하여 this의 부모 요소에 대한 네임스페이스 접두사를 찾은 결과를 반환한다.

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

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

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

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

insertBefore(node, child) 메서드 단계는 node를 child 앞에서 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 네임스페이스이고, 정규화된 이름이 ASCII 소문자로 변환된 qualifiedName인 요소.
- 네임스페이스가 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의 동작이 달라진다.

문서의 모드가 "no-quirks"이면 비쿼크 모드, 모드가 "quirks"이면 쿼크 모드, 모드가 "limited-quirks"이면 제한적 쿼크 모드라고 한다.

모드가 기본값에서 변경되는 경우는 DOCTYPE 문자열의 존재 여부나 값에 따라 HTML 파서가 생성한 문서와, 새로운 브라우징 컨텍스트(초기 "about:blank")뿐이다. [HTML]

비쿼크 모드는 원래 "표준 모드"로 알려져 있었고, 제한적 쿼크 모드는 한때 "거의 표준 모드"로 알려져 있었다. 현재는 세부 사항이 표준으로 정의되므로 이름이 변경되었다. (또한 Ian Hickson이 원래 이름은 무의미하다는 이유로 거부권을 행사했기 때문이다.)

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

렐름 realm이 주어졌을 때, 인터페이스 interface를 구현하는 문서를 생성하려면:

Assert: interface는 Document 또는 Document를 상속하는 인터페이스이다.
realm에서 interface를 구현하는 새로운 노드를 반환한다.

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

문서 유형을 반환하며, 없으면 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을 반환한다.

그렇지 않으면 네임스페이스가 namespace이고 로컬 이름이 localName인 모든 자손 요소로 이루어진 HTMLCollection을 반환한다.

collection = document . getElementsByClassName(classNames)

collection = element . getElementsByClassName(classNames)

메서드가 호출된 객체(문서 또는 요소)에서 classNames에 지정된 모든 클래스를 가진 요소로 이루어진 HTMLCollection을 반환한다. classNames 인수는 공백으로 구분된 클래스 목록으로 해석된다.

doctype getter 단계는 this의 자식 중 문서 유형인 것을 반환하고, 그렇지 않으면 null을 반환하는 것이다.

documentElement getter 단계는 this의 문서 요소를 반환하는 것이다.

getElementsByTagName(qualifiedName) 메서드 단계는 this에 대한 정규화된 이름이 qualifiedName인 요소 목록을 반환하는 것이다.

따라서 HTML 문서에서 document.getElementsByTagName("FOO")는 HTML 네임스페이스에 속하지 않는 <FOO> 요소와 HTML 네임스페이스에 속하는 <foo> 요소에는 일치하지만, HTML 네임스페이스에 속하는 <FOO> 요소에는 일치하지 않는다.

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

getElementsByClassName(classNames) 메서드 단계는 this에 대한 클래스 이름이 classNames인 요소 목록을 반환하는 것이다.

다음 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")를 호출하면 두 문단 p1과 p2를 포함하는 HTMLCollection이 반환된다.

getElementsByClassName("ccc bbb")를 호출하면 하나의 노드, 즉 p3만 반환된다. document.getElementById("example").getElementsByClassName("bbb ccc ")를 호출해도 같은 결과가 반환된다.

getElementsByClassName("aaa,bbb")를 호출하면 노드가 반환되지 않는다. 위 요소 중 어느 것도 aaa,bbb 클래스에 속하지 않는다.

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

localName을 로컬 이름으로 가진 요소를 반환한다. document가 HTML 문서이면 localName은 소문자로 변환된다. document가 HTML 문서이거나 document의 콘텐츠 유형이 "application/xhtml+xml"이면 요소의 네임스페이스는 HTML 네임스페이스이고, 그렇지 않으면 null이다.

options가 제공된 경우 해당 customElementRegistry를 사용하여 CustomElementRegistry를 설정할 수 있다.

options가 제공된 경우 해당 is를 사용하여 사용자 정의 내장 요소를 생성할 수 있다.

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

options의 customElementRegistry와 options의 is가 모두 제공되면 "NotSupportedError" DOMException이 발생한다.

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

네임스페이스가 namespace인 요소를 반환한다. 해당 네임스페이스 접두사는 qualifiedName에서 U+003A (:) 앞의 모든 문자이거나 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)

데이터가 data인 Text 노드를 반환한다.

text = document . createCDATASection(data)

데이터가 data인 CDATASection 노드를 반환한다.

comment = document . createComment(data)

데이터가 data인 Comment 노드를 반환한다.

processingInstruction = document . createProcessingInstruction(target, data)

대상이 target이고 데이터가 data인 ProcessingInstruction 노드를 반환한다. target이 Name 생성 규칙과 일치하지 않으면 "InvalidCharacterError" DOMException이 발생한다. data에 "?>"가 포함되어 있으면 "InvalidCharacterError" DOMException이 발생한다.

모든 name과 namespace에 대한 요소 인터페이스는 달리 명시되지 않는 한 Element이다.

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

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

localName이 유효한 요소 로컬 이름이 아니면 "InvalidCharacterError" DOMException을 발생시킨다.
this가 HTML 문서이면 localName을 ASCII 소문자로 변환한 값으로 설정한다.
registry와 is를 options와 this가 주어졌을 때 요소 생성 옵션을 평탄화한 결과로 설정한다.
this가 HTML 문서이거나 this의 콘텐츠 유형이 "application/xhtml+xml"이면 namespace를 HTML 네임스페이스로 설정하고, 그렇지 않으면 null로 설정한다.
this, localName, namespace, null, is, true, registry가 주어졌을 때 요소를 생성한 결과를 반환한다.

document, namespace, qualifiedName, options가 주어졌을 때 내부 createElementNS 단계는 다음과 같다:

(namespace, prefix, localName)을 "element"가 주어졌을 때 namespace와 qualifiedName을 유효성 검사 및 추출한 결과로 설정한다.
registry와 is를 options와 this가 주어졌을 때 요소 생성 옵션을 평탄화한 결과로 설정한다.
document, localName, namespace, prefix, is, true, registry가 주어졌을 때 요소를 생성한 결과를 반환한다.

createElementNS(namespace, qualifiedName, options) 메서드 단계는 this, namespace, qualifiedName, options가 주어졌을 때 내부 createElementNS 단계를 실행한 결과를 반환하는 것이다.

문자열 또는 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을 발생시킨다.
node를 this가 주어졌을 때 CDATASection을 구현하는 노드를 생성한 결과로 설정한다.
node의 데이터를 data로 설정한다.
node를 반환한다.

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가 아니면, node의 섀도를 포함하는 포함 자손의 각 inclusiveDescendant에 대해 섀도 포함 트리 순서로:
1. inclusiveDescendant의 노드 문서를 document로 설정한다.
2. inclusiveDescendant가 섀도 루트이고 다음 중 하나가 참이면:
  - inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이고 inclusiveDescendant의 사용자 정의 요소 레지스트리를 null로 유지가 false인 경우, 또는
  - inclusiveDescendant의 사용자 정의 요소 레지스트리가 전역 사용자 정의 요소 레지스트리인 경우,
  inclusiveDescendant의 사용자 정의 요소 레지스트리를 document의 사용자 정의 요소 레지스트리의 유효 전역 사용자 정의 요소 레지스트리로 설정한다.
3. 그렇지 않고 inclusiveDescendant가 요소이면:
  1. inclusiveDescendant의 속성 목록에 있는 각 속성의 노드 문서를 document로 설정한다.
  2. inclusiveDescendant의 사용자 정의 요소 레지스트리가 null이거나, 해당 사용자 정의 요소 레지스트리의 범위 지정됨이 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가 null이 아니고 registry의 범위 지정됨이 false이면 registry는 전역 사용자 정의 요소 레지스트리이다.

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

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

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

localName이 유효한 속성 로컬 이름이 아니면 "InvalidCharacterError" DOMException을 발생시킨다.
this가 HTML 문서이면 localName을 ASCII 소문자로 변환한 값으로 설정한다.
this와 localName이 주어졌을 때 속성을 생성한 결과를 반환한다.

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

(namespace, prefix, localName)을 "attribute"가 주어졌을 때 namespace와 qualifiedName을 유효성 검사 및 추출한 결과로 설정한다.
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를 반환한다.

대신 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(); // historical; always returns true
};

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

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

name이 유효한 문서 유형 이름이 아니면 "InvalidCharacterError" DOMException을 발생시킨다.
this와 연결된 문서, name, publicId, systemId가 주어졌을 때 문서 유형을 생성한 결과를 반환한다.

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

document를 this의 관련 렐름이 주어졌을 때 XMLDocument를 구현하는 문서를 생성한 결과로 설정한다.
element를 null로 설정한다.
qualifiedName이 빈 문자열이 아니면 element를 document, namespace, qualifiedName, 빈 딕셔너리가 주어졌을 때 내부 createElementNS 단계를 실행한 결과로 설정한다.
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를 this의 관련 렐름이 주어졌을 때 Document를 구현하는 문서를 생성한 결과로 설정한다.
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이 주어졌을 때 텍스트 노드를 생성한 결과로 설정한다. 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를 document가 주어졌을 때 DocumentType을 구현하는 노드를 생성한 결과로 설정한다.
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 노드는 ShadowRoot 노드가 아닌 DocumentFragment 노드이다.

DocumentFragment 노드에는 연결된 호스트(null 또는 다른 노드 트리에 있는 요소)가 있다. 달리 명시되지 않는 한 null이다.

객체 A가 객체 B의 호스트 포함 포괄 조상이라는 것은, A가 B의 포괄 조상이거나, 또는 B의 루트에 null이 아닌 호스트가 있고 A가 B의 루트의 호스트의 호스트 포함 포괄 조상이라는 뜻이다.

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

문서 document가 주어졌을 때 문서 조각을 생성하려면: document가 주어졌을 때 DocumentFragment를 구현하는 노드를 생성한 결과를 반환한다.

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

4.8. 인터페이스 `ShadowRoot`

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

  attribute EventHandler onslotchange;
};

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

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

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

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

섀도 루트에는 연결된 포커스 위임 (불리언)이 있다. 처음에는 false로 설정된다.

섀도 루트에는 연결된 요소 내부에서 사용 가능(불리언)이 있다. 처음에는 false로 설정된다.

섀도 루트에는 연결된 선언적 (불리언)이 있다. 처음에는 false로 설정된다.

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

섀도 루트에는 연결된 복제 가능(불리언)이 있다. 처음에는 false로 설정된다.

섀도 루트에는 연결된 직렬화 가능(불리언)이 있다. 처음에는 false로 설정된다.

섀도 루트에는 연결된 사용자 정의 요소 레지스트리 (null 또는 CustomElementRegistry 객체)가 있다. 처음에는 null이다.

섀도 루트에는 연결된 사용자 정의 요소 레지스트리를 null로 유지 (불리언)가 있다. 처음에는 false이다.

이는 선언적 섀도 루트와 함께 사용하는 경우에만 true일 수 있다. 또한 섀도 루트의 사용자 정의 요소 레지스트리가 null인 동안에만 의미가 있다.

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

mode getter 단계는 this의 모드를 반환하는 것이다.

delegatesFocus getter 단계는 this의 포커스 위임을 반환하는 것이다.

slotAssignment getter 단계는 this의 슬롯 할당을 반환하는 것이다.

clonable getter 단계는 this의 복제 가능을 반환하는 것이다.

serializable 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에서 닫힌 섀도에 의해 숨겨진다.

객체 A를 객체 B에 대해 대상 재지정하려면, 객체를 반환할 때까지 다음 단계를 반복한다:

다음 중 하나가 참이면
- 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;
  SlotAssignmentMode slotAssignment = "named";
  boolean clonable = false;
  boolean serializable = false;
  CustomElementRegistry? customElementRegistry;
};

ShadowRootInit은 다소 이례적으로 customElementRegistry 멤버에 undefined와 null을 모두 전달할 수 있도록 하여 웹 개발자가 attachShadow()에 딕셔너리 대신 ShadowRoot 노드를 전달할 수 있게 한다.

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() intentionally omitted for this example
    }
  })
</script>

<!-- "undefined" (not defined, not custom) -->
<sw-han></sw-han>
<p is="sw-luke"></p>
<p is="asdf"></p>

<!-- "failed" (not defined, not custom) -->
<sw-kylo></sw-kylo>

<!-- "uncustomized" (defined, not custom) -->
<p></p>
<asdf></asdf>

<!-- "custom" (defined, 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. Assert: 다음 중 하나가 참이다:
      - result의 사용자 정의 요소 상태가 "custom"이고 해당 사용자 정의 요소 정의가 null이 아니다.
      - result의 사용자 정의 요소 상태가 "precustomized"이다. 또는
      - result의 사용자 정의 요소 상태가 "custom"도 "precustomized"도 아니고, 해당 사용자 정의 요소 정의가 null이다.
      customElements.define("x-example", class extends HTMLElement { constructor() { // Non-conformant: returns an existing element instead of calling super(). return document.createElement("p"); } }); document.createElement("x-example");
      
      여기서 result는 p 요소이며, 해당 사용자 정의 요소 상태는 "uncustomized"이고 해당 사용자 정의 요소 정의는 null이다.
    3. Assert: 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로 설정한다.
Assert: element의 속성 목록은 비어 있다.
element를 반환한다.

요소에는 또한 속성 목록이 있으며, 이는 NamedNodeMap을 통해 노출되는 목록이다. 요소가 생성될 때 명시적으로 주어지지 않는 한 해당 속성 목록은 비어 있다.

요소의 속성 목록이 속성 A를 포함하면 해당 요소는 A를 갖는다.

이 명세와 다른 명세는 요소에 대한 속성 변경 단계를 정의할 수 있다. 이 알고리즘에는 element, localName, oldValue, value, namespace가 전달된다.

element, oldValue, newValue가 주어진 속성 attribute의 속성 변경을 처리하려면 다음 단계를 실행한다:

attribute의 로컬 이름, attribute의 네임스페이스, oldValue, « », « », null, null을 사용하여 element에 대한 "attributes" 변형 레코드를 큐에 추가한다.
element가 사용자 정의이면 element, 콜백 이름 "attributeChangedCallback", 그리고 « attribute의 로컬 이름, oldValue, newValue, attribute의 네임스페이스 »를 사용하여 사용자 정의 요소 콜백 반응을 큐에 추가한다.
element, attribute의 로컬 이름, oldValue, newValue, attribute의 네임스페이스를 사용하여 속성 변경 단계를 실행한다.

속성 attribute을 value로 변경하려면:

oldValue를 attribute의 값으로 설정한다.
attribute의 값을 value로 설정한다.
attribute의 요소, oldValue, value를 사용하여 attribute의 속성 변경을 처리한다.

속성 attribute을 요소 element에 추가하려면:

attribute을 element의 속성 목록에 추가한다.
attribute의 요소를 element로 설정한다.
attribute의 노드 문서를 element의 노드 문서로 설정한다.
element, null, attribute의 값을 사용하여 attribute의 속성 변경을 처리한다.

속성 attribute을 제거하려면:

element를 attribute의 요소로 설정한다.
attribute을 element의 속성 목록에서 제거한다.
attribute의 요소를 null로 설정한다.
element, attribute의 값, null을 사용하여 attribute의 속성 변경을 처리한다.

속성 oldAttribute을 속성 newAttribute로 교체하려면:

element를 oldAttribute의 요소로 설정한다.
element의 속성 목록에서 oldAttribute을 newAttribute로 교체한다.
newAttribute의 요소를 element로 설정한다.
newAttribute의 노드 문서를 element의 노드 문서로 설정한다.
oldAttribute의 요소를 null로 설정한다.
element, oldAttribute의 값, newAttribute의 값을 사용하여 oldAttribute의 속성 변경을 처리한다.

문자열 qualifiedName과 요소 element가 주어졌을 때 이름으로 속성을 가져오려면:

element가 HTML 네임스페이스에 있고 해당 노드 문서가 HTML 문서이면, 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: DOMTokenList 객체를 통해 element의 class 콘텐츠 속성을 공백으로 구분된 토큰 집합으로 조작할 수 있다.
element . slot [ = value ]: element의 slot 콘텐츠 속성 값을 반환한다. 값을 변경하도록 설정할 수 있다.

문자열 name을 반영하도록 정의된 IDL 속성에는 다음 getter 및 setter 단계가 있어야 한다:

getter 단계: this와 name이 주어졌을 때 속성 값을 가져오기를 실행한 결과를 반환한다.
setter 단계: name과 주어진 값을 사용하여 this의 속성 값을 설정한다.

id 속성은 "id"를 반영해야 한다.

className 속성은 "class"를 반영해야 한다.

classList getter 단계는 연결된 요소가 this이고, 연결된 속성의 로컬 이름이 class인 DOMTokenList 객체를 반환하는 것이다. 이 특정 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)

element에 속성 중 정규화된 이름이 qualifiedName인 속성이 있으면 true를 반환하고, 그렇지 않으면 false를 반환한다.

element . hasAttributeNS(namespace, localName)

element에 속성 중 네임스페이스가 namespace이고 로컬 이름이 localName인 속성이 있으면 true를 반환한다.

hasAttributes() 메서드 단계는 this의 속성 목록이 비어 있으면 false를 반환하고, 그렇지 않으면 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을 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)을 "attribute"가 주어졌을 때 namespace와 qualifiedName을 유효성 검사 및 추출한 결과로 설정한다.
verifiedValue를 localName, namespace, this, value를 사용하여 신뢰할 수 있는 유형 호환 속성 값을 가져오기를 호출한 결과로 설정한다. [TRUSTED-TYPES]
localName, verifiedValue, prefix, namespace를 사용하여 this의 속성 값을 설정한다.

removeAttribute(qualifiedName) 메서드 단계는 qualifiedName과 this가 주어졌을 때 속성을 제거한 다음 undefined를 반환하는 것이다.

removeAttributeNS(namespace, localName) 메서드 단계는 namespace, localName, this가 주어졌을 때 속성을 제거한 다음 undefined를 반환하는 것이다.

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

this가 HTML 네임스페이스에 있고 해당 노드 문서가 HTML 문서이면, qualifiedName을 ASCII 소문자로 변환한 값으로 설정한다.
this가 속성 중 정규화된 이름이 qualifiedName인 속성을 가지면 true를 반환하고, 그렇지 않으면 false를 반환한다.

toggleAttribute(qualifiedName, force) 메서드 단계는 다음과 같다:

qualifiedName이 유효한 속성 로컬 이름이 아니면 "InvalidCharacterError" DOMException을 발생시킨다.

정규화된 이름 대신 로컬 이름으로 유효성 검사하는 이유는 위의 설명을 참조한다.
this가 HTML 네임스페이스에 있고 해당 노드 문서가 HTML 문서이면, 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로 설정한다.
this가 속성 중 네임스페이스가 namespace이고 로컬 이름이 localName인 속성을 가지면 true를 반환하고, 그렇지 않으면 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["clonable"], init["serializable"], init["delegatesFocus"], init["slotAssignment"], registry를 사용하여 섀도 루트를 연결한다.
this의 섀도 루트를 반환한다.

요소 element, 문자열 mode, 불리언 clonable, 불리언 serializable, 불리언 delegatesFocus, 문자열 slotAssignment, 그리고 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의 선언적이 거짓이거나,
  - currentShadowRoot의 모드가 mode가 아닌 경우,
  "NotSupportedError" DOMException을 예외로 발생시킨다.
3. currentShadowRoot의 모든 자식을 트리 순서대로 제거한다.
4. currentShadowRoot의 선언적을 거짓으로 설정한다.
5. 반환한다.
shadow를 element의 노드 문서가 주어졌을 때 ShadowRoot를 구현하는 노드를 생성한 결과로 설정한다.
shadow의 호스트를 element로 설정한다.
shadow의 모드를 mode로 설정한다.
shadow의 포커스 위임을 delegatesFocus로 설정한다.
element의 사용자 정의 요소 상태가 "precustomized" 또는 "custom"이면 shadow의 요소 내부에서 사용 가능을 true로 설정한다.
shadow의 슬롯 할당을 slotAssignment로 설정한다.
shadow의 선언적을 false로 설정한다.
shadow의 복제 가능을 clonable로 설정한다.
shadow의 직렬화 가능을 serializable로 설정한다.
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): selectors와 일치하는 첫 번째 포괄 조상을 element부터 시작하여 반환하고, 없으면 null을 반환한다.
element . matches(selectors): element의 루트에 대해 selectors를 일치시킨 결과가 element이면 true를 반환하고, 그렇지 않으면 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) 메서드 단계는 this에 대한 정규화된 이름이 qualifiedName인 요소 목록을 반환하는 것이다.

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

getElementsByClassName(classNames) 메서드 단계는 this에 대한 클래스 이름이 classNames인 요소 목록을 반환하는 것이다.

요소 element, 문자열 where, 노드 node가 주어졌을 때 인접 삽입하려면, where와 처음으로 ASCII 대소문자 비구분 방식으로 일치하는 항목에 연결된 단계를 실행한다:

"beforebegin"

element의 부모가 null이면 null을 반환한다.

node를 element 앞에서 element의 부모에 사전 삽입한 결과를 반환한다.

"afterbegin"

node를 element의 첫 번째 자식 앞에서 element에 사전 삽입한 결과를 반환한다.

"beforeend"

node를 null 앞에서 element에 사전 삽입한 결과를 반환한다.

"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 문서이면 names의 각 name에 대해 반복한다:
1. lowercaseName을 name의 ASCII 소문자 형태로 설정한다.
2. lowercaseName이 name과 같지 않으면 names에서 name을 제거한다.
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을 document가 주어졌을 때 Attr을 구현하는 노드를 생성한 결과로 설정한다.
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으로 설정한다.
null, null, node의 데이터, « », « », null, null을 사용하여 node에 대한 "characterData" 변형 레코드를 큐에 추가한다.
offset개의 코드 단위 뒤에 data를 node의 데이터에 삽입한다.
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 노드는 CDATASection 노드가 아닌 Text 노드이다.

노드 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를 document가 주어졌을 때 Text를 구현하는 노드를 생성한 결과로 설정한다.
text의 데이터를 data로 설정한다.
text를 반환한다.

new Text(data) 생성자 단계는 this의 데이터를 data로 설정하고, this의 노드 문서를 현재 전역 객체의 연결된 Document로 설정하는 것이다.

정수 offset을 사용하여 Text 노드 node를 분할하려면:

length를 node의 길이로 설정한다.
offset이 length보다 크면 "IndexSizeError" DOMException을 발생시킨다.
count를 length − offset으로 설정한다.
newData를 node의 데이터를 offset과 count를 사용하여 부분 문자열로 가져온 결과로 설정한다.
newNode를 node의 노드 문서와 newData가 주어졌을 때 텍스트 노드를 생성한 결과로 설정한다.
parent를 node의 부모로 설정한다.
parent가 null이 아니면:
1. newNode를 node의 다음 형제 앞에서 parent에 삽입한다.
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) 메서드 단계는 오프셋 offset을 사용하여 this를 분할하는 것이다.

wholeText getter 단계는 this의 연속된 Text 노드의 데이터를 트리 순서로 연결한 결과를 반환하는 것이다.

4.12. 인터페이스 `CDATASection`

[Exposed=Window]
interface CDATASection : Text {
};

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 = ""])

대상이 target이고 데이터가 data인 새로운 ProcessingInstruction 노드를 반환한다.

pi . target

대상을 반환한다.

pi . hasAttributes()

pi에 속성이 있으면 true를 반환하고, 그렇지 않으면 false를 반환한다.

pi . getAttributeNames()

pi의 모든 속성 이름을 반환한다. 중복을 포함할 수 없다.

pi . getAttribute(name)

이름이 name인 pi의 속성 값을 반환하고, 그러한 속성이 없으면 null을 반환한다.

pi . setAttribute(name, value)

이름이 name인 pi의 속성을 value로 설정한다.

pi . removeAttribute(name)

이름이 name인 pi의 속성을 제거한다.

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를 document가 주어졌을 때 ProcessingInstruction을 구현하는 노드를 생성한 결과로 설정한다.
target과 data를 사용하여 pi를 초기화한다.
pi를 반환한다.

target과 data를 사용하여 ProcessingInstruction 노드 pi를 초기화하려면:

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+003D (>)을 ">"로 교체한다.
8. value의 모든 U+0022 (")를 """로 교체한다.
9. value를 data에 추가한다.
10. U+0022 (")를 data에 추가한다.
pi의 데이터를 교체하되 0, pi의 길이, data, 그리고 true를 사용한다.

ProcessingInstruction 노드 pi와 문자열 name이 주어졌을 때 처리 명령 속성을 가져오려면: pi의 속성 맵[name]을 null을 기본값으로 하여 반환한다.

new ProcessingInstruction(target, data) 생성자 단계는 다음과 같다:

this의 노드 문서를 현재 전역 객체의 연결된 Document로 설정한다.
target과 data를 사용하여 this를 초기화한다.

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 = ""]): 데이터가 data인 새로운 Comment 노드를 반환한다.

문서 document와 문자열 data가 주어졌을 때 주석 노드를 생성하려면:

comment를 document가 주어졌을 때 Comment를 구현하는 노드를 생성한 결과로 설정한다.
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는 node의 루트가 range의 루트이고, (node, 0)이 range의 시작 뒤에 있으며, (node, node의 길이)가 range의 끝 앞에 있으면 라이브 범위 range에 포함된다.

노드가 라이브 범위의 시작 노드의 포괄 조상이지만 해당 끝 노드의 포괄 조상은 아니거나, 그 반대이면 라이브 범위에 부분적으로 포함된다.

이러한 정의를 더 잘 이해하기 위한 몇 가지 사실은 다음과 같다:

라이브 범위 내부에 있다고 생각할 수 있는 콘텐츠는 모든 포함된 노드와, 시작 노드 및 끝 노드가 CharacterData 노드인 경우 그 콘텐츠의 일부로 구성된다.
라이브 범위에 포함된 노드는 일반적으로 연속적이지 않다. 이는 포함된 노드의 부모가 항상 포함되는 것은 아니기 때문이다.
그러나 포함된 노드의 자손은 포함되며, 두 형제가 포함되면 그 둘 사이에 있는 모든 형제도 포함된다.
라이브 범위의 시작 노드와 끝 노드는 해당 범위에 절대 포함되지 않는다.
첫 번째 포함된 노드는(있는 경우) 항상 시작 노드 뒤에 있으며, 마지막 포함된 노드는 항상 끝 노드의 마지막 자손과 같거나 그 앞에 있다.
시작 노드와 끝 노드가 서로 다른 경우에만 부분적으로 포함된 노드가 존재한다.
commonAncestorContainer 속성 값은 포함되지도 않고 부분적으로 포함되지도 않는다.
시작 노드가 끝 노드의 조상이면, 공통 포괄 조상은 시작 노드가 된다. 정확히 하나의 자식만 부분적으로 포함되며, 자식이 부분적으로 포함된 자식보다 앞에 있는 경우에만 포함된다. 끝 노드가 시작 노드의 조상이면 그 반대가 성립한다.
시작 노드가 끝 노드의 포괄 조상이 아니고 그 반대도 아니면, 공통 포괄 조상은 둘 모두와 다르다. 정확히 두 개의 자식이 부분적으로 포함되며, 자식은 그 두 자식 사이에 있는 경우에만 포함된다.

노드 node가 주어졌을 때 라이브 범위 사전 제거 단계는 다음과 같다:

parent를 node의 부모로 설정한다.
Assert: 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가 doctype이면 "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이면 끝을 시작으로 설정하고, 그렇지 않으면 시작을 끝으로 설정하는 것이다.

범위 range 안에서 노드 node를 선택하려면:

parent를 node의 부모로 설정한다.
parent가 null이면 "InvalidNodeTypeError" DOMException을 발생시킨다.
index를 node의 인덱스로 설정한다.
range의 시작을 경계점 (parent, index)으로 설정한다.
range의 끝을 경계점 (parent, index + 1)으로 설정한다.

selectNode(node) 메서드 단계는 this 안에서 node를 선택하는 것이다.

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

node가 doctype이면 "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의 끝으로 설정한다.
sourcePoint에 대한 thisPoint의 위치에 따라 분기한다:

앞
−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, 그리고 빈 문자열을 사용한다.
nodesToRemove의 각 node에 대해 트리 순서로: 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를 range에 부분적으로 포함된 commonAncestor의 첫 번째 자식으로 설정한다.
lastPartiallyContainedChild를 null로 설정한다.
originalEndNode가 originalStartNode의 포괄 조상이 아니면, lastPartiallyContainedChild를 range에 부분적으로 포함된 commonAncestor의 마지막 자식으로 설정한다.

이러한 변수 할당은 실제로 항상 의미가 있다. 예를 들어 originalStartNode가 originalEndNode의 포괄 조상이 아니면, originalStartNode 자체가 range에 부분적으로 포함되며, commonAncestor의 자식에 이르기까지 모든 조상도 그러하다. commonAncestor는 originalEndNode의 포괄 조상이어야 하므로 originalStartNode일 수 없다. 다른 경우도 유사하다. 또한 두 자식이 모두 정의된 경우 서로 같을 수 없다는 점에 유의한다.
containedChildren을 range에 포함된 commonAncestor의 모든 자식의 목록으로 설정하되, 트리 순서로 나열한다.
containedChildren의 구성원 중 하나라도 doctype이면 "HierarchyRequestError" DOMException을 발생시킨다.

첫 번째 또는 마지막 부분적으로 포함된 노드는 걱정할 필요가 없다. doctype은 절대 부분적으로 포함될 수 없기 때문이다. 이는 범위의 경계점이 될 수 없으며 어떤 것의 조상도 될 수 없다.
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에 추가한다.
containedChildren의 각 contained child에 대해: 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를 range에 부분적으로 포함된 commonAncestor의 첫 번째 자식으로 설정한다.
lastPartiallyContainedChild를 null로 설정한다.
originalEndNode가 originalStartNode의 포괄 조상이 아니면, lastPartiallyContainedChild를 range에 부분적으로 포함된 commonAncestor의 마지막 자식으로 설정한다.

이러한 변수 할당은 실제로 항상 의미가 있다. 예를 들어 originalStartNode가 originalEndNode의 포괄 조상이 아니면, originalStartNode 자체가 range에 부분적으로 포함되며, commonAncestor의 자식에 이르기까지 모든 조상도 그러하다. commonAncestor는 originalEndNode의 포괄 조상이어야 하므로 originalStartNode일 수 없다. 다른 경우도 유사하다. 또한 두 자식이 모두 정의된 경우 서로 같을 수 없다는 점에 유의한다.
containedChildren을 range에 포함된 commonAncestor의 모든 자식의 목록으로 설정하되, 트리 순서로 나열한다.
containedChildren의 구성원 중 하나라도 doctype이면 "HierarchyRequestError" DOMException을 발생시킨다.

첫 번째 또는 마지막 부분적으로 포함된 노드는 걱정할 필요가 없다. doctype은 절대 부분적으로 포함될 수 없기 때문이다. 이는 범위의 경계점이 될 수 없으며 어떤 것의 조상도 될 수 없다.
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에 추가한다.
containedChildren의 각 contained child에 대해:
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 노드이거나, 부모가 null인 Text 노드이거나, node이면 "HierarchyRequestError" DOMException을 발생시킨다.
referenceNode를 null로 설정한다.
range의 시작 노드가 Text 노드이면, referenceNode를 해당 Text 노드로 설정한다.
그렇지 않으면, 해당 자식이 있는 경우 referenceNode를 인덱스가 range의 시작 오프셋인 range의 시작 노드의 자식으로 설정하고, 그렇지 않으면 null로 설정한다.
parent를 referenceNode가 null이면 range의 시작 노드로 설정하고, 그렇지 않으면 referenceNode의 부모로 설정한다.
node, parent, referenceNode, 그리고 « »가 주어졌을 때 사전 삽입 유효성을 확인한다.
range의 시작 노드가 Text 노드이면, referenceNode를 해당 노드를 range의 시작 오프셋으로 분할한 결과로 설정한다.
node가 referenceNode이면 referenceNode를 해당 다음 형제로 설정한다.
node의 부모가 null이 아니면 node를 제거한다.
newOffset을 referenceNode가 null이면 parent의 길이로 설정하고, 그렇지 않으면 referenceNode의 인덱스로 설정한다.
node가 DocumentFragment 노드이면 newOffset을 node의 길이만큼 증가시키고, 그렇지 않으면 1만큼 증가시킨다.
node를 referenceNode 앞에서 parent에 사전 삽입한다.
range가 축소되어 있으면 range의 끝을 (parent, newOffset)으로 설정한다.

insertNode(node) 메서드 단계는 node를 this에 삽입하는 것이다.

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

Text가 아닌 노드가 this에 부분적으로 포함되어 있으면 "InvalidStateError" DOMException을 발생시킨다.
newParent가 Document, DocumentType, 또는 DocumentFragment 노드이면 "InvalidNodeTypeError" DOMException을 발생시킨다.

역사적인 이유로 CharacterData 노드는 여기서 검사되지 않으며 부수 효과로 나중에 예외를 발생시킨다.
fragment를 this를 추출한 결과로 설정한다.
newParent에 자식이 있으면 newParent 안에서 null로 모두 교체한다.
newParent를 this에 삽입한다.
fragment를 newParent에 추가한다.
this 안에서 newParent를 선택한다.

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가 doctype이면 "InvalidNodeTypeError" DOMException을 발생시킨다.
offset이 node의 길이보다 크면 "IndexSizeError" DOMException을 발생시킨다.
(node, offset)이 시작 앞에 있거나 끝 뒤에 있으면 false를 반환한다.
true를 반환한다.

comparePoint(node, offset) 메서드 단계는 다음과 같다:

node의 루트가 this의 루트가 아니면 "WrongDocumentError" DOMException을 발생시킨다.
node가 doctype이면 "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에 추가한다.
this에 포함된 모든 Text 노드의 데이터를 트리 순서로 연결한 결과를 string에 추가한다.
this의 끝 노드가 Text 노드이면, 해당 노드의 데이터 시작부터 this의 끝 오프셋까지의 부분 문자열을 string에 추가한다.
string을 반환한다.

createContextualFragment(), getClientRects(), 그리고 getBoundingClientRect() 메서드는 다른 명세에서 정의된다. [DOM-Parsing] [CSSOM-VIEW]

6. 트래버설(Traversal)

NodeIterator 및 TreeWalker 객체는 노드 트리를 필터링하고 순회하는 데 사용할 수 있다.

각 NodeIterator 및 TreeWalker 객체에는 재귀 호출을 방지하기 위한 연결된 불리언 활성 상태가 있다. 이는 처음에는 false이다.

각 NodeIterator 및 TreeWalker 객체에는 또한 연결된 루트(노드), whatToShow(비트 마스크), 그리고 필터(콜백)가 있다.

NodeIterator 또는 TreeWalker 객체 traverser 내에서 노드 node를 필터링하려면:

traverser의 활성 상태가 true이면 "InvalidStateError" DOMException을 발생시킨다.
n을 node의 nodeType 속성 값 − 1로 설정한다.
traverser의 whatToShow에서 n^번째 비트(0은 최하위 비트)가 설정되어 있지 않으면 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 객체는 Document 객체의 createNodeIterator() 메서드를 사용하여 생성할 수 있다.

각 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를 nodeIterator의 루트의 포괄 자손이면서 toBeRemovedNode의 포괄 자손은 아닌 toBeRemovedNode의 첫 번째 뒤따르는 노드로 설정한다. 그러한 노드가 없으면 null로 설정한다.
2. next가 null이 아니면 (next, true)를 반환한다.
newNode를 toBeRemovedNode의 이전 형제가 null이면 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를 iterator 내에서 node를 필터링한 결과로 설정한다. 이 과정에서 예외가 발생하면 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의 현재 노드로 설정한다.
type이 "first"이면 node를 node의 첫 번째 자식으로 설정하고, 그렇지 않으면 node의 마지막 자식으로 설정한다.
node가 null이 아닌 동안:
1. result를 walker 내에서 node를 필터링한 결과로 설정한다.
2. result가 FILTER_ACCEPT이면, walker의 현재 노드를 node로 설정하고 node를 반환한다.
3. result가 FILTER_SKIP이면:
  1. type이 "first"이면 child를 node의 첫 번째 자식으로 설정하고, 그렇지 않으면 node의 마지막 자식으로 설정한다.
  2. child가 null이 아니면 node를 child로 설정하고 계속한다.
4. node가 null이 아닌 동안:
  1. type이 "first"이면 sibling을 node의 다음 형제로 설정하고, 그렇지 않으면 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. type이 "next"이면 sibling을 node의 다음 형제로 설정하고, 그렇지 않으면 node의 이전 형제로 설정한다.
2. sibling이 null이 아닌 동안:
  1. node를 sibling으로 설정한다.
  2. result를 walker 내에서 node를 필터링한 결과로 설정한다.
  3. result가 FILTER_ACCEPT이면, walker의 현재 노드를 node로 설정하고 node를 반환한다.
  4. type이 "next"이면 sibling을 node의 첫 번째 자식으로 설정하고, 그렇지 않으면 node의 마지막 자식으로 설정한다.
  5. result가 FILTER_REJECT 이거나 sibling이 null이면, type이 "next"인 경우 sibling을 node의 다음 형제로 설정하고, 그렇지 않으면 node의 이전 형제로 설정한다.
3. node를 node의 부모로 설정한다.
4. node가 null이거나 walker의 루트이면 null을 반환한다.
5. walker 내에서 node를 필터링한 반환 값이 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를 this 내에서 node를 필터링한 결과로 설정한다.
  3. result가 FILTER_REJECT 가 아니고 node에 자식이 있는 동안:
    1. node를 node의 마지막 자식으로 설정한다.
    2. result를 this 내에서 node를 필터링한 결과로 설정한다.
  4. result가 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환한다.
  5. sibling을 node의 이전 형제로 설정한다.
3. node가 this의 루트이거나 node의 부모가 null이면 null을 반환한다.
4. node를 node의 부모로 설정한다.
5. this 내에서 node를 필터링한 반환 값이 FILTER_ACCEPT이면, this의 현재 노드를 node로 설정하고 node를 반환한다.
null을 반환한다.

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

node를 this의 현재 노드로 설정한다.
result를 FILTER_ACCEPT로 설정한다.
true인 동안:
1. result가 FILTER_REJECT 가 아니고 node에 자식이 있는 동안:
  1. node를 해당 첫 번째 자식으로 설정한다.
  2. result를 this 내에서 node를 필터링한 결과로 설정한다.
  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를 this 내에서 node를 필터링한 결과로 설정한다.
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을 ASCII 소문자로 변환한 token으로 설정한다.
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이면 토큰 집합을 비운다.
그렇지 않고 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) 메서드 단계는 this의 토큰 집합[token]이 존재하면 true를 반환하고, 그렇지 않으면 false를 반환하는 것이다.

add(tokens…) 메서드 단계는 다음과 같다:

tokens의 각 token에 대해 반복한다:
1. token이 빈 문자열이면 "SyntaxError" DOMException을 발생시킨다.
2. token에 ASCII 공백이 포함되어 있으면 "InvalidCharacterError" DOMException을 발생시킨다.
tokens의 각 token에 대해 반복한다: token을 this의 토큰 집합에 추가한다.
갱신 단계를 실행한다.

remove(tokens…) 메서드 단계는 다음과 같다:

tokens의 각 token에 대해 반복한다:
1. token이 빈 문자열이면 "SyntaxError" DOMException을 발생시킨다.
2. token에 ASCII 공백이 포함되어 있으면 "InvalidCharacterError" DOMException을 발생시킨다.
tokens의 각 token에 대해: 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를 반환한다.
this의 토큰 집합에서 token을 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

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, [email protected]) 그리고 Aryeh Gregor([email protected]), Ms2ger([email protected])의 큰 기여로 작성되었습니다.

지적재산권(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`