DOM

settings_applicationsEventTarget  >   settings_applicationsNode  >   settings_applicationsDocumentFragment  >   settings_applicationsShadowRoot

DOM

Editing
  • bug_report

Constructor

별도의 생성자를 가지고 있지 않으며 Element.prototype.attachShadow() 메소드로 새롭게 생성하여 반환받는다. 

설명

현재 문서에서 요소에게 호스트된 shadowRoot 객체를 참조하는 경우에는 Element.prototype.shadowRoot 프로퍼티를 사용한다.

구문

형식
element.attachShadow(options)

Prototype 체인

ShadowRoot

  • Properties

    • activeElement

      현재 섀도우 트리(shadow tree) 내의 포커스(focus) 있는 요소를 참조한다.

    • adoptedStyleSheets

      현재 섀도우(shadow) DOM 하위 트리에서 사용될 구성된 스타일시트 배열을 설정하거나 조회한한다.

    • delegatesFocus

      섀도우 루트의 포커스 위임 여부를 불리언(boolean)으로 조회한다.

    • fullscreenElement

      현재 전체 화면에 표시되는 섀도우 트리 내의 요소를 참조한다. 존재하지 않으면 null을 갖는다.

    • host

      ShadowRoot 객체가 연결된 DOM 요소에 대한 참조를 나타낸다.

    • innerHTML

      현재 섀도우 DOM 트리에 대한 참조를 변경하거나 조회한다.

    • mode

      섀도우 루트 DOM 트리 내부에 대한 스크립트에서의 접근 가능성 여부를 설정하거나 조회한다.

    • pictureInPictureElement

      현재 섀도우 DOM 트리에서 PIP 모드로 표시되는 요소를 참조한다. PIP 모드가 아닌 경우에는 null을 갖는다.

    • pointerLockElement

      현재 섀도우 DOM 트리에서 포인터가 잠겨 있는 동안 마우스 이벤트의 대상으로 설정된 요소를 참조한다.

    • slotAssignment

      Element.prototype.attachShadow() 메소드를 호출시 지정한 slotAssignment 값을 나타내는 섀도우 DOM 트리에 대한 슬롯(slot) 할당 모드를 조회한다.

    • styleSheets

      섀도우 DOM 트리에 명시적으로 연결되거나 포함된 스타일시트를 나타내는 CSSStyleSheet 객체의 자료형인 StyleSheetList 객체를 참조한다.

  • Methods

    • getAnimations()

      현재 섀도우 DOM 트리 하위에서 유효한 애니메이션에 대한 Animation 객체를 항목으로 갖는 배열을 반환한다.

DocumentFragment

  • Properties

    • childElementCount

      DocumentFlagment 객체의 하위 요소의 갯수를 조회한다.

    • children

      DocumentFragment 객체의 모든 하위 요소를 포함하는 라이브(live) 상태의 HTMLCollection 객체로 반환한다.

    • firstElementChild

      DocumentFragment 객체의 첫 번째 하위 요소를 참조한다. 존재하지 않는 경우에는 null을 갖는다.

    • lastElementChild

      DocumentFragment 객체의 마지막 하위 요소를 참조한다. 존재하지 않는 경우에는 null을 갖는다.

  • Methods

    • append()

      DocumentFragment 객체의 마지막 요소 뒤에 새로운 Node 객체 또는 문자열 세트를 삽입한다.

    • getElementById()

      현재 DocumentFragment 객체의 하위 요소를 대상으로 지정된 id 애트리뷰트와 일치하는 요소를 반환한다.

    • prepend()

      DocumentFragment 객체의 첫 번째 요소 앞에 새로운 Node 객체 또는 문자열 세트를 삽입한다.

    • querySelector()

      DocumentFragment 객체의 하위 Element 객체를 대상으로 지정된 CSS 선택기 세트와 첫 번째로 일치하는 요소를 반환한다.

    • querySelectorAll()

      DocumentFragment 객체의 Element 객체를 대상으로 지정된 CSS 선택기 세트와 일치하는 모든 요소를 NodeList로 반환한다.

    • replaceChildren()

      DocumentFragment 객체의 기존 하위 노드를 지정된 새 노드로 대체한다.

Node

  • Properties

    • baseURI

      기본 URL을 조회한다.

    • childNodes

      현재 노드의 자식 노드 집합체 NodeList를 라이브(live)로 참조한다.

    • firstChild

      첫 번째 자식 노드를 참조한다. 존재하지 않는 경우 null을 갖는다.

    • isConnected

      노드가 컨텍스트(Document) 객체에 직접 또는 간접적으로 연결되어 있는지에 대한 불리언(boolean) 값을 가지고 있다.

    • lastChild

      마지막 자식 노드를 참조한다. 존재하지 않는 경우 null을 갖는다.

    • nextSibling

      순서에 따라 현재 노드의 다음 형제 노드를 참조한다. 더 이상의 노드가 조회되지 않는 경우에는 null을 갖는다.

    • nodeName

      노드의 이름을 조회할 수 있다.

    • nodeType

      노드 유형을 조회할 수 있다.

    • nodeValue

      노드의 값을 조회하거나 설정할 수 있다.

    • ownerDocument

      현재 노드의 최상위 document 객체를 참조한다.

    • parentElement

      현재 노드의 부모 요소(element)를 참조한다. 부모 요소가 없거나 부모가 DOM 요소가 아닌 경우에는 null을 갖는다.

    • parentNode

      현재 노드의 부모 노드를 참조한다.

    • previousSibling

      순서에 따라 현재 노드의 이전 형제 노드를 참조한다. 더 이상의 노드가 조회되지 않는 경우에는 null을 갖는다.

    • textContent

      현재 노드와 하위의 텍스트 콘텐츠를 조회하거나 설정한다.

  • Methods

    • appendChild()

      지정된 노드(node) 객체를 자식 노드로 끝에 추가한다.

    • cloneNode()

      노드를 새로운 노드로 복사한다.

    • compareDocumentPosition()

      현재 노드를 기준으로 지정된 노드의 위치를 문서 내 다른 노드와 비교하여 기본적으로 정의된 값을 반환한다.

    • contains()

      현재 노드가 지정된 노드를 포함하고 있는지를 확인하여 그 결과를 불리언(boolean)으로 반환한다.

    • getRootNode()

      현재 노드의 루트를 반환하며 사용 가능한 경우 섀도우 루트(shadow root)를 선택적으로 반환한다.

    • hasChildNodes()

      현재 노드에 대한 자식 노드의 존재 여부를 불리언(boolean)으로 반환한다.

    • insertBefore()

      지정된 새 자식 노드를 지정된 기존 자식 노드 앞에 추가한다. 새로운 자식 노드가 기존 노드인 경우에는 위치가 이동된다.

    • isDefaultNamespace()

      네임스페이스 URI를 인수로 받아 지정된 네임스페이스가 현재 노드의 기본 네임스페이스인 경우 true, 그렇지 않은 경우 false를 반환한다.

    • isEqualNode()

      지정된 노드와 동일한지를 테스트하고 그 결과를 불리언(boolean)으로 반환한다.

    • isSameNode()

      현재 노드가 지정된 노드와 같은지(=== 연산자와 동일)에 대한 여부, 즉 동일한 객체를 참조하는지를 테스트하여 그 결과를 불리언(boolean)으로 반환한다.

    • lookupNamespaceURI()

      현재 노드에서 지정된 프리픽스(prefix)와 일치하는 네임스페이스를 반환한다.

    • lookupPrefix()

      지정된 네임스페이스 URI가 있는 경우 해당 접두사가 포함된 문자열을 반환하고 그렇지 않은 경우 null을 반환한다.

    • normalize()

      현재 노드와 모든 하위 트리를 정규화된 형식으로 변환한다.

    • removeChild()

      자식 노드를 제거하고 제거된 노드를 반환한다.

    • replaceChild()

      현재 노드에서 지정된 기존 자식 노드를 새로운 노드로 대체한다.

EventTarget

  • Methods

    • addEventListener()

      EventTarget 인터페이스를 상속받는 하위 요소들의 이벤트 리스너(Listener)를 등록한다. Window 객체도 포함된다.

    • dispatchEvent()

      사용자가 생성한 이벤트를 전달한다. 코드에 의한 이벤트 트리거(trigger)에 사용된다.

    • removeEventListener()

      등록된 이벤트를 제거한다. 이벤트 타입, 등록된 함수, 등록시 제공했던 다양한 옵션과 일치된 경우에 이벤트를 제거한다.

Object

  • Methods

    • hasOwnProperty()

      객체가 특정 프로퍼티를 가지고 있는지를 블린(boolean) 값으로 반환한다.

    • isPrototypeOf()

      해당 객체가 다른 객체의 프로토타입 체인에 속한 객체인지를 체크한다.

    • propertyIsEnumerable()

      매개 변수의 속성이 열거가능(enumerable)한지 여부를 체크한다.

    • toLocaleString()

      객체를 나타내는 문자열을  작동하는 지역(locale)의 방식으로 출력이 된다.

    • toString()

      객체를 나타내는 문자열을 반환한다.

    • valueOf()

      객체의 원시(primitive) 값을 반환한다.

  • Properties

    • constructor

      객체의 생성자 함수를 참조한다.

    • __proto__

      상속된 [[Prototype]] 참조하거나 설정가능하며 일반적으로 실제 코드상에서는 잘 사용되지 않는다. ECMAScript에서 사용되지 않는 비표준이지만 최신 웹브라우저에서는 비공식적으로 지원하고 있다. 따라서 곧 표준 속성으로 지원될 확률이 높다.

      현재는 표준 사양에 명시되었다.

지원 웹브라우저