[DOM] Document 노드, Element 노드

jangws·2022년 2월 20일
0

DOM

목록 보기
3/5
post-thumbnail

Document 노드

  • HTMLDocument 생성자(document로부터 상속됨)는 DOM 내에 DOCUMENT_NODE(ex, window.document)를 생성한다.
  • Document 및 HTMLDocument 생성자는 보통 HTML 문서를 로드 시 브라우저에 의해 인스턴스가 만들어진다.

document 속성

  • document.doctype은 <!DOCTYPE>을 참조한다.
  • document.documentElement<html>을 참조한다.
  • document.activeElement를 사용하면, 문서 내에서 포커스되어 있거나 활성 상태인 노드에 대한 참조를 얻을 수 있다.
  • document.hasFocus() 메서드를 사용하면, 사용자가 현재 해당 HTML 문서가 로드된 창에 포커스를 두고 있는지 여부를 알 수 있다(return boolean).
  • document.defaultView 속성은 최상위/전역 객체(브라우저에서 window 개체)를 가리킨다.

Element 노드

HTML*Element

  • HTML 문서 내의 각 element들은 고유한 성질을 가진다.
  • DOM에서 각 element가 고유한 Javascript 인터페이스/생성자를 통해 만들어진다. 예를 들어, <a> element는 HTMLAnchorElement() 생성자를 통해 DOM 노드로 만들어진다.
  • HTML*Element는 HTMLElement, Element, Node, Object로부터 속성 및 메서드를 상속받았다.
  • HTML*Element 인터페이스/생성자 전체 목록은 다음 링크에서 확인할 수 있다.
    https://html.spec.whatwg.org/multipage/indices.html#elements-1

Element의 속성과 메서드

  • Element 노드는 브라우저가 HTML 문서를 해석해서 문서 콘텐츠를 기반으로 대응되는 DOM을 만들 때 인스턴스화된다.
  • attributes 속성을 통해 Element의 Attribute 노드의 유사 배열 컬렉션을 얻을 수 있다.
  • Attribute의 값을 획득,설정,제거하려면 getAttribute(), setAttribute(), removeAttribute() 메서드를 사용할 수 있다.
  • hasAttribute()메서드를 사용하여 Element가 특정 attribute를 가지고 있는지 확인할 수 있다.
  • Class Attribute 값 리스트를 얻기 위해 classList속성을 사용할 수 있고, 이는 유사 배열 컬렉션이다. 읽기 전용이지만 add(), remove(), contains(), toggle() 메서드를 사용해서 변경할 수 있다. 참고로 className 속성은 공백으로 구분된 문자열 값을 반환한다.
  • dataset 속성은 element에서 data-로 시작하는 모든 attribute를 가진 개체를 제공해준다. dataset은 data attribute들의 camelCase 버전을 갖는다. 예를 들어 data-hello-marco에서 하이픈(-)은 cameCasing으로 대체되어 element.dataset.helloMarco가 된다. DOM에서 data- attribute를 제거하려면, dataset 속성에 대해 delete 연산자를 사용하면된다(delete element.dataset.helloMarco).

Element 노드 선택

특정 Element 노드 참조 얻기

  • querySelector()getElementById() 메서드를 사용할 수 있다.
  • querySelector() 메서드는 CSS Selector 문법 형식의 매개변수를 받는다. 예를 들어, #score>tbody>tr>td:nth-of-type(2)를 전달하면 해당 단일 element의 참조를 얻는다. 그리고 selector를 기반으로 문서 내에서 발견되는 첫 번째 노드 element를 반환한다.

Element 노드 리스트를 선택하고 생성

  • querySelectorAll(), getElementsByTagName, getElementsByClassName() 메서드를 사용하여 NodeList를 생성한다(childNodes 속성도 이들처럼 NodeList를 반환한다).
  • element 노드에서 children 속성을 사용하면, element 노드의 직계 자식 노드 전체 리스트(HTMLCollection)을 얻는다. children은 element가 아닌 노드(ex, text노드, comment노드)는 제외된다.
  • 사전에 구성되어 있는 Element 노드 선택하는 유사 배열 리스트가 다음과 같이 존재한다. document.all, document.forms, document.images, document.links, document.scripts, document.styleSheets
  • 인라인 CSS 스타일은 element 노드 개체에 존재하는 style 개체의 속성으로 각자 표현될 수 있다. style개체에 포함된 속성명에는 CSS 속성명에서 일반적으로 사용되는 하이픈(-)이 포함되지 않고, camelCase로 변환되어 있다. (ex, backgorund-color는 backgroundColor이다.) 또한 측정 단위가 있는 CSS 속성은 적절한 단위를 포함해야 한다(ex, style.width = '300px';)

0개의 댓글