DOM

DOM(Document Object Model)
HTML 내의 원하는 위치에 접근하기 위한 하나의 방식

프로그램이나 스크립트가 보다 효율적으로 문서의 내용, 구조, 모양 등에 접근해 갱신, 교체, 삭제하도록 도와준다

즉, 자바스크립트를 사용해서 동적으로 문서객체를 생성하거나 제어하는 것을 DOM 이라고 할 수 있다.

돔 트리(DOM Tree)
DOM 구조를 한눈에 알아복 쉽도록, 직관적으로 이해하기 쉽도록 나무모양의 그림으로 표현한 것이다.

자바스크립트 돔 조작
1) 돔 요소 생성

• HTML 문서 안에서 HTML 요소나 HTMLUnknowsElement 생성

let element = document.createElement(tagName);

2) 돔에 새로운 요소를 추가

• 상위 노드의 하위 리스트 제일 마지막에 노드 추가

• 만약 노드가 이미 존재한다면, 현재 상위 노드에서 제거되고 새로운 상위 노드에 추가?

let child = element.appendChild(child);

3) HTML 요소의 스타일 변경

• HTMLElement.style : element의 style 속성을 나타내는 객체

• window.getComputedStyle() : 하나의 요소에 적용된 모든 CSS 속성값 알아보기

element.style.color = '#ff3300';
element.style.marginTop = '30px';
element.style.paddingbottom = '30px';

4) HTML 요소를 접근하는 방법

• innerHtml : element 자손의 HTML 구문을 가져오거나 설정할 때 사용

let content = element.innerHTML;
otherElement.innerHTML = content;

5) class 이름에 접근하는 방법

• className : element의 class 속성에 접근할 수 있음

let cName = element.className;
otherElement.className = cName;

6) ID에 접근하는 방법

let idStr = element.id; //get id
otherElement.id = idStr; //set id

7) 돔 요소에 접근하는 방법

//id 이용한 접근
element = document.getElementById(id);

//class 이용한 접근
elements = document.getElementsByClassName(names);
elements = rootElement.getElementsByClassName(names);
//names 간 구분은 공백으로 함
//ie8 이하 버전에서 사용 불가능

//tag name 이용한 접근
let elements = document.getElementByTagName(name);