자바스크립트에서 DOM 조작

자바스크립트를 이용한 DOM 액세스

• id를 지정해 요소 얻기
• 클래스명으로 엘리먼트 얻기
• querySelector를 이용한 엘리먼트 얻기
• querySelectorAll을 이용한 엘리먼트 얻기

//getElementById 사용
const title1 = document.getElementById("title1");
console.log(title1);

//querySelector 사용
const title2 = document.querySelector("#title");
console.log(title2);

위의 두 방식 모두 id를 지정해서 요소를 얻는 방법 입니다.
console.log()의 값을 확인하면 같은 값은 출력해주는 것을 확인할 수 있습니다.

querySelector는 () 안에 여러 셀렉터를 지정한 뒤 일치하는 첫 번째 요소를 반환합니다.

//getElementsByClassName 사용
const containers = document.getElementsByClassName("container");
console.log(containers);

//querySelector 사용
const containers2 = document.querySelector(".container");
console.log(containers2);

//querySelectorAll 사용
const containers3 = document.querySelectorAll(".container");
console.log(containers3);

getElementsByClassName은 지정한 클래스명을 가진 요소를 얻습니다.
container라는 클래스명을 가진 요소를 얻는데, 이는 마찬가지로 querySelector를 이용해서도 얻을 수 있습니다.

querySelectorAll을 사용하면 일치하는 엘리먼트를 모두 얻기 때문에 getElementsByClassName과 마찬가지로 여러 엘리먼트를 얻을 수 있습니다.

기존 프론트엔드 개발에서는 이와 같이 먼저 조작 대상이 무엇인지 명시적으로 지정할 필요가 있었습니다. 복잡한 환경에서 이는 곧 버그를 쉽게 발생시키는 요인이기도 했습니다

DOM 작성, 추가, 삭제

• DOM 작성 및 추가

//div 태그 생성 
const divEl = document.createElement("div");
console.log(divEl);

// p 태그 생성
const pEl = document.createElement("p");

// div 태그 아래 p 태그 추가 
divEl.appendChild(pEl);
console.log(divEl)

위와 같이 작성하면 div 와 p 태그를 생성할 수 있습니다.
그리고 p 태그의 위치를 설정 가능

appendChild나 prepend를 이용함으로써 특정 DOM 아래에 다른 DOM을 추가할 수 있습니다.

• DOM 삭제

// body 태그 얻기 
const bodyEl = document.querySelector("body");

// body 태그 아래부터 삭제
bodyEl.removeChild(h1El);

// body 태그 아래부터 모두 삭제
bodyEl.textContent = null;

삭제하는 경우에는 removeChild를 사용합니다. 특정 지정한 요소만 삭제할 수 있다는 것이 장점입니다. 반대로 모두 삭제하는 경우에는 textContent에 null을 지정해주면 됩니다.