19일차 DOM 연습문제

워니·2024년 11월 7일

[Devcourse] 연습 문제 풀이

목록 보기

5/5

< 문제 풀면서 느낀 점 >

- href를 제거하지 않고 setAttribute를 해도 덮어지는 걸 몰랐음
- 강사님은 innerHTML로 그냥 툭 끝내심. 약간 허무함 innerHTML에 대해 공부필요
- 강사님은 parentElement를 사용하시고 한 줄로 적으셔서 더 깔끔하다.

  1. setAttribute가 어떤 성격을 가지는 지 정확히 알 필요 있음
    (덮을 수 있는 지, 그렇다면 기존 값이 있을 때 추가하는 방법)
    >> setAttribute는 기존 속성값이 없으면 속성이 대체
    >> 기존 속성값이 있으면 새로운 값으로 변경
    >> 추가를 하고 싶다면 기존값을 불러와서 새로운 값 + 기존값 해야됨
    
  2. innerHtml의 콘텐츠 추가, 요소 동적 추가 등 어떤 역할을 하는지 확인 필요
    >> innerHtml은 작성 시 태그를 포함한 기존 콘텐츠가 완전 대체됨
    >> <p>새로운 콘텐츠</p>; 처럼 모두 다 작성해야됨
    >> 변경 없이 유지하면서 추가하고 싶다면,
       innerHTML +=를 사용해야 한다.
       
  3. parentElement처럼 부모자식 탐색하는 것 추가 공부 필요,
     Element도 있는지 몰랐음

1. 문제 1: 텍스트 콘텐츠 변경하기

문제 설명

HTML 페이지에 있는 <h1> 태그의 텍스트를 "Hello, DOM!"으로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 1</title>
</head>
<body>
  <h1>기존 제목</h1>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const h1El = document.querySelector("h1");
h1El.textContent = "Hello, DOM!";

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 1</title>
  </head>
  <body>
    <h1>기존 제목</h1>
    <script>
      const h1El = document.querySelector("h1");
      h1El.textContent = "Hello, Dom!";
    </script>
  </body>
</html>

2. 문제 2: 새로운 요소 추가하기

문제 설명

<div> 요소를 새로 생성하여, 그 안에 "새로운 콘텐츠"라는 텍스트를 추가하고 <body>의 마지막 자식으로 삽입하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 2</title>
</head>
<body>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const newDiv = document.createElement("div");
newDiv.textContent = "새로운 콘텐츠";
document.body.appendChild(newDiv);

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 2</title>
  </head>
  <body>
    <script>
      const newDivEl = document.createElement("div");
      newDivEl.textContent = "새로운 콘텐츠";
      document.body.appendChild(newDivEl);
    </script>
  </body>
</html>

3. 문제 3: 클래스 추가하기

문제 설명

<p> 요소에 "highlight"라는 클래스를 추가하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 3</title>
</head>
<body>
  <p>이 문단에 클래스를 추가하세요.</p>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const addAttribute = document.querySelector("p");
addAttribute.classList.add("highlight");

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 3</title>
  </head>
  <body>
    <p>이 문단에 클래스를 추가하세요.</p>
    <script>
      const pEl = document.querySelector("p");
      pEl.classList.add("highlight");
    </script>
  </body>
</html>

4. 문제 4: 클래스 제거하기

문제 설명

<p> 요소에서 "highlight" 클래스를 제거하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 4</title>
</head>
<body>
  <p class="highlight">이 문단에서 클래스를 제거하세요.</p>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const pEl = document.querySelector("p");
pEl.classList.remove("highlight");

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 4</title>
  </head>
  <body>
    <p class="highlight">이 문단에서 클래스를 제거하세요.</p>
    <script>
      const pEl = document.querySelector("p");
      pEl.classList.remove("highlight");
    </script>
  </body>
</html>

5. 문제 5: 스타일 변경하기

문제 설명

<h2> 요소의 배경색을 "yellow"로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 5</title>
</head>
<body>
  <h2>배경색을 변경하세요.</h2>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const h2El = document.querySelector("h2");
h2El.style.backgroundColor = "yellow";

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 5</title>
  </head>
  <body>
    <h2>배경색을 변경하세요.</h2>
    <script>
      const h2El = document.querySelector("h2");
      h2El.style.backgroundColor = "yellow";
    </script>
  </body>
</html>

6. 문제 6: 새로운 목록 항목 추가하기

문제 설명

<ul> 요소에 새로운 <li> 항목을 추가하세요. 추가된 항목의 내용은 "새로운 항목"입니다.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 6</title>
</head>
<body>
  <ul>
    <li>기존 항목</li>
  </ul>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const ulEl = document.querySelector("ul");
const liEl = document.createElement("li");
liEl.textContent = "새로운 항목";
ulEl.appendChild(liEl);

7. 문제 7: 속성 변경하기

문제 설명

<a> 요소의 href 속성을 "https://www.example.com"으로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 7</title>
</head>
<body>
  <a href="#">링크</a>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const aEl = document.querySelector("a");
aEl.removeAttribute("href");
aEl.setAttribute("href", "https://www.example.com");
console.log(aEl);

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 7</title>
  </head>
  <body>
    <a href="#">링크</a>
    <script>
      // 여기에 코드를 작성하세요
      const aEl = document.querySelector("a");
      aEl.setAttribute("href", "https://www.example.com");
    </script>
  </body>
</html>

href를 제거하지 않고 setAttribute를 해도 덮어지는 걸 몰랐음

8. 문제 8: 요소 삭제하기

문제 설명

<p> 요소를 DOM에서 삭제하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 8</title>
</head>
<body>
  <p>삭제할 요소입니다.</p>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const pEL = document.querySelector("p");
pEL.remove();

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 8</title>
  </head>
  <body>
    <p>삭제할 요소입니다.</p>
    <script>
      const pEl = document.querySelector("p");
      pEl.remove();
    </script>
  </body>
</html>

10. 문제 10: 기존 요소의 텍스트 변경

문제 설명

<div> 요소의 텍스트 콘텐츠를 "새로운 텍스트"로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 10</title>
</head>
<body>
  <div>기존 텍스트</div>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const divEl = document.querySelector("div");
divEl.textContent = "새로운 텍스트";

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 10</title>
  </head>
  <body>
    <div>기존 텍스트</div>
    <script>
      const divEl = document.querySelector("div");
      divEl.innerText = "새로운 텍스트";
    </script>
  </body>
</html>

11. 문제 11: 템플릿 리터럴을 사용한 HTML 삽입

문제 설명

템플릿 리터럴을 사용하여 다음과 같은 HTML 구조를 추가하세요.

<div class="card">
  <h3>카드 제목</h3>
  <p>카드 내용</p>
</div>

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 11</title>
</head>
<body>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const divEl = document.createElement("div");
const h3El = document.createElement("h3");
const pEl = document.createElement("p");
divEl.classList.add("card");
h3El.textContent = "카드 제목";
pEl.textContent = "카드 내용";
document.body.appendChild(divEl);
divEl.appendChild(h3El);
divEl.appendChild(pEl);

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 11</title>
  </head>
  <body>
    <script>
      // 여기에 코드를 작성하세요
      document.body.innerHTML = `
      <div class="card">
        <h3>카드 제목</h3>
        <p>카드 내용</p>
      </div>
      `;
    </script>
  </body>
</html>

강사님은 innerHTML로 그냥 툭 끝내심. 약간 허무함 innerHTML에 대해 공부필요

12. 문제 12: 요소의 부모 요소 찾기

문제 설명

<p> 요소의 부모 요소를 찾고, 그 부모 요소의 배경색을 "lightgray"로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 12</title>
</head>
<body>
  <div>
    <p>이 요소의 부모를 찾고 배경색을 변경하세요.</p>
  </div>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const parent = document.querySelector("p").parentNode;
console.log(parent); // <div></div>
const divEl = document.querySelector("div");
divEl.style.backgroundColor = "lightgray";

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 12</title>
  </head>
  <body>
    <div>
      <p>이 요소의 부모를 찾고 배경색을 변경하세요.</p>
    </div>
    <script>
      // 여기에 코드를 작성하세요
      document.querySelector("p").parentElement.style.backgroundColor =
        "lightgray";
    </script>
  </body>
</html>

강사님은 parentElement를 사용하시고 한 줄로 적으셔서 더 깔끔하다.

13. 문제 13: 새로운 `li` 항목을 앞에 추가하기

문제 설명

<ul> 요소의 첫 번째 자식으로 "첫 번째 항목"이라는 텍스트를 가진 <li> 요소를 추가하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title

>문제 13</title>
</head>
<body>
  <ul>
    <li>기존 항목 1</li>
    <li>기존 항목 2</li>
  </ul>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const ulEl = document.querySelector("ul");
const liEl = document.createElement("li");
liEl.textContent = "첫 번째 항목";
ulEl.insertBefore(liEl, ulEl.firstChild);

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 13</title>
  </head>
  <body>
    <ul>
      <li>기존 항목 1</li>
      <li>기존 항목 2</li>
    </ul>
    <script>
      // 여기에 코드를 작성하세요
      const ulEl = document.querySelector("ul");
      const liEl = document.createElement("li");
      liEl.textContent = "첫 번째 항목";
      ulEl.insertBefore(liEl, ulEl.firstElementChild);
    </script>
  </body>
</html>

14. 문제 14: `querySelectorAll` 사용하기

문제 설명

<p> 태그가 여러 개 있을 때, 모든 <p> 태그의 텍스트를 "모든 문단의 텍스트"로 변경하세요.

기본 제공 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문제 14</title>
</head>
<body>
  <p>첫 번째 문단</p>
  <p>두 번째 문단</p>
  <script>
    // 여기에 코드를 작성하세요
  </script>
</body>
</html>

< 나의 문제 풀이 >
const pAllEl = document.querySelectorAll("p");
const pEl = pAllEl.forEach((p) => (p.textContent = "모든 문단의 텍스트"));

< 강사님 풀이 >
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>문제 14</title>
  </head>
  <body>
    <p>첫 번째 문단</p>
    <p>두 번째 문단</p>
    <script>
      // 여기에 코드를 작성하세요
      const pEls = document.querySelectorAll("p");
      pEls.forEach((pEl) => (pEl.textContent = "모든 문단의 텍스트"));
    </script>
  </body>
</html>

워니

첫 시작!

이전 포스트

19일차 DOM 연습문제

[Devcourse] 연습 문제 풀이

< 문제 풀면서 느낀 점 >

1. 문제 1: 텍스트 콘텐츠 변경하기

문제 설명

기본 제공 코드

2. 문제 2: 새로운 요소 추가하기

문제 설명

기본 제공 코드

3. 문제 3: 클래스 추가하기

문제 설명

기본 제공 코드

4. 문제 4: 클래스 제거하기

문제 설명

기본 제공 코드

5. 문제 5: 스타일 변경하기

문제 설명

기본 제공 코드

6. 문제 6: 새로운 목록 항목 추가하기

문제 설명

기본 제공 코드

7. 문제 7: 속성 변경하기

문제 설명

기본 제공 코드

8. 문제 8: 요소 삭제하기

문제 설명

기본 제공 코드

10. 문제 10: 기존 요소의 텍스트 변경

문제 설명

기본 제공 코드

11. 문제 11: 템플릿 리터럴을 사용한 HTML 삽입

문제 설명

기본 제공 코드

12. 문제 12: 요소의 부모 요소 찾기

문제 설명

기본 제공 코드

13. 문제 13: 새로운 li 항목을 앞에 추가하기

문제 설명

기본 제공 코드

14. 문제 14: querySelectorAll 사용하기

문제 설명

기본 제공 코드

18일차 JSONPlaceholder 연습문제

0개의 댓글

13. 문제 13: 새로운 `li` 항목을 앞에 추가하기

14. 문제 14: `querySelectorAll` 사용하기