🌟 DOM (Document Object Model) 문서 객체 모델
웹 페이지에 나타나는 HTML문서 전체를 객체로 표현한 모델이다. document 객체가 웹문서의 최상단 객체로 진입점의 역할을 한다. document객체를 사용하면 웹페이지 내부의 무엇이든 수정할 수 있고, 새로운 컨텐츠를 만들 수도 있다. DOM 개념에 따르면 문서내의 모든 태그들은 각각의 객체라고 본다.
📒 console.dir()
대부분의 브라우저에 있는 개발자 도구는 console.log와 console.dir 메소드를 지원한다. 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 한다. 이 둘의 차이점에 대해서 알아보자.
1. 출력하는 자료형이 다르다.
각 값을 출력할 때 dir 메소드는 문자열 표시 형식으로 콘솔에 출력한다.
2. log는 값 자체, dir은 객체의 속성
log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력한다.
dir 메소드가 출력한 부분을 자세히 보면 객체의 유형이 먼저 출력되고, 특히 함수 부분에서는 클릭해서 펼쳤을 때 함수가 가진 속성들을 더 보여주는 모습을 확인할 수 있다.
3. log는 여러 개, dir은 하나만
둘 사이의 차이는 파라미터로 전달할 수 있는 값을 개수에도 있다. log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력하는 반면, dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력한다.
4. DOM 객체를 다룰 때
log와 dir메소드의 가장 큰 차이는 DOM 객체를 다룰 때 나타난다. 값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력하고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력한다.
콘솔에서 값 자체를 확인하고 싶다면 log 메소드를, 객체의 속성들을 살펴보고 싶다면 dir 메소드를 활용하면 좋다.
🌟 DOM tree
document 객체를 최상위로 해서 똑같이 계층 구조를 이루고 이것을 나무에 비유해서 DOM tree라고 한다. 각 객체를 노드(Node) 라고 부르는데, 각 노드간의 관계를 부모노드(Parent node)와 자식노드(Child node), 형제노드(Sibling node) 라고 부른다.
DOM tree에 표현되는 노드는 다양한 타입이 있다. 이를 노드 타입 (Node Type) 이라고 하는데 대표적으로 태그를 표현하는 노드를 요소 노드(Element node)라고 부른다. 문자를 표현하는 표현하는 노드는 텍스트 노드(Text node) 라고 한다.
일반적으로 텍스트 노드들은 요소 노드들의 자식 노드가 되고, 그 스스로는 자식 노드를 가질 수 없다. 노드 타입은 12가지 정도가 있지만 대부분은 요소노드와 텍스트 노드로 구성되기 때문에 이 두 가지는 꼭 기억해야한다.
🌟 원하는 태그 선택하는 방법
Dom을 이용하면 웹문서 편집을 쉽게 할 수 있다. 컨텐츠를 추가 삭제하려면 가장 먼저 내가 다루려고 하는 노드를 잘 선택할 수 있어야 한다.
document 객체 사용
const myTag = document.querySelector('#content');
console.log(myTag);
// 형제 요소 노드
console.log(myTag.previousElementSibling); // 이전 형제 요소를 선택하는데 없으면 null 출력
console.log(myTag.nextElementSibling);// 다음 형제 요소를 선택하는데 없으면 null 출력
// 부모 요소 노드
console.log(myTag.parentElement); // 'content' 태그의 부모 요소가 선택된다.
// 자식 요소 노드
console.log(myTag.children); // HTMLCollection 출력되고 컨텐츠의 자식요소들이 선택된다.
console.log(myTag.children[1]); // 대괄호 표기법으로도 선택이 가능하다.
console.log(myTag.firstElementChild); // 해당 요소의 가장 첫번째 요소 선택
console.log(myTag.lastElementChild); // 해당 요소의 가장 마지막 요소 선택
// 서로 연결해서도 찾을 수 있다.
console.log(myTag.parentElement.nextElementSibling); // 부모요소의 형제요소를 찾는다.