-
자바스크립트 DOM 조작(1)JS&React 2024. 8. 24. 12:24
- index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JavaScript에서 DOM 조작</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 id="title">Hello world!</h1> <div class="container"> <p>영역 1 입니다.</p> </div> <div class="container"> <p>영역 2 입니다.</p> </div> <script src="script.js"></script> </body> </html>- style.css
html { height: 100%; width: 100%; } .container { border: solid 1px #ccc; padding: 16px; margin: 8px; }
- script.js
// selector로 요소 얻기 // getElementById 사용 const title1 = document.getElementById("title"); console.log(title1); // querySelector 사용 const title2 = document.querySelector("#title"); console.log(title2); // 클래스명으로 엘리먼트 얻기 const containers = document.getElementsByClassName("container"); console.log(containers);
// querySelector는 가장 처음 일치한 요소를 반환하므로 한 개의 엘리먼트를 얻는다. const container = document.querySelector(".container"); console.log(container); // querySelectorAll은 여러 엘리먼트를 얻는다. 일치하는 엘리먼트를 모두 얻는다. const containers2 = document.querySelectorAll(".container"); console.log(containers2);
기존 프론트엔드 개발에서는 조작 대상이 무엇인지 명시적으로 지정할 필요가 있다. 그래서, id나 class, 태그명 및 계층 구조등을 사용해서 조작 대상 DOM을 얻어야만했다. 이는 버그를 쉽게 발생 시키는 요인이기도 했다.
- DOM 생성
// DOM 작성 // div 생성 const divEl = document.createElement("div"); console.log(divEl);
- DOM 추가
// DOM 추가 // div 아래 p 추가 // div 생성 const divEl2 = document.createElement("div"); // p 태그 생성 const pEl = document.createElement("p"); const h1El = document.createElement("h1"); // appendChile를 사용해 특정 엘리먼트 아래에 다른 엘리먼트를 추가할 수 있다. // 하위 요소의 맨 끝 요소를 추가하기 때문에 자녀 요소가 여러개 일 경우 가장 마지막에 차례대로 추가된다. divEl2.appendChild(pEl); divEl2.appendChild(h1El); console.log(divEl2); // 요소를 앞에 추가하고 싶을 때는 prepend를 사용한다. const divEl3 = document.createElement("div"); const pEl2 = document.createElement("p"); const h2El = document.createElement("h2"); // div 태그 아래 p 태그 추가(맨앞) divEl3.prepend(pEl2); // div 태그 아래 h2 태그 추가(맨앞) divEl3.prepend(h2El); console.log(divEl3); // 버튼 설정 const buttonEl = document.createElement("button"); // 버튼 라벨 설정 buttonEl.textContent = "버튼"; // 영역 1의 div 태그 열기 const divEl4 = document.querySelector(".container"); // div 태그 아래에 button 태그 추가 divEl4.appendChild(buttonEl); console.log(buttonEl);
- DOM 삭제
// DOM 삭제 // removechild 사용 const h1El2 = document.getElementById("title"); const bodyEl = document.querySelector("body"); // body 밑에 h1을 삭제 // bodyEl.removeChild(h1El2);
// 자식 요소 모두 삭제 할 때 textContent에 null 지정 bodyEl.textContent = null;
참고
모든 자바스크립트로 배우는 리액트 입문
'JS&React' 카테고리의 다른 글
리액트 기본 - Props (0) 2024.08.29 리액트 기본 - JSX, 컴포넌트, 이벤트와 스타일 (0) 2024.08.29 [기술 면접] 호이스팅의 문제점 (0) 2024.08.22 자바스크립트 기본 문법 복습 (7) 2024.08.21 React 설치 (0) 2024.07.03