DOM 이해하기
DOM이란?
Document Object Model
HTML에 접근해서 자바스크립트 객체처럼 HTML을 조작할 수 있다는 의미
=> 웹페이지가 단순히 보여지는 것 이상으로 다양한 기능을 작동하게 만들 수 있다.
ex) 반복문과 조건문, 배열 객체 등을 활용해서 새로운 정보를 저장하거나 분류하는 작업 등
DOM 조회하기
자식 엘리먼트 찾기
ex ) document.body.children
부모 엘리먼트 찾기
ex)
let child = document.querySelector('.child');
let parent1 = child.parentElement;
let parent2 = child.parentNode;parentElemnt와 parentNode의 차이점
parentElement: 태그만 찾는다parentNode: 빈 공간까지 포함한다.
DOM 순회하기
id의 이름이 nav인 div 엘리먼트를 포함해서 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하기수도코드로 작성해보기
nav의 class 이름을 console.log로 확인하기
nav의 자식 엘리먼트가 있는 지 검색하기
nav의 첫번째 자식 엘리먼트의 class 이름을 console.log 한다.
있을 경우(nav-child), nav-child의 자식 엘리먼트가 있는 지 검색한다
...
없을 경우 nav의 두 번째 자식 엘리먼트의 class 이름을 console.log 한다.
DOM 조작하기
DOM으로 자바스크립트를 조작하여 HTML element를 추가하거나 삭제, 혹은 내용을 변경한다.
createElement - CREATE
querySelector, querySelectorAll - READ
textContent, id, classList, setAttribute - UPDATE
remove, removeChild, innerHTML = "", textContent = "" - DELETE
appendChild = APPEND
innerHTML과 textContent의 차이
추가로 학습해보기
- element와 node의 차이
:node는 태그 노드와 텍스트 노드 전체
element는 텍스트 노드를 제외한 태그 - children과 childNodes의 차이
:children(텍스트 노드 제외)
childNodes(텍스트 노드 포함) - remove와 removeChild의 차이
:remove(): 노드를 메모리에서 삭제하고 종료
removeChild(): 해당 노드는 메모리에 그대로 존재하며 부모 노드와의 부모-자식관계를 끊어 DOM트리에서 해제 - 같은 엘리먼트를 appendChild하면 기존 엘리먼트를 복사할까?
<div class = "a">
<span></span>
</div>
<div class = "b"></div>const span = document.querySelector('span');
const divB = document.querySelector('.b');: 정답> 복사되지 않고 '이동'한다.
기존 노드에 대한 참조인 경우 현재 위치에서 새 위치로 이동
- 좌표 정보 조회(offsetTop)
- 크기 정보 조회(offsetWidth)
