DOM

1. 인프라스트럭처

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

이 명세에서 사용되는 일부 용어는 Encoding, Selectors, Web IDL, XML, 그리고 Namespaces in XML에서 정의되어 있습니다. [ENCODING] [SELECTORS4] [WEBIDL] [XML] [XML-NAMES]

확장이 필요할 때 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을 받아 다음 단계들을 수행합니다:

1. inputTokens를 ASCII 공백 문자로 input을 분할한 결과로 설정합니다.

2. tokens를 새로운 순서가 있는 집합으로 설정합니다.

3. inputTokens의 각 token에 대해, token을 tokens에 추가합니다.

4. tokens를 반환합니다.

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

1.3. 셀렉터

셀렉터 문자열 범위 매칭을 위해 selectors를 node에 대해 수행할 때, 다음 단계들을 실행합니다:

1. selectors를 선택자 구문 분석한 결과를 s로 둡니다. [SELECTORS4]

2. s가 실패이면, "SyntaxError" DOMException을 throw합니다.

3. node를 스코핑 루트로 사용하여 s와 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를 반환하는 경우입니다:

1. name의 길이가 0이면 false를 반환합니다.

2. name의 0번째 코드 포인트가 ASCII 알파벳이라면:

   1. name에 ASCII 공백, U+0000 NULL, U+002F (/), 또는 U+003E (>)가 포함되어 있다면 false를 반환합니다.

   2. true를 반환합니다.

3. name의 0번째 코드 포인트가 U+003A (:), U+005F (_), 또는 U+0080~U+10FFFF 범위에 포함되지 않는다면 false를 반환합니다.

4. name의 나머지 코드 포인트들이 있다면, ASCII 알파벳, ASCII 숫자, U+002D (-), U+002E (.), U+003A (:), U+005F (_), 또는 U+0080~U+10FFFF 범위에 포함되지 않는다면 false를 반환합니다.

5. 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와 함께 수행합니다:

1. namespace가 빈 문자열이면 null로 설정합니다.

2. prefix를 null로 설정합니다.

3. localName을 qualifiedName으로 설정합니다.

4. qualifiedName에 U+003A (:)가 포함되어 있다면:

   1. qualifiedName과 U+003A (:)를 사용하여 strictly split을 실행한 결과를 splitResult로 둡니다.

   2. prefix를 splitResult[0]으로 설정합니다.

   3. localName을 splitResult[1]로 설정합니다.

   4. prefix가 유효한 네임스페이스 접두사가 아니면, "InvalidCharacterError" DOMException을 throw합니다.

5. Assert: prefix는 null이거나 유효한 네임스페이스 접두사입니다.

6. context가 "attribute"이고 localName이 유효한 속성 로컬 이름이 아니면, "InvalidCharacterError" DOMException을 throw합니다.

7. context가 "element"이고 localName이 유효한 요소 로컬 이름이 아니면, "InvalidCharacterError" DOMException을 throw합니다.

8. prefix가 null이 아니고 namespace가 null이면, "NamespaceError" DOMException을 throw합니다.

9. prefix가 "xml"이고 namespace가 XML 네임스페이스가 아니면, "NamespaceError" DOMException을 throw합니다.

10. qualifiedName 또는 prefix가 "xmlns"이고 namespace가 XMLNS 네임스페이스가 아니면, "NamespaceError" DOMException을 throw합니다.

11. namespace가 XMLNS 네임스페이스이고 qualifiedName과 prefix 모두 "xmlns"가 아니면, "NamespaceError" DOMException을 throw합니다.

12. (namespace, prefix, localName)을 반환합니다.

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]

이벤트는 연관된 경로(path)를 가집니다. 경로는 구조체(struct)의 리스트입니다. 각 구조체는 호출 타겟(invocation target)(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로 초기화되어야 합니다.

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 속성은 초기화된 값을 반환해야 합니다.

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 속성은 초기화된 값을 반환해야 합니다.

2.5. 이벤트 생성

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

이 구조는 초기화용 딕셔너리 멤버와 IDL 속성 간 1:1 대응이 아닌 더 복잡한 구조를 가진 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를 반환합니다.

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

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

미래에는 사용자 지정 get the parent 알고리즘을 허용할 수도 있습니다. 이것이 귀하의 프로그램에 유용할지 알려주세요. 현재로서는, 모든 작성자가 생성한 EventTarget은 트리 구조에 참여하지 않습니다.

2.8. 이벤트 리스너 관찰

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

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

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

2.9. 이벤트 디스패치

2.10. 이벤트 발생

DOM에서 fire는 생성, 초기화, 그리고 디스패치를 의미한다. 이벤트 발생은 이 과정을 더 쉽게 기술할 수 있게 해준다.

2.11. 동작과 발생의 차이

이벤트는 동작이 아니라 발생을 의미한다. 다시 말해, 알고리즘에서의 알림을 나타내며, 그 알고리즘의 향후 진행에 영향을 줄 수 있다 (예: preventDefault() 호출). 이벤트는 어떤 알고리즘을 시작시키는 동작이나 트리거로 사용되어서는 안 된다. 그것이 이벤트의 목적이 아니다.

이 부분을 명확히 하는 이유는 이전 DOM 버전에서는 이벤트에 "기본 동작" 개념이 있었기 때문에 오해가 많았다. 이벤트는 동작을 나타내거나 유발하지 않으며, 진행 중인 동작에만 영향을 줄 수 있다.

3. 진행 중인 작업 중단

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

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

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();

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 객체)을 가진다.

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

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 객체의 약한 집합)를 가지며, 초기에는 비어 있다.

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

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

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

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가 아닐 때 중단된 것이다.

3.2.1. 가비지 컬렉션

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

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

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

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

프라미스를 사용하지 않는 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와 상속된 인터페이스 NodeInterface를 구현하는 객체를 NodeInterface 노드라고 부른다.

노드 트리는 노드와 그 가능한 자식 간의 관계로 표현되는 다음과 같은 제약을 받는다:

Document

트리 순서로:

1. 0개 이상의 ProcessingInstruction 또는 Comment 노드.

2. 선택적으로 하나의 DocumentType 노드.

3. 0개 이상의 ProcessingInstruction 또는 Comment 노드.

4. 선택적으로 하나의 Element 노드.

5. 0개 이상의 ProcessingInstruction 또는 Comment 노드.

DocumentFragment

Element

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

DocumentType

CharacterData

Attr

자식 없음.

Attr 노드는 역사적인 이유로 트리에 참여한다; 이들은 (null이 아닌) 부모나 자식을 절대 가지지 않으므로 트리에서 혼자 있다.

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

1. node가 DocumentType 또는 Attr 노드라면, 0을 반환한다.

2. node가 CharacterData 노드라면, node의 데이터의 길이를 반환한다.

3. node의 자식 수를 반환한다.

노드는 그 길이가 0이면 비어있다고 간주된다.

4.2.1. 문서 트리

문서 트리는 루트가 문서인 노드 트리이다.

문서의 문서 요소는 부모가 해당 문서인 요소이다. 존재한다면; 그렇지 않으면 null이다.

노드 트리 제약에 따라, 그러한 요소는 하나만 있을 수 있다.

노드는 그 루트가 문서일 때 문서 트리에 있다고 한다.

노드는 문서 트리에 있으면 문서에 있다고 한다. 문서에 있다는 용어는 더 이상 사용되지 않는다. 이는 이를 사용하는 표준이 섀도 트리를 고려하도록 업데이트되지 않았음을 나타낸다.

4.2.2. 섀도 트리

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

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

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

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

4.2.2.1. 슬롯

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

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

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

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

1. 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 노드는 슬롯 가능한 요소이다.

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

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

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

1. 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. 슬롯과 슬롯 가능한 요소 찾기

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

4.2.2.5. 슬롯 변경 신호

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

4.2.3. 변경 알고리즘

노드 child 앞의 노드 parent에 노드 node를 삽입하기 위한 사전 삽입 유효성 보장:

1. parent가 Document, DocumentFragment, 또는 Element 노드가 아니라면, "HierarchyRequestError" DOMException을 던진다.

2. node가 parent의 호스트 포함 포괄 조상이라면, "HierarchyRequestError" DOMException을 던진다.

3. child가 non-null이고 그 부모가 parent가 아니라면, "NotFoundError" DOMException을 던진다.

4. node가 DocumentFragment, DocumentType, Element, 또는 CharacterData 노드가 아니라면, "HierarchyRequestError" DOMException을 던진다.

5. node가 Text 노드이고 parent가 문서이거나, 또는 node가 문서타입이고 parent가 문서가 아니라면, "HierarchyRequestError" DOMException을 던진다.

6. parent가 문서이고, node가 구현하는 인터페이스에 따른 아래 문장 중 하나라도 참이라면, "HierarchyRequestError" DOMException을 던진다.

   DocumentFragment

   node가 둘 이상의 요소 자식을 가지거나 Text 노드 자식을 가지는 경우.

   그렇지 않고, node가 하나의 요소 자식을 가지고, parent가 요소 자식을 가지거나, child가 문서타입이거나, child가 non-null이고 문서타입이 child를 따르는 경우.

   Element

   parent가 요소 자식을 가지거나, child가 문서타입이거나, child가 non-null이고 문서타입이 child를 따르는 경우.

   DocumentType

   parent가 문서타입 자식을 가지거나, child가 non-null이고 요소가 child를 앞서거나, child가 null이고 parent가 요소 자식을 가지는 경우.

사전 삽입을 위해 node를 parent의 child 앞에 삽입하려면 다음 단계를 실행한다:

1. node를 parent의 child 앞에 사전 삽입 유효성을 확인한다.

2. referenceChild를 child로 한다.

3. referenceChild가 node라면, referenceChild를 node의 다음 형제로 설정한다.

4. 삽입을 통해 node를 parent의 referenceChild 앞에 삽입한다.

5. node를 반환한다.

仕様は、すべてまたは一部のノードに対して 挿入手順 を定義する場合があります。アルゴリズムにはinsertedNodeが渡され、以下の挿入アルゴリズムで示されています。 これらの手順は、insertedNodeがノードツリーに 参加している場合、そのノードツリーを変更したり、閲覧コンテキストを作成したり、 イベントを発火したり、 その他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);

명세는 모든 혹은 일부 연결 후 단계를 노드에 대해 정의할 수 있습니다. 알고리즘에는 아래 삽입 알고리즘에서와 같이 connectedNode가 전달됩니다.

연결 후 단계의 목적은 노드가 connectedNode가 노드 트리에 참여하는 것을 수정하거나, 브라우징 컨텍스트를 생성하거나, 또는 자바스크립트를 실행하는 등 연결 관련 작업을 수행할 수 있도록 하는 것입니다. 이 단계는 노드의 일괄 삽입을 스크립트 관점에서 원자적으로 처리해, 주요 부작용들이 노드 트리에 모두 삽입이 완료된 이후에 발생하게 합니다. 이를 통해 모든 노드 트리의 삽입이 완전히 끝나야만 추가 삽입이 진행될 수 있습니다.

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

노드를 삽입하기 위해 node를 parent에 child 앞에, 선택적으로 관찰자 억제 플래그와 함께 삽입하려면 다음 단계들을 실행합니다:

1. node가 DocumentFragment 노드라면, nodes를 node의 자식으로 설정하고, 아니라면 « node »로 설정합니다.

2. count를 nodes의 크기로 설정합니다.

3. count가 0이면 반환합니다.

4. node가 DocumentFragment 노드라면:

   1. 그 자식들을 관찰자 억제 플래그를 설정하여 제거합니다.

   2. node에 대해 « », nodes, null, null을 가지고 트리 변화 레코드 큐에 등록합니다.

      이 단계는 관찰자 억제 플래그를 일부러 무시합니다.

5. child가 null이 아니면:

   1. parent의 시작 노드이고, 시작 오프셋이 child의 인덱스보다 큰 live range마다 시작 오프셋을 count만큼 증가시킵니다.

   2. parent의 끝 노드이고, 끝 오프셋이 child의 인덱스보다 큰 live range마다 끝 오프셋을 count만큼 증가시킵니다.

6. previousSibling을 child의 이전 형제로, child가 null이면 parent의 마지막 자식으로 설정합니다.

7. nodes 내의 각 node에 대해 트리 순서로:

   1. node를 parent의 노드 문서로 채택합니다.

   2. child가 null이면 parent의 자식에 append합니다.

   3. 그 외에는 parent의 자식에서 child의 인덱스 앞에 삽입합니다.

   4. parent가 섀도우 호스트이고, 섀도우 루트의 슬롯 할당이 "named"이며, node가 슬롯할 수 있는 노드라면, 슬롯을 할당합니다.

   5. parent의 루트가 섀도우 루트이고, parent가 슬롯이며, 할당된 노드가 비어있다면, 슬롯 변경 신호를 보냅니다.

   6. node의 루트로 트리에 슬롯할 수 있는 노드 할당을 실행합니다.

   7. node의 각 섀도우 포함 포괄 자손 inclusiveDescendant에 대해 섀도우 포함 트리 순서로:

      1. 삽입 단계를 inclusiveDescendant로 실행합니다.

      2. inclusiveDescendant가 연결됨이 아니라면, 다음으로 넘어갑니다.

      3. inclusiveDescendant가 요소라면:

         1. inclusiveDescendant의 커스텀 요소 레지스트리가 null이면, inclusiveDescendant의 커스텀 요소 레지스트리를 커스텀 요소 레지스트리 조회 결과로 설정합니다.

         2. 그 외에 inclusiveDescendant의 커스텀 요소 레지스트리의 is scoped가 true라면, inclusiveDescendant의 노드 문서를 커스텀 요소 레지스트리의 범위 문서 집합에 append합니다.

         3. inclusiveDescendant가 커스텀이라면, 커스텀 요소 콜백 반응을 큐에 등록합니다. 콜백 이름은 "connectedCallback", 인자는 « ».

         4. 그 외에는 업그레이드 시도를 inclusiveDescendant로 실행합니다.

            업그레이드가 성공하면 inclusiveDescendant의 connectedCallback은 요소 업그레이드 알고리즘에서 자동으로 큐에 등록됩니다.

      4. 그 외에 inclusiveDescendant가 섀도우 루트라면:

         1. inclusiveDescendant의 커스텀 요소 레지스트리가 null이고, keep custom element registry null이 false라면, inclusiveDescendant의 커스텀 요소 레지스트리를 커스텀 요소 레지스트리 조회 결과로 설정합니다.

         2. 그 외에 inclusiveDescendant의 커스텀 요소 레지스트리가 null이 아니고, 커스텀 요소 레지스트리의 is scoped가 true라면, inclusiveDescendant의 노드 문서를 커스텀 요소 레지스트리의 범위 문서 집합에 append합니다.

8. 관찰자 억제 플래그가 설정되어 있지 않으면, parent에 nodes, « », previousSibling, child로 트리 변화 레코드 큐에 등록합니다.

9. parent에 자식 변경 단계를 실행합니다.

10. staticNodeList를 리스트로, 노드로, 처음에는 « »로 설정합니다.

    모든 노드를 연결 후 단계를 하나라도 호출하기 이전에 수집합니다. 연결 후 단계를 노드 트리를 순회하는 중간에 호출하지 않는 이유는, 연결 후 단계가 트리 구조를 수정할 수 있어, 라이브 순회가 안전하지 않고, 동일한 노드에 여러 번 연결 후 단계가 호출될 수 있기 때문입니다.

11. nodes 내의 각 node에 대해 트리 순서로:

    1. node의 각 섀도우 포함 포괄 자손 inclusiveDescendant에 대해 섀도우 포함 트리 순서로, append로 inclusiveDescendant를 staticNodeList에 추가합니다.

12. 각 staticNodeList의 node에 대해, node가 연결됨이라면 연결 후 단계를 node로 실행합니다.

명세는 모든 또는 일부 노드에 대해 이동 단계를 정의할 수 있습니다. 알고리즘에는 노드 movedNode와 노드-또는-null oldParent가 아래 이동 알고리즘에서와 같이 전달됩니다. 삽입 단계와 마찬가지로, 이러한 단계는 movedNode가 노드 트리에 참여하는 것을 수정하거나, 브라우징 컨텍스트를 생성하거나, 이벤트를 발생시키거나, 또는 자바스크립트를 실행하는 등의 동작을 해서는 안 됩니다. 그러나 이러한 단계에서는 이러한 작업을 비동기적으로 수행하기 위해 태스크를 큐에 등록할 수 있습니다.

노드를 이동하기 위해 노드 node를 노드 newParent에 노드-또는-null child 앞에 이동하려면:

1. newParent의 섀도우 포함 루트가 node의 섀도우 포함 루트와 다르면, "HierarchyRequestError" DOMException을 throw합니다.

   이로 인해 newParent의 연결됨이 node의 연결됨과 같을 때만 이동이 수행됨이 보장됩니다.

2. node가 호스트 포함 포괄 조상이라면, newParent에 대해 "HierarchyRequestError" DOMException을 throw합니다.

3. child가 null이 아니고, 그 부모가 newParent가 아니라면, "NotFoundError" DOMException을 throw합니다.

4. node가 Element 또는 CharacterData 노드가 아니면, "HierarchyRequestError" DOMException을 throw합니다.

5. node가 Text 노드이고, newParent가 문서라면, "HierarchyRequestError" DOMException을 throw합니다.

6. 만약 newParent가 document이고, node가 Element node이며, newParent에 element child가 있거나, child가 doctype이거나, 또는 child가 null이 아니고 doctype이 child 다음에 오는 경우, "HierarchyRequestError" DOMException을 throw합니다.

7. oldParent를 node의 부모로 설정합니다.

8. Assert: oldParent는 null이 아닙니다.

9. live range 사전 제거 단계를 node로 실행합니다.

10. NodeIterator 객체 iterator마다, 그 루트의 노드 문서가 node의 노드 문서와 같으면, NodeIterator 사전 제거 단계를 node와 iterator로 실행합니다.

11. oldPreviousSibling을 node의 이전 형제로 설정합니다.

12. oldNextSibling을 node의 다음 형제로 설정합니다.

13. 제거 node를 oldParent의 자식에서 제거합니다.

14. node가 할당됨이면, 슬롯할 수 있는 노드 할당을 node의 할당 슬롯으로 실행합니다.

15. oldParent의 루트가 섀도우 루트이고, oldParent가 슬롯이며, 할당된 노드가 비어있다면, 슬롯 변경 신호를 oldParent로 실행합니다.

16. node에 포괄 자손 중 슬롯이 있다면:

    1. 트리에 슬롯할 수 있는 노드 할당을 oldParent의 루트로 실행합니다.

    2. 트리에 슬롯할 수 있는 노드 할당을 node로 실행합니다.

17. child가 null이 아니면:

    1. live range 중, 시작 노드가 newParent이고, 시작 오프셋이 child의 인덱스보다 크면, 시작 오프셋을 1 증가시킵니다.

    2. live range 중, 끝 노드가 newParent이고, 끝 오프셋이 child의 인덱스보다 크면, 끝 오프셋을 1 증가시킵니다.

18. newPreviousSibling을 child가 null이 아니면 child의 이전 형제로, 아니면 newParent의 마지막 자식으로 설정합니다.

19. child가 null이면 node를 newParent의 자식에 append합니다.

20. 그 외에는 node를 newParent의 자식에서 child의 인덱스 앞에 삽입합니다.

21. newParent가 섀도우 호스트이고, 섀도우 루트의 슬롯 할당이 "named"이며, node가 슬롯할 수 있는 노드라면, 슬롯을 할당합니다.

22. newParent의 루트가 섀도우 루트이고, newParent가 슬롯이며, 할당된 노드가 비어있다면, 슬롯 변경 신호를 newParent로 실행합니다.

23. 트리에 슬롯할 수 있는 노드 할당을 node의 루트로 실행합니다.

24. node의 각 섀도우 포함 포괄 자손 inclusiveDescendant에 대해 섀도우 포함 트리 순서로:

    1. inclusiveDescendant가 node이면 이동 단계를 inclusiveDescendant와 oldParent로 실행하고, 아니면 이동 단계를 inclusiveDescendant와 null로 실행합니다.

       이동 알고리즘은 삽입이나 제거와는 별개의 프리미티브이므로, inclusiveDescendant에 대해 전통적인 삽입 단계나 제거 단계를 호출하지 않습니다.

    2. inclusiveDescendant가 커스텀이고, newParent가 연결됨이면, 커스텀 요소 콜백 반응 큐에 등록을 inclusiveDescendant와 콜백 이름 "connectedMoveCallback", 인자 « »로 실행합니다.

25. 트리 변화 레코드 큐에 등록을 oldParent에 대해 « », « node », oldPreviousSibling, oldNextSibling로 실행합니다.

26. 트리 변화 레코드 큐에 등록을 newParent에 대해 « node », « », newPreviousSibling, child로 실행합니다.

노드 추가를 하려면 node를 parent에 추가할 때, pre-insert로 node를 parent에 null 앞에 삽입합니다.

노드 교체를 하려면 parent 내에서 child를 node로 교체할 때, 다음 단계를 실행합니다:

1. parent가 Document, DocumentFragment, Element 노드 중 하나가 아니면, "HierarchyRequestError" DOMException을 throw합니다.

2. node가 호스트 포함 포괄 조상이면 parent에 대해 "HierarchyRequestError" DOMException을 throw합니다.

3. child의 부모가 parent가 아니면 "NotFoundError" DOMException을 throw합니다.

4. node가 DocumentFragment, DocumentType, Element, CharacterData 노드 중 하나가 아니면 "HierarchyRequestError" DOMException을 throw합니다.

5. node가 Text 노드이고 parent가 문서이거나, node가 doctype이고 parent가 문서가 아니면, "HierarchyRequestError" DOMException을 throw합니다.

6. parent가 문서이고 아래의 조건 중 node가 구현하는 인터페이스에 따라 true라면, "HierarchyRequestError" DOMException을 throw합니다.

   DocumentFragment

   node에 요소 자식이 2개 이상 있거나, Text 노드 자식이 있으면 true.

   그렇지 않고, 만약 node가 하나의 element child를 가지고 있고, parent가 child가 아닌 element child를 가지고 있거나 또는 doctype이 child 다음에 오는 경우.

   Element

   parent에 child가 아닌 element child가 있거나 또는 doctype이 child 다음에 오는 경우.

   DocumentType

   parent에 child가 아닌 doctype child가 있거나, 또는 element가 child 앞에 오는 경우.

   위의 조건들은 pre-insert 알고리즘과 다릅니다.

7. referenceChild를 child의 다음 형제로 설정합니다.

8. referenceChild가 node이면 referenceChild를 node의 다음 형제로 설정합니다.

9. previousSibling을 child의 이전 형제로 설정합니다.

10. removedNodes를 빈 집합으로 설정합니다.

11. child의 부모가 null이 아니면:

    1. removedNodes를 « child »로 설정합니다.

    2. 제거 child를 관찰자 억제 플래그를 설정하여 제거합니다.

    위의 조건이 false가 되는 경우는 child가 node일 때뿐입니다.

12. nodes를 node가 DocumentFragment 노드이면 node의 자식으로, 아니면 « node »로 설정합니다.

13. 삽입 node를 parent에 referenceChild 앞에 관찰자 억제 플래그를 설정하여 삽입합니다.

14. 트리 변화 레코드 큐에 등록을 parent에 nodes, removedNodes, previousSibling, referenceChild로 실행합니다.

15. child를 반환합니다.

모두 교체를 하려면 parent 내에서 node로 모두 교체할 때, 다음 단계를 실행합니다:

1. removedNodes를 parent의 자식으로 설정합니다.

2. addedNodes를 빈 집합으로 설정합니다.

3. node가 DocumentFragment 노드라면, addedNodes를 node의 자식으로 설정합니다.

4. 그 외에 node가 null이 아니면 addedNodes를 « node »로 설정합니다.

5. 제거 parent의 모든 자식을 트리 순서로 관찰자 억제 플래그를 설정하여 제거합니다.

6. node가 null이 아니면 삽입 node를 parent에 null 앞에 관찰자 억제 플래그를 설정하여 삽입합니다.

7. addedNodes 또는 removedNodes가 비어있지 않으면, 트리 변화 레코드 큐에 등록을 parent에 addedNodes, removedNodes, null, null로 실행합니다.

이 알고리즘은 노드 트리 제약조건에 대한 체크를 하지 않습니다. 명세 작성자는 신중하게 사용해야 합니다.

사전 제거를 하려면 parent에서 child를 사전 제거할 때, 다음 단계를 실행합니다:

1. child의 부모가 parent가 아니면 "NotFoundError" DOMException을 throw합니다.

2. 제거 child를 실행합니다.

3. child를 반환합니다.

명세는 모든 또는 일부 제거 단계를 노드에 대해 정의할 수 있습니다. 알고리즘에는 노드 removedNode와 노드-또는-null oldParent가 아래 제거 알고리즘에서와 같이 전달됩니다.

노드 제거를 하려면 노드 node를 선택적으로 관찰자 억제 플래그와 함께 제거하려면 다음 단계를 실행합니다:

1. parent를 node의 부모로 설정합니다.

2. Assert: parent는 null이 아닙니다.

3. live range 사전 제거 단계를 node로 실행합니다.

4. NodeIterator 객체 iterator마다, 그 루트의 노드 문서가 node의 노드 문서와 같으면, NodeIterator 사전 제거 단계를 node와 iterator로 실행합니다.

5. oldPreviousSibling을 node의 이전 형제로 설정합니다.

6. oldNextSibling을 node의 다음 형제로 설정합니다.

7. 제거 node를 parent의 자식에서 제거합니다.

8. node가 할당됨이면, 슬롯할 수 있는 노드 할당을 node의 할당 슬롯으로 실행합니다.

9. parent의 루트가 섀도우 루트이고, parent가 슬롯이며, 할당된 노드가 비어있으면, 슬롯 변경 신호를 parent로 실행합니다.

10. node에 포괄 자손 중 슬롯이 있다면:

    1. 트리에 슬롯할 수 있는 노드 할당을 parent의 루트로 실행합니다.

    2. 트리에 슬롯할 수 있는 노드 할당을 node로 실행합니다.

11. 제거 단계를 node와 parent로 실행합니다.

12. isParentConnected를 parent의 연결됨으로 설정합니다.

13. node가 커스텀이고 isParentConnected가 true라면, 커스텀 요소 콜백 반응 큐에 등록을 node와 콜백 이름 "disconnectedCallback", 인자 « »로 실행합니다.

    현재는 커스텀 요소에 parent가 전달되지 않습니다. 필요하다면 향후 변경될 수 있습니다.

14. node의 각 섀도우 포함 자손 descendant에 대해 섀도우 포함 트리 순서로:

    1. 제거 단계를 descendant와 null로 실행합니다.

    2. descendant가 커스텀이고 isParentConnected가 true라면, 커스텀 요소 콜백 반응 큐에 등록을 descendant와 콜백 이름 "disconnectedCallback", 인자 « »로 실행합니다.

15. parent의 각 포괄 조상 inclusiveAncestor에 대해, 그리고 각 inclusiveAncestor의 등록된 옵저버 목록의 registered에 대해, registered의 options["subtree"]가 true이면, append로 새로운 임시 등록 옵저버를 registered의 옵저버, 옵션, source를 node의 등록된 옵저버 목록에 추가합니다.

16. 관찰자 억제 플래그가 설정되어 있지 않으면, 트리 변화 레코드 큐에 등록을 parent에 « », « node », oldPreviousSibling, oldNextSibling로 실행합니다.

17. 자식 변경 단계를 parent로 실행합니다.

4.2.4. 믹스인 NonElementParentNode

웹 호환성으로 인해 getElementById() 메서드는 요소에서(따라서 ParentNode에서도) 노출되지 않습니다.

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

node . getElementById(elementId)

node의 자손 중에서 elementId라는 ID를 가진 첫 번째 요소를 반환합니다.

getElementById(elementId) 메서드 단계는 트리 순서로 this의 자손 중에서 elementId라는 ID를 가진 첫 번째 요소를 반환합니다. 그런 요소가 없다면 null을 반환합니다.

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 단계는 다음과 같습니다:

1. this가 문서라면, this의 커스텀 요소 레지스트리를 반환합니다.

2. Assert: this는 ShadowRoot 노드입니다.

3. this의 커스텀 요소 레지스트리를 반환합니다.

DocumentOrShadowRoot 믹스인은 문서와 섀도우 루트 사이에서 API를 공유하려는 다른 표준에서도 사용할 것으로 예상됩니다.

4.2.6. 믹스인 ParentNode

노드들을 하나의 노드로 변환하려면, nodes와 document를 받아 다음 단계를 실행합니다:

1. node를 null로 설정합니다.

2. nodes 내의 각 문자열을, 해당 문자열을 data로 하고 노드 문서를 document로 하는 새로운 Text 노드로 대체합니다.

3. nodes에 노드가 1개 있으면, node를 nodes[0]으로 설정합니다.

4. 그 외에는, node를 노드 문서를 document로 하는 새로운 DocumentFragment 노드로 설정하고, nodes 내의 모든 노드를(있다면) 해당 노드에 append합니다.

5. node를 반환합니다.

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

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

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

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

collection = node . children

자식 요소들을 반환합니다.

element = node . firstElementChild

첫 번째 자식이 요소라면 반환합니다. 없으면 null.

element = node . lastElementChild

마지막 자식이 요소라면 반환합니다. 없으면 null.

node . prepend(nodes)

nodes를 node의 첫 번째 자식 앞에 삽입합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . append(nodes)

nodes를 node의 마지막 자식 뒤에 삽입합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . replaceChildren(nodes)

node의 모든 자식을 nodes로 교체합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . moveBefore(movedNode, child)

제거하지 않고 movedNode를 node 내에서 child 뒤에 이동시킵니다. child가 null이면 node의 마지막 자식 뒤에 이동합니다. 이 메서드는 movedNode와 관련된 상태를 유지합니다.

트리 제약 조건을 위반하거나 이동 노드의 상태를 유지할 수 없는 경우, "HierarchyRequestError" DOMException을 throw합니다.

node . querySelector(selectors)

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

node . querySelectorAll(selectors)

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

children getter 단계는, 컬렉션을 this에 루트로 두고, 요소 자식만을 포함하는 HTMLCollection을 반환합니다.

firstElementChild getter 단계는, 첫 번째 자식이 요소이면 반환, 아니면 null을 반환합니다.

lastElementChild getter 단계는, 마지막 자식이 요소이면 반환, 아니면 null을 반환합니다.

childElementCount getter 단계는, this의 자식 중 요소의 개수를 반환합니다.

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

1. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

2. node를 this의 첫 번째 자식 앞에 pre-insert합니다.

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

1. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

2. node를 this에 append합니다.

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

1. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

2. node를 this에 null 앞에 pre-insert 유효성 보장을 확인합니다.

3. 모두 교체를 node와 함께 this 내에서 실행합니다.

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

1. referenceChild를 child로 설정합니다.

2. referenceChild가 node이면, referenceChild를 node의 다음 형제로 설정합니다.

3. node를 this에 referenceChild 앞에 move합니다.

querySelector(selectors) 메서드 단계는, selectors를 this에 대해 scope-match a selectors string을 실행한 첫 번째 결과를 반환합니다. 결과가 빈 리스트면 null을 반환합니다.

querySelectorAll(selectors) 메서드 단계는, selectors를 this에 대해 scope-match a selectors string을 실행한 static 결과를 반환합니다.

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를 node 바로 앞에 삽입합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . after(...nodes)

nodes를 node 바로 뒤에 삽입합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . replaceWith(...nodes)

node를 nodes로 교체합니다. nodes 내의 문자열은 동등한 Text 노드로 변환됩니다.

트리 제약 조건을 위반하면 "HierarchyRequestError" DOMException을 throw합니다.

node . remove()

node를 제거합니다.

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

1. parent를 this의 부모로 설정합니다.

2. parent가 null이면 반환합니다.

3. viablePreviousSibling을 this의 첫 번째 앞선 형제 중 nodes에 포함되지 않은 것으로 설정합니다. 없으면 null.

4. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

5. viablePreviousSibling이 null이면 parent의 첫 번째 자식으로, 아니면 viablePreviousSibling의 다음 형제로 설정합니다.

6. node를 parent에 viablePreviousSibling 앞에 pre-insert합니다.

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

1. parent를 this의 부모로 설정합니다.

2. parent가 null이면 반환합니다.

3. viableNextSibling을 this의 첫 번째 이후 형제 중 nodes에 포함되지 않은 것으로 설정합니다. 없으면 null.

4. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

5. node를 parent에 viableNextSibling 앞에 pre-insert합니다.

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

1. parent를 this의 부모로 설정합니다.

2. parent가 null이면 반환합니다.

3. viableNextSibling을 this의 첫 번째 이후 형제 중 nodes에 포함되지 않은 것으로 설정합니다. 없으면 null.

4. node를 nodes와 this의 노드 문서로 노드들을 하나의 노드로 변환한 결과로 설정합니다.

5. this의 부모가 parent이면, replace로 this를 node와 함께 parent에서 교체합니다.

   this가 node에 삽입되었을 수도 있습니다.

6. 그 외에는 node를 parent에 viableNextSibling 앞에 pre-insert합니다.

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

1. this의 부모가 null이면 반환합니다.

2. Remove로 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에 해당하는 노드를 반환합니다. 노드는 트리 순서로 정렬됩니다.

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]

컬렉션에서 name과 ID 또는 name이 일치하는 첫 번째 요소를 반환합니다.

이 객체의 지원되는 프로퍼티 인덱스는 0부터 요소의 개수-1까지의 숫자입니다. 해당 요소가 없으면 지원되는 프로퍼티 인덱스가 없습니다.

length getter 단계는 컬렉션이 나타내는 노드의 개수를 반환합니다.

item(index) 메서드 단계는 컬렉션 내 index번째 요소를 반환합니다. 만약 index번째 요소가 없으면 null을 반환해야 합니다.

지원되는 프로퍼티 이름은 아래 단계에서 반환된 리스트의 값들입니다:

1. result를 빈 리스트로 설정합니다.

2. 컬렉션이 나타내는 각 element에 대해 트리 순서로:

   1. element가 ID를 가지고 있고, result에 없다면, element의 ID를 result에 추가합니다.

   2. element가 HTML 네임스페이스에 있고, name 특성이 있으며, value가 빈 문자열이 아니고 result에 없다면, element의 name 특성 value를 result에 추가합니다.

3. result를 반환합니다.

namedItem(key) 메서드 단계는:

1. key가 빈 문자열이면 null을 반환합니다.

2. 아래 중 하나라도 true인 컬렉션 내 첫 번째 요소를 반환합니다:

   • 해당 요소가 ID가 key인 경우
   • HTML 네임스페이스에 있고, name 특성이 있고, value가 key인 경우

   해당 요소가 없다면 null을 반환합니다.

4.3. 변이 옵저버(Mutation observers)

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

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

변이 옵저버 마이크로태스크를 큐에 등록(queue a mutation observer microtask)하려면 다음 단계들을 실행합니다:

1. 주변 에이전트(surrounding agent)의 변이 옵저버 마이크로태스크 대기가 true이면 반환합니다.

2. 주변 에이전트의 변이 옵저버 마이크로태스크 대기를 true로 설정합니다.

3. 마이크로태스크를 큐에 등록하여 마이크로태스크에서 변이 옵저버에게 알림(notify mutation observers)을 실행합니다.

변이 옵저버에게 알림(notify mutation observers)을 실행하려면 다음 단계들을 따릅니다:

1. 주변 에이전트의 변이 옵저버 마이크로태스크 대기를 false로 설정합니다.

2. notifySet을 복제(clone)된 주변 에이전트의 대기 중인 변이 옵저버로 설정합니다.

3. 비움(empty)으로 주변 에이전트의 대기 중인 변이 옵저버를 설정합니다.

4. signalSet을 복제(clone)된 주변 에이전트의 signal slots로 설정합니다.

5. 비움(empty)으로 주변 에이전트의 signal slots를 설정합니다.

6. 각 mo에 대해 notifySet에서 반복:

   1. records를 복제(clone)된 mo의 레코드 큐(record queue)로 설정합니다.

   2. 비움(empty)으로 mo의 레코드 큐(record queue)를 설정합니다.

   3. 각 node에 대해 mo의 노드 리스트(node list)에서, 모든 임시 등록 옵저버(transient registered observers) 중 observer가 mo인 것을 node의 등록 옵저버 리스트에서 제거합니다.

   4. records가 비어있지 않으면, 콜백 함수 호출(invoke)로 mo의 콜백(callback)에 « records, mo », "report"를 인자로 전달하고, 콜백 this 값을 mo로 설정합니다.

7. 각 slot에 대해 signalSet에서 반복, 이벤트 발생(fire event) 이름은 slotchange, bubbles 속성을 true로 하여 slot에서 발생시킵니다.

각 노드(node)는 등록 옵저버 리스트 (0개 이상의 리스트(list)로, 등록 옵저버가 포함됨)를 가지고 있으며, 초기값은 빈 리스트입니다.

등록 옵저버(registered observer)는 observer (MutationObserver 객체)와 옵션(options) (MutationObserverInit 딕셔너리)로 이루어집니다.

임시 등록 옵저버(transient registered observer)는 등록 옵저버에 source (등록 옵저버)가 추가된 것입니다.

임시 등록 옵저버(transient registered observers)는 노드의 자손(descendants)에 대한 변이를 추적하기 위해 사용됩니다. 노드가 제거된 뒤에도, subtree 가 노드의 부모(parent)에 대해 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 객체는 다음과 같은 연관 개념을 가집니다:

• 생성 시 설정되는 콜백(callback).
• 노드 리스트(node list) (약한 참조로 된 리스트로, 노드를 가리킴), 초기값은 빈 리스트입니다.
• 레코드 큐(record queue) (0개 이상의 MutationRecord 객체를 담는 큐(queue)), 초기값은 빈 큐입니다.

observer = new MutationObserver(callback)

MutationObserver 객체를 생성하고 콜백(callback)을 callback으로 설정합니다. callback은 첫 번째 인자로 MutationRecord 객체 리스트, 두 번째 인자로 생성된 MutationObserver 객체를 받아 호출됩니다. observe() 메서드로 등록된 노드에 변이가 발생한 후 호출됩니다.

observer . observe(target, options)

user agent에게 target (즉, 노드)을 관찰하고, options (객체)에 따라 변이를 보고하도록 지시합니다.

options 인자를 통해 객체의 멤버로 변이 관찰 옵션을 설정할 수 있습니다. 사용할 수 있는 멤버는 다음과 같습니다:

childList

target의 자식 변이를 관찰하려면 true로 설정합니다.

attributes

target의 속성(attributes) 변이를 관찰하려면 true로 설정합니다. attributeOldValue 또는 attributeFilter 가 명시되어 있으면 생략할 수 있습니다.

characterData

target의 data 변이를 관찰하려면 true로 설정합니다. characterDataOldValue 가 명시되어 있으면 생략할 수 있습니다.

subtree

target뿐만 아니라 target의 자손(descendants) 변이도 관찰하려면 true로 설정합니다.

attributeOldValue

attributes 가 true 또는 생략일 때, target의 속성(attribute) 변경 전 값을 기록하려면 true로 설정합니다.

characterDataOldValue

characterData 가 true 또는 생략일 때, target의 변경 전 data를 기록하려면 true로 설정합니다.

attributeFilter

모든 속성(attribute) 변이를 관찰하지 않아도 된다면, attributes 가 true 또는 생략일 때, 관찰할 속성의 지역 이름(local names) 리스트로 설정합니다.

observer . disconnect()

observer가 변이 관찰을 중단합니다. observe() 메서드를 다시 사용할 때까지 observer의 콜백(callback)은 호출되지 않습니다.

observer . takeRecords()

레코드 큐(record queue)를 비우고, 그 안에 있던 값을 반환합니다.

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

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

1. options["attributeOldValue"] 또는 options["attributeFilter"] 가 존재하고, options["attributes"] 가 존재하지 않으면, options["attributes"] 를 true로 설정합니다.

2. options["characterDataOldValue"] 가 존재하고, options["characterData"] 가 존재하지 않으면, options["characterData"] 를 true로 설정합니다.

3. options["childList"], options["attributes"], options["characterData"] 중 어느 것도 true가 아니면 TypeError를 throw합니다.

4. options["attributeOldValue"] 가 true이고 options["attributes"] 가 false이면 TypeError를 throw합니다.

5. options["attributeFilter"] 가 존재하고 options["attributes"] 가 false이면 TypeError를 throw합니다.

6. options["characterDataOldValue"] 가 true이고 options["characterData"] 가 false이면 TypeError를 throw합니다.

7. 각 target의 등록 옵저버 리스트의 registered에 대해, registered의 observer가 this인 경우:

   1. 각 this의 노드 리스트의 node에 대해, 임시 등록 옵저버(transient registered observers) 중 source가 registered인 것을 node의 등록 옵저버 리스트에서 제거합니다.

   2. registered의 옵션(options)을 options로 설정합니다.

8. 그 외의 경우:

   1. 새로운 등록 옵저버(registered observer)를 생성하여 observer를 this로, 옵션(options)을 options로 하여 target의 등록 옵저버 리스트에 추가합니다.

   2. 약한 참조로 target을 this의 노드 리스트에 추가합니다.

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

1. 각 this의 노드 리스트의 node에 대해, 등록 옵저버(registered observer) 중 this가 observer인 것을 node의 등록 옵저버 리스트에서 제거합니다.

2. this의 레코드 큐(record queue)를 비웁니다.

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

1. records를 복제(clone)된 this의 레코드 큐(record queue)로 설정합니다.

2. this의 레코드 큐(record queue)를 비웁니다.

3. records를 반환합니다.

4.3.2. 변이 레코드 큐잉

변이 레코드 큐에 등록(queue a mutation record)하려면 type 유형의 target에 대해 name, namespace, oldValue, addedNodes, removedNodes, previousSibling, nextSibling을 사용하여 다음 단계를 실행합니다:

1. interestedObservers를 빈 맵(map)으로 설정합니다.

2. nodes를 target의 포괄 조상(inclusive ancestors)으로 설정합니다.

3. nodes의 각 node에 대해, 그리고 각 node의 등록 옵저버 리스트의 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]가 존재하지 않으면, null로 설정합니다.

      3. type이 "attributes"이고 options["attributeOldValue"] 가 true이거나, type이 "characterData"이고 options["characterDataOldValue"] 가 true이면, interestedObservers[mo]를 oldValue로 설정합니다.

4. 각 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)의 대기 중인 변이 옵저버(pending mutation observers)에 추가합니다.

5. 변이 옵저버 마이크로태스크를 큐에 등록합니다.