document.doctype
은 <!DOCTYPE>을 참조한다.document.documentElement
는 <html>
을 참조한다.document.activeElement
를 사용하면, 문서 내에서 포커스되어 있거나 활성 상태인 노드에 대한 참조를 얻을 수 있다.document.hasFocus()
메서드를 사용하면, 사용자가 현재 해당 HTML 문서가 로드된 창에 포커스를 두고 있는지 여부를 알 수 있다(return boolean).document.defaultView
속성은 최상위/전역 객체(브라우저에서 window 개체)를 가리킨다.<a>
element는 HTMLAnchorElement() 생성자를 통해 DOM 노드로 만들어진다. attributes
속성을 통해 Element의 Attribute 노드의 유사 배열 컬렉션을 얻을 수 있다.getAttribute(), setAttribute(), removeAttribute()
메서드를 사용할 수 있다. hasAttribute()
메서드를 사용하여 Element가 특정 attribute를 가지고 있는지 확인할 수 있다.classList
속성을 사용할 수 있고, 이는 유사 배열 컬렉션이다. 읽기 전용이지만 add(), remove(), contains(), toggle() 메서드를 사용해서 변경할 수 있다. 참고로 className
속성은 공백으로 구분된 문자열 값을 반환한다.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를 반환한다).children
속성을 사용하면, element 노드의 직계 자식 노드 전체 리스트(HTMLCollection)을 얻는다. children은 element가 아닌 노드(ex, text노드, comment노드)는 제외된다. document.all
, document.forms
, document.images
, document.links
, document.scripts
, document.styleSheets
style
개체의 속성으로 각자 표현될 수 있다. style
개체에 포함된 속성명에는 CSS 속성명에서 일반적으로 사용되는 하이픈(-)이 포함되지 않고, camelCase로 변환되어 있다. (ex, backgorund-color는 backgroundColor이다.) 또한 측정 단위가 있는 CSS 속성은 적절한 단위를 포함해야 한다(ex, style.width = '300px';)