주요 노드 프로퍼티

• DOM 노드는 일반 JS 객체이며 각 DOM 노드는 고유한 클래스에 속하고 클래스들은 계층 구조를 형성

• DOM 노드에서 지원하는 프로퍼티와 메서드는 계층 구조에서 어떤 클래스를 상속받느냐에 따라 결정됨

• EventTarget 루트에 있는 ‘추상 클래스’ (실제로 만들어지지 않음)로 모든 DOM 노드의 베이스 역할 하므로 DOM 노드에서 ‘이벤트’ 사용 가능

• Node 는 ‘추상’ 클래스로 DOM 노드의 베이스 역할. 주요 트리 탐색 기능 제공. 생성되지 않지만 이 클래스를 여러 클래스가 상속 받음

• 해당 객체들은 constructor/toString 프로퍼티로 DOM 노드 클래스 이름 확인가능하며 instanceof 사용해 상속 여부 확인 가능

• Element 는 DOM 요소를 위한 베이스 클래스로 요소 전용 탐색 기능, 요소 전용 검색 기능 제공. 브라우저에서 HTML/XML/SVG 클래스의 베이스 역할

• HTMLElement 는 HTML 요소의 베이스 역할을 하는 클래스이며 HTMLd 요소에 대응하는 클래스들이 상속 받음

• nodeType 프로퍼티는 요소 타입 알고 싶을 때 사용되며 각 노드 타입에 맞는 상수값 존재. 읽기 전용

• nodeName/tagName 은 node/요소(tag) 이름을 알아낼 때 사숑하며 XML 모드 제외하고 태그 이름은 항상 대문자로 변환되며 대상은 node/tag. 읽기 전용

• innerHTML 은 요소 안의 HTML 알아낼 수 있음. 프로퍼티 사용하면 요소 안의 HTML 수정 가능 (문자열은 ‘HTML 형태’형태로 함께 저장됨)

• outerHTML 은 요소 의 전체 HTML 알아낼 수 있으며 할당해도 요소 자체는 바뀌지 않고 새로운 HTML이 외부 컨텍스트에서 만들어지고 요소가 삭제된 자리 체움

• nodeValue/data 는 요소가 아닌 노드(텍스트, 주석 노드 등) 의 내용을 읽을 때 쓰이며 두 프로퍼티는 거의 동일하게 동작. 주로 data 많이 사용하는 편이며 할당해서 내용 수정 가능

• textContent 는 HTML에서 모든 태그 를 제외한 텍스트만 읽을 때 사용하며 할당 연산 시 태그를 포함한 모든 특수문자는 문자열로 처리. (원치않는 HTML이 사이트에 삽입되는 것 방지)

• hidden은 true/false로 CSS 에서 display: block/hidden 과 설정한 것과 동일하게 동작

• DOM 노드는 클래스에 따라 이 외에도 다양한 프로퍼티 가짐 (표준 HTML 속성은 대응하는 DOM 프로퍼티 가짐)