DOM 제어

Document Object Model

document객체는 웹페이지를 의미, html요소에 접근할 때 document로 시작
html요소를 선택, 생성, 이벤트 추가 등을 한다.

html요소 선택

document.querySelector() 	해당 요소를 1개 선택, css에서 html요소를 불러오는 것처럼 사용
document.querySelectorAll()	해당 요소를 모두 선택
document.getElementById() 해당 id의 요소를 선택
document.getElementClassName() 해당 class의 요소를 선택
document.getElementsByTagName() 해당 tag의 요소를 모두 선택

document.querySelectorAll()으로 여러 수의 요소를 선택 했을 때 위에서 부터 순서대로 배열 형태로 불러올 수 있다. ex)const div = document.querySelectorAll('div')[num];

hmtl요소 생성

createElement(Element) : Element 생성, 그 후 appendChild()로 추가해줘야 함
appendChild(Element) : 선택한 Element의 자식 Element 마지막에 추가
remove() : 선택된 Element 삭제
removeChild(삭제할 Element) : 선택된 Element의 자식 Element 삭제
firstChild/lastChild : first면 첫번째, last면 마지막 자식 Element 반환

---

좀더 정리해봄
https://velog.io/@oeng1211/JS-html%EC%9A%94%EC%86%8C-%EC%84%A0%ED%83%9D-window-DOM-JS%EC%97%90%EC%84%9C-%ED%83%9C%EA%B7%B8-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EC%83%9D%EC%84%B1

---

html요소 선택2

.previousElementSibling; 선택된 요소의 이전요소 선택
.nextElementSibling;   선택된 요소의 다음요소 선택
.parentElement;   선택된 요소의 부모요소 선택
.firstElementChild;   선택된 요소의 첫번째 자식요소 선택
.lastElementChild;   선택된 요소의 마지막 자식요소 선택

.getAttribute("href"); 특정태그가 갖고있는 속성의 속성값을 가져온다.