[JavaScript] DOM트리와 요소 다루기

window 객체

window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.

어느 곳에서나 항상 접근할 수 있는 객체이기에 전역 객체, Global Object라 하며, 어떤 프로퍼티나 메소드를 사용하든 전역 객체 내부의 것이기 때문에 앞에 window. 생략할 수 있다.

---

DOM

DOM이란 Document Object Model의 약자로 문서 객체 모델이다.

웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이며, 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.

---

자바스크립트로 태그 선택 방법

메소드	결과
document.getElementById('id')	id에 해당하는 태그 하나
document.getElementByClassName('class')	class에 해당하는 태그 모음 (HTML Collection - 유사 배열)
document.getElementByTagName('tag')	tag에 해당하는 태그 모음 (HTML Collection - 유사 배열)
document.querySelector('css')	css 선택자에 해당하는 태그 중 가장 첫 번째 태그 하나
document.querySelectorAll('css')	css 선택자에 해당하는 태그 모음 (NodeList - 유사 배열)

---

DOM 이동 시 활용 가능한 프로퍼티

프로퍼티	결과
element.children	element의 자식 요소 모음 (HTML Collection - 유사 배열)
element.firstElementChild	element의 첫 번째 자식 요소 하나
element.lastElementChild	element의 마지막 자식 요소 하나
element.parentElement	element의 부모 요소 하나
element.previousElementSibling	element의 이전, 좌측에 있는 요소 하나
element.nextElementSibling	element의 다음, 우측에 있는 요소 하나

---

주요 요소 노드 프로퍼티

프로퍼티	결과
element.innerHTML	요소 안의 정보를 확인할 수 있고, 내부의 HTML 자체를 수정할 때 자주 활용
element.outerHTML	새로운 값을 할당하면 요소 자체가 교체되어 버림
element.textContent	HTML태그를 쓰더라도 모두 텍스트로 처리됨

---

요소 노드 다루기

1. 요소 노드 생성 : document.createElement('태그이름')

2. 요소 노드 추가, 이동 : element.prepend, element.append, element.after, element.before

3. 요소 노드 삭제 : element.remove()

---

HTML 속성

1. 속성에 접근 : element.getAttribute('속성')

2. 속성 추가(수정) : element.setAttribute('속성', '값')

3. 속성 제거 : element.removeAttribute('속성')

---

classList 메서드

메소드	내용
classList.add	클래스 추가
classList.remove	클래스 삭제
classList.toggle	클래스 없으면 추가, 있으면 삭제

---

이 글은 내용을 축소하여 정리한 것으로 일부 정보가 누락되었을 수 있음.