JS레플릿 32. DOM_10.21

송철진·2022년 10월 21일

Assignment

index.js에 아래의 내용을 구현해주세요.

p 태그를 생성하고 (hint: createElement),

해당 요소에 dom 이라는 class 이름을 주고 (hint: className)

해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)

h1요소 내부에 추가 (hint: appendChild)
.title {
  color: red;
}

👉 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    <script src="index.js"></script>
    
    <script> 
      function sayHi() { 
        console.log('여기는 index.html파일입니다.'); 
      } 

      sayHi();
    </script>

    <h1>html 페이지</h1>
  </body>
</html>

👉 style.css

.title {
  color: red;
}

.dom {
  color: blue;
}

로직 생각해보기

p 태그를 생성하고

function manyChange(){
  let paraDom = document.createElement('p');
}

해당 요소에 dom 이라는 class 이름을 주고

function manyChange(name){
  let paraDom = document.createElement('p');
  paraDom.className = name;
}
manyChange('dom');

해당 요소에 "DOM" 이라는 텍스트를 넣어서

function manyChange(name){
  let paraDom = document.createElement('p');
  paraDom.className = name;
  paraDom.innerHTML = "DOM";
}
manyChange('dom');

h1요소 내부에 추가

function manyChange(name){
  let paraDom = document.createElement('p');
  let paraH1 = document.getElementsByTagName('h1');
  
  paraDom.className = name;
  paraDom.innerHTML = "DOM";
  paraH1[0].appendChild(paraDom);
}
manyChange('dom');

결과

👉 index.js

function manyChange(name){
  let paraDom = document.createElement('p');
  // <p></p>
  let paraH1 = document.getElementsByTagName('h1');
  paraDom.className = name;
  //<p class="dom"></p>
  paraDom.innerHTML = "DOM";
  // <p class="dom">DOM</p>
  paraH1[0].appendChild(paraDom);
  // <h1><p class="dom">DOM</p><h1>
}
manyChange('dom');

Today I Learn

주요 메서드

태그 등 요소를 생성: .createElement('(요소)')
태그 이름으로 요소 검색: .getElementsByTagName('(태그 이름)')
클래스 이름 할당: .className = "(클래스 이름)"
HTML내용 할당: .innerHTML = "(텍스트내용)"
부모요소에 자식요소를 할당: 부모요소.appendChild(자식요소)

1. DOM (Document Object Model)

웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델

JavaScript가 웹 페이지 접근, 페이지 수정할 때 사용하는 model
👉 document라는 전역객체를 통해 접근
JavaScript의 document 객체: DOM 구조를 접근하는 관문,
document 객체는 HTML 문서를 나타냄

2. 왜 HTML을 접근해야 할까?

마켓 컬리가 API를 통해 서버에서 카테고리 목록의 데이터를 가져오는 순서:

document객체는 DOM트리의 root node에 접근하게 해줍니다.
document객체로 요소(element)와 요소의 속성(attribute)에 접근하여 class, id 추가 및 style 수정합니다.

요소의 내용(content)는 innerHTML로 접근, 수정.

document.body.innerHTML = '내용 다 바꿈';
// body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼다

특정 element 접근: tag, class, id와 같은 css selector로:

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

css	js
background-color	backgroundColor

JavaScript에서 hypen(-)은 사용할 수 없으므로 camelCase로 바꿉니다.

요소(element)를 만들려면 .createElement (tagName) 함수를 사용하며, 만든 후에는 어딘가의 element에 append시켜줘야 합니다.
innerHTML는 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여줍니다.

송철진

검색하고 기록하며 학습하는 백엔드 개발자

이전 포스트

JS레플릿 30.object(3)_10.20

다음 포스트