DOM(Document Object Model, 문서 객체 모델)은 웹페이지에 나타나는 HTML 문서를 객체로 표현한 것이다.
DOM을 통하여 HTML 요소에 접근할 수 있고 이를 여러 형태로 다룰 수도 있다.
DOM 접근하기
document 객체를 통하여 DOM에 접근할 수 있다.
document
console.log(document);콘솔창에 document를 출력해보면
다음과 같이 해당 페이지의 내용이 출력된다. document는 문서를 구성하고 있는 최상위 요소이기 때문이다.
console.log(typeof document);
물론 type은 객체이지만, 예외적으로 태그를 출력하는 것이다. 객체의 형식으로 보고 싶다면 console.dir 메소드를 사용하면 된다.
console.dir(document);
DOM의 구조
DOM은 트리 형태의 구조를 지니고 있다.
웹 프로그래밍을 할 떄 하나의 페이지는 여러 태그들로 구성되어 있고, 이 태그들은 상위 태그가 하위 태그들을 감싸는 구조로 이루어져있다. 이 형태를 트리의 형태로도 이해할 수 있다.
최상위 노드인 document 객체를 시작으로 html 태그, 그 밑으로 head 태그와 body 태그로 나뉘며 여러 자식 태그들로 나뉘어진 형태이다.
const myTag = document.querySelector('');
console.log(myTag.children);
console.log(myTag.firstElementChild); //자식의 첫 요소
console.log(myTag.lastElementChild); //자식의 마지막 요소
// 부모 요소 노드
console.log(myTag.parentElement);
// 형제 요소 노드
console.log(myTag.previousElementSibling);
console.log(myTag.nextElementSibling);하나의 노드(태그)에 접근하고 프로퍼티 속성을 통하여 다른 노드들에 접근할 수 있다.
값에 맞는 노드가 없다면 null이 출력된다.
요소 노드
일반적으로 태그를 표현하는 노드이다.
요소 노드 만들기
const node = document.createElement('li');
요소 노드 꾸미기
node.textContent = '내용 입력';
요소 노드 삽입하기
호출한 노드를 기준으로 요소 노드를 추가할 수 있다.
const testNode = document.querySelector('#test');
//자식 요소의 첫 부분
testNode.prepend(node);
//자식 요소의 끝 부분
testNode.append(node);
//형제 요소의 첫 부분
testNode.before(node);
//형제 요소의 끝 부분
testNode.after(node);
텍스트 노드
태그 안에 문자로 표현되는 텍스트 값이다.
일반적으로 텍스트 노드는 리프 노드가 된다. 즉 요소 노드의 자식 노드가 되며 텍스트 노드는 자식 노드를 지닐 수 없다.
