DOM(Document Object Model)
HTML 내의 원하는 위치에 접근하기 위한 하나의 방식
프로그램이나 스크립트가 보다 효율적으로 문서의 내용, 구조, 모양 등에 접근해 갱신, 교체, 삭제하도록 도와준다
즉, 자바스크립트를 사용해서 동적으로 문서객체를 생성하거나 제어하는 것을 DOM 이라고 할 수 있다.
돔 트리(DOM Tree)
DOM 구조를 한눈에 알아복 쉽도록, 직관적으로 이해하기 쉽도록 나무모양의 그림으로 표현한 것이다.
자바스크립트 돔 조작
1) 돔 요소 생성
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 요소를 접근하는 방법
let content = element.innerHTML;
otherElement.innerHTML = content;
5) 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);