DOM을 활용한 문제

sugyinbrs·2021년 10월 13일
0

문제풀이

목록 보기
2/3
post-thumbnail

1. 문제

index.js에 아래의 내용을 구현한다.

  • p 태그를 생성한다. (hint: createElement)
  • 해당 요소에 dom 이라는 class 이름을 준다. (hint: className)
  • 해당 요소에 "DOM" 이라는 텍스트를 넣는다. (hint: innerHTML)
  • 그것을 h1요소 내부에 추가한다. (hint: appendChild)
  • 주어진 HTML 코드
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1 class="h1-title">
      <span>난 span</span>
      여기만 바꾸고 싶어
    </h1>
    <script src="index.js"></script>
  </body>
</html>
  • 주어진 CSS 코드
.title {
  color: red;
}
.dom {
  color: blue;
}

2. 내가 쓴 코드

function addP() {
  let charP = document.createElement('p');
  let heading1 = document.getElementsByTagName('h1')[0];
  
  charP.className = 'dom';
  charP.innerHTML = "DOM";
  heading1.appendChild(charP);
}
addP();

3. 코드 설명

  1. 새로 함수를 정의한다.

  2. 함수의 내부에는 p태그를 생성하는 document 객체의 createElement 메서드를 사용하고 charP 라는 변수에 할당해준다.

  3. 또한 HTML 파일에서 인덱스 0 번째로 오는 h1 태그를 가져오는 document 객체의 getElementsByTagName 메서드를 사용하고 heading 이라는 변수에 할당해준다.

  4. 변수 chaP에 클래스 이름을 주는 document 객체의 className 에 'dom'이라는 클래스 이름을 준다.

  5. 그리고 4번 요소에 document 객체의 innerHTML 메서드를 사용하여 "DOM" 이라는 텍스트를 넣어준다.

  6. 3번 과정에서 가져온 'h1' 요소 내부에 charP를 document 객체의 appendChild 메서드를 사용하여 내용을 추가해준다.

charP.className = 'dom'; 에서 클래스 이름을 주는 과정에서 따옴표를 빠뜨려서 답이 나오지 않았다. HTML 상에서 우리가 클래스 이름을 줄 때에도 따옴표를 넣는 것처럼 객체에서 클래스 이름을 줄 때에도 따옴표를 사용하도록 한다. 이런 사소하게 헷갈리는 것들이 발목을 잡을 수 있다.

0개의 댓글