[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`	클래스 없으면 추가, 있으면 삭제

---

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