[JS] DOM API

2024-01-08 4 분 소요

《 DOM 》에 이어 작성하는 글입니다.

1. DOM API 개요

① 저번 포스팅에서 “DOM은 HTML 문서의 구조를 “DOM 트리”로 표현하며, 이 트리의 각 요소들을 ‘노드’라고 부른다.” 고 하였다.

② DOM API를 사용하면 웹 페이지의 내용과 구조를 동적으로 조작할 수 있다.

③ 즉, DOM API는 “HTML의 요소들을 JS에서 제어하기 위한 명령들의 집합”이다.

2. 자주 사용하는 DOM API

2.1 문서 객체 생성과 선택

DOM API	설명	사용 예제
`document.createElement(tagName)`	새로운 HTML 요소를 생성	`var div = document.createElement('div');`
`document.getElementById(id)`	id 속성을 기준으로 요소를 선택	`var myDiv = document.getElementById('myDiv');`
`document.getElementsByTagName(name)`	태그 이름을 기준으로 요소를 선택	`var allDivs = document.getElementsByTagName('div');`
`document.getElementsByClassName(name)`	클래스 이름을 기준으로 요소를 선택	`var myClassDivs = document.getElementsByClassName('myClass');`
`document.querySelector(selector)`	CSS 선택자와 일치하는 문서 내 첫 번째 요소 선택	`var myDiv = document.querySelector('#myDiv');`
`document.querySelectorAll(selector)`	CSS 선택자와 일치하는 문서 내 모든 요소를 배열로 반환	`var allMyClassDivs = document.querySelectorAll('.myClass');`

2.2 문서 객체 조작

DOM API	설명	사용 예제
`element.innerHTML`	① 해당 요소 내부의 HTML 코드를 변경한다. ② 즉, 내부 HTML 코드를 js에서 새 내용으로 쉽게 변경할 수 있다.	① html 코드 + 스타일 적용 `document.documentElement.innerHTML = "<span style='color:blue'>innerHTML</span>"` ② body의 전체 내용 삭제 `document.body.innerHTML = "";`
`element.innerText`	① 해당 요소의 텍스트 내용을 변경한다. ② 웹페이지에 보이는 내용만 가져오기때문에 , display:none 을 사용해서 CSS로 숨겨진 Element는 처리하지 않는다.(스타일 무시)	`myDiv.innerText = 'Hello world!'`;
`element.textContent`	① 해당 요소 내부의 텍스트를 변경한다. ② 웹 브라우저 창에 표시되지 않은 내용까지 가져온다.	`myDiv.textContent = 'Hello world!';`

DOM API	설명	사용 예제
`element.setAttribute(attr, value)`	해당 요소의 속성 값을 변경	`myDiv.setAttribute('class', 'myClass');`
`element.getAttribute(attr)`	해당 요소의 속성 값을 가져옴	`var myClass = myDiv.getAttribute('class');`
`element.style.property`	해당 요소의 스타일 값을 변경	`myDiv.style.backgroundColor = 'blue';`
`element.appendChild(child)`	해당 요소의 하위 요소로 child를 추가	`myDiv.appendChild(myNewDiv);`
`element.removeChild(child)`	해당 요소의 하위 요소 중 child를 삭제	`myDiv.removeChild(myOldDiv);`
`element.classList.add(class)`	해당 요소의 클래스에 새로운 클래스를 추가	`myDiv.classList.add('myNewClass');`
`element.classList.remove(class)`	해당 요소의 클래스 중에서 특정 클래스를 제거	`myDiv.classList.remove('myOldClass');`
`element.classList.toggle(class)`	해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거	`myDiv.classList.toggle('myClass');`
`element.classList.toggle('class');`	해당 요소에 특정 클래스가 있는지 확인	`myDiv.classList.toggle('class');`

2.3 이벤트 처리

DOM API	설명	사용 예제
`element.addEventListener(type, listener)`	해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록	`myDiv.addEventListener('click', myFunction);`
`element.removeEventListener(type, listener)`	해당 요소에서 등록된 함수를 제거	`myDiv.removeEventListener('click', myFunction);`
`event.preventDefault()`	이벤트가 발생했을 때 기본 동작을 취소	`event.preventDefault();`
`event.stopPropagation()`	이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지	`event.stopPropagation();`

2.4 기타

DOM API	설명	사용 예제
`window.location.href`	현재 페이지의 URL을 가져옴	`var currentURL = window.location.href;`
`window.alert(message)`	경고 메시지를 출력	`window.alert('This is an alert!');`
`window.confirm(message)`	확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환	`var isConfirmed = window.confirm('Are you sure?');`

3. 사용 예시

3.1 querySelector()

Happy 클래스 명을 가진 첫 번째 요소의 배경색을 핑크색으로 바꿔보자

<p class="Happy">나는 너무 행복해!</p>
<p class="Happy">나는 너무 행복해!</p>
<p class="Happy">나는 너무 행복해!</p>

document.querySelector(".Happy").style.backgroundColor = "pink";

3.2 getElementById(), textContent

id가 ‘greeting’인 div 요소의 텍스트를 ‘Merry Christmas🎄’로 변경해보자

<div id="test">Hello, World!</div>

const element = document.getElementById("test");
element.textContent = "Merry Christmas🎄";

3.3 querySelectorAll()

Happy 클래스 명을 가진 모든 요소의 배경색을 핑크색으로 바꿔보자

<p class="Happy">나는 너무 행복해!</p>
<p class="Happy">나는 너무 행복해!</p>
<p class="Happy">나는 너무 행복해!</p>

let list = document.querySelectorAll(".Happy");
let i = 0;
while (i < list.length) {
  console.log(list[i]);
  list[i].style.backgroundColor = "Pink";
  i = i + 1;
}

3.4 addEventListener()

이벤트 리스너를 등록하고, 버튼이 클릭되었을 때 alert() 메소드를 사용하여 알림 창을 띄워보자

또한, mouseover와 mouseout 이벤트에 대한 이벤트 리스너를 등록해보자.

<button id="myButton">클릭하기</button>

const myBtn = document.querySelector("#btn");

myBtn.addEventListener("click", function () {
  alert("버튼이 클릭되었습니다.");
});

myBtn.addEventListener("mouseover", function () {
  myBtn.style.backgroundColor = "#pink";
});

myBtn.addEventListener("mouseout", function () {
  myBtn.style.backgroundColor = "#4CAF50";
});

3.5 innerText

변경하기 버튼을 클릭했을 때 텍스트를 변경해보자

<button class="changeBtn">버튼클릭</button>
<h1 class="h1">안녕</h1>

const changeBtn = document.querySelector(".changeBtn");
const h1 = document.querySelector(".h1");
changeBtn.onclick = () => {
  h1.innerText = `젤리는 맛있어!`;
};

![Alt text](%EB%85%B9%ED%99%94_2024_01_11_22_20_01_996.gif)

3.6 innerHTML

변경하기 버튼을 클릭했을 떄 텍스트 + 폰트 컬러를 변경해보자

<button class="changeBtn">버튼클릭</button>
<h1 class="h1">안녕</h1>

const changeBtn = document.querySelector(".changeBtn");
const h1 = document.querySelector(".h1");
changeBtn.onclick = () => {
  h1.innerHTML = `<span style="color:pink">행복해!</span>`;
};

Alt text

3.7 classList

3.7.1 add()

css에 적용할 스타일을 미리 .clicked이라는 이름으로 만들어 두자.

<button class="changeBtn">버튼클릭</button>
<h1 class="h1">오늘의 운세는?</h1>

.clicked {
  background-color: green;
  color: white;
}

const fortune = document.querySelector(".fortune");
const btn = document.querySelector(".btn");

btn.onclick = () => {
  fortune.classList.add("clicked");
  fortune.innerText = "좋은 일이 가득할 것입니다!";
};

Alt text

3.7.2 contains()

contanins()를 이용해서 .clicked 스타일이 있는지 확인한 후 없으면 clicked를 추가하고, 있으면 clicked를 삭제해보자! (toggle 가능)

<button class="changeBtn">버튼</button>
<h1 class="h1">오늘의 운세는?</h1>

.clicked {
  background-color: pink;
  color: white;
}

const h1 = document.querySelector(".h1");
const changeBtn = document.querySelector(".changeBtn");

changeBtn.onclick = () => {
  if (!h1.classList.contains("clicked")) {
    h1.classList.add("clicked");
  } else {
    h1.classList.remove("clicked");
  }
  h1.innerText = "좋은 일이 가득할 것입니다!";
  changeBtn.innerText = "♥";
};

Alt text

3.7.3 toggle()

toggle()을 사용하여 버튼 클릭시 다크 모드로 바꿔보자!

<button class="changeBtn">🌙</button>

const changeBtn = document.querySelector(".changeBtn");

changeBtn.onclick = () => {
  document.body.classList.toggle("dark");
  if (changeBtn.innerText === "☀️") {
    changeBtn.innerText = "🌙";
  } else {
    changeBtn.innerText = "☀️";
  }
};

Alt text

3.8 동적으로 카드 생성하기

동적으로 생성된 영화 카드를 “flip” 클래스를 가진 요소에 추가해보자

<div>
  <div class="flip"><!-- 여기에 추가하길 원함 --></div>
</div>

const flip = document.querySelector(".flip");
const card_container = document.createElement("div"); // 새로운 'div' 요소 생성
card_container.classList.add("card-container"); // card_container' 요소에 'card-container'라는 CSS 클래스를 추가

const movie = {
  title: "영화 제목",
  vote_average: 8.5,
  poster_path: "/path/to/poster.jpg",
  overview: "영화 개요 Lorem ipsum...",
};

// 'card_container' 요소 내부의 HTML을 설정
card_container.innerHTML = `
     <div class="card">
        <img src="https://image.tmdb.org/t/p/w500${
          movie.poster_path
        }" class="card-img-top" alt="${movie.title} 포스터" />
        <div class="card-body">
          <div class="card-info">
            <h5 class="card-title">${movie.title}</h5>
            <p class="star">⭐ ${movie.vote_average.toFixed(2)}</p>
          </div>
        </div>
      </div>
    </div>
      `;

flip.appendChild(card_container); // 'flip' 요소의 마지막 자식으로 'card_container' 요소를 추가

박시은

[JS] DOM API

1. DOM API 개요

2. 자주 사용하는 DOM API

2.1 문서 객체 생성과 선택

2.2 문서 객체 조작

2.3 이벤트 처리

2.4 기타

3. 사용 예시

3.1 querySelector()

3.2 getElementById(), textContent

3.3 querySelectorAll()

3.4 addEventListener()

3.5 innerText

3.6 innerHTML

3.7 classList

3.7.1 add()

3.7.2 contains()

3.7.3 toggle()

3.8 동적으로 카드 생성하기

댓글남기기

참고

[React] React Query에서 useMutation 사용 시 데이터 처리 방식 선택 기준

[React] React Query로 TodoList 리팩토링하기

[React] 이미지 스타일링 및 프로필 변경 기능 구현하기

[React] 세션 기반 인증과 토큰 기반 인증 구현하기