[DOM] Document 노드, Element 노드

Marco·2022년 2월 20일

DOM

목록 보기

3/5

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

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

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 노드는 브라우저가 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).

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

블로그 이사 🚚 https://wonsss.github.io/