본문 바로가기

Javascript/DOM과 HTML 제어

DOM 노드와 속성의 이해

반응형

DOM 은 노드(Node)들이 트리 형태로 구조화 된 데이터 표현입니다.


노드는 DOM 트리를 구성하는 최소한의 단위이며, 기본 요소입니다.


HTML 페이지를 DOM 으로 표현할 때는 HTML 태그 말고도 다른 여러가지 타입의 노드들이 생성됩니다.


노드는 여러가지 타입으로 종류가 구분되어 있어 각각의 용도에 맞게 타입이 지정됩니다.

DOM 은 HTML 과 XML 을 위한 데이터 구조 표현이기 때문에 XML 전용인 노드 타입 또한 여러가지가 있습니다.


노드 타입별 HTML 용도는 다음과 같습니다.


노드 타입

HTML 용도

상수 값

ELEMENT_NODE

<body>, <a>, <div>, <style>, <script>, <h1>, <span>

1

ATTRIBUTE_NODE 

id="myelement", class="align-right", width='300'

2

TEXT_NODE

텍스트 문자열 노드, HTML 페이지 안의 모든 텍스트

3

CDATA_SECTION_NODE


4

ENTITY_REFERENCE_NODE


5

ENTITY_NODE


6

PROCESSING_INSTRUCTION_NODE

 

COMMENT_NODE

<!-- 코멘트표시 -->

DOCUMENT_NODE

document 루트 노드(DOM 루트 노드)

DOCUMENT_TYPE_NODE

<!doctype html>

10 

DOCUMENT_FRAGMANE_NODE

노드를 묶음 처리하는 용도로 사용하는 빈 노드

11 

NOTATION_NODE

 

12 



HTML 페이지에서 가장 중요한 노드 타입은 ELEMENT_NODE, ATTRIBUTE_NODE 입니다.

이 두 노드는 태그와 태그의 속성을 담는 노드로 HTML DOM 표현의 근간이 됩니다.


자바스크립트로 DOM을 탐색하거나 화면에 표시되는 태그를 조작할 때 선택하는 노드가 주로 이 2가지 노드입니다.


자바스크립트로 HTML DOM을 탐색할 때, HTML 태그와 DOM 노드는 1:1로 매칭되지 않습니다.

예를 들어 DOM의 인접한 다음 노드를 얻는 nextSibling() 메서드로 현재 태그의 다음 노드를 얻는다고 해서 이 노드가 인접한 다음 태그가 된다는 보장은 없습니다.

그래서 자바스크립트 DOM 탐색 메서드 중에는 태그 노드만 탐색할 수 있는 메서드를 추가로 제공합니다.




프로퍼티(Property)와 어트리뷰트(Attribute) 속성의 이해


프로퍼티((Property)와 어트리뷰트(Attribute)는 한글로 모두 속성이지만, 그 적용 대상은 다릅니다.

DOM의 속성은 프로퍼티(Property)입니다.

HTML 태그의 속성은 어트리뷰트(Attribute)입니다.


웹브라우저가 HTML 페이지를 읽어 DOM을 생성할 때, HTML 태그의 속성(어트리뷰트)(들)을 읽어 파싱(Parsing)을 합니다.

속성이 HTML 표준 속성이면 DOM에도 동일한 속성(프로퍼티)이 만들어집니다.

표준 속성인 경우, HTML 어트리뷰트와 DOM 프로퍼티는 속성 값 또한 공유합니다.


HTML 태그의 속성이 표준 속성이 아닌 경우, DOM 프로퍼티는 생성되지 않습니다.

이 경우 HTML 태그의 비표준 속성은 사용자 커스텀 속성(어트리뷰트)이 됩니다.


반대의 경우, 자바스크립트로 DOM 노드에 사용자 정의 속성이나 메서드를 추가할 수 있습니다. 

DOM에 추가한 커스텀 속성(프로퍼티)은 DOM에서만 접근 가능한 속성이 되며, HTML 속성(어트리뷰트)은 생성되지 않습니다.

생성된 DOM 속성은 DOM 노드 객체의 속성이 되며, 객체의 속성 접근 방식으로 접근이 가능합니다.


document.getElementById('elem').myproperty = 'prop';

console.log(document.getElementById('elem'));


자바스크립트의 어트리뷰트 속성 메서드를 사용하면 HTML 태그의 비표준 속성을 포함해 모든 HTML 태그의 속성을 제어할 수 있습니다.


HTML 어트리뷰트 지원 메서드


element.hasAttribute(속성이름) - 속성이 있는지 확인

element.getAttribute(속성이름) - 속성값 얻기

element.setAttribute(속성이름, 속성값) - 속성값 변경

element.removeAttribute(속성이름) - 속성 제거

element.attributes() - 전체 속성의 컬렉션 반환


속성 이름은 대소문자를 구분하지 않습니다. 따라서 대문자를 포함한 속성이름을 인자로 사용해도 실제 속성이름은 모두 소문자로 변환되어 적용됩니다.


HTML 어트리뷰트와 DOM 프로퍼티는 몇가지 예외적인 속성이 있습니다. 

HTML의 클래스 정의 속성은 "class" 지만, DOM의 속성은 className 입니다.

속성 값은 공유합니다.


DOM 속성 값은 element.className 으로 가져오지만, HTML 속성값은 element.getAttribute('class') 로 가져옵니다.

속성 값은 공유되므로 어느것을 수정해도 동시에 적용됩니다.


let elem = document.getElementById('elem') ;

console.log(elem.outerHTML); //HTML 태그 출력

//info 어트리뷰트와 프로퍼티 출력
console.log('elem.getAttribute("Info"): ' + elem.getAttribute('Info')); // myDiv
console.log('elem.info: ' + elem.info); // undefined 

//attr 어트리뷰트 추가
elem.setAttribute('Attr'123);
console.log('elem.attr: ' + elem.attr); // undefined

//클래스 속성 wide 추가
elem.setAttribute('class''wide');
console.log('elem.className: ' + elem.className); // wide

//클래스 속성 narrow 로 변경
elem.className = 'narrow';
console.log('elem.getAttribute("class"): ' + elem.getAttribute('class')); // narrow

// DOM 프로퍼티 newproperty 추가
elem.newproperty = 'New Property';
console.log('elem.newproperty: ' + elem.newproperty); // New Property
console.log(elem.getAttribute('newproperty')); // null

//태그 HTML 출력
console.log(elem.outerHTML);

//어트리뷰트 출력
for (let attr of elem.attributes) {
    console.log`${attr.name} = ${attr.value}` );
}


반응형

닫기