07-3 자바스크립트 문서 객체 조작하기

onezeun·2022년 2월 2일

혼자 공부하는 자바스크립트

목록 보기

22/25

글자 조작하기

문서객체.textContent : 입력된 문자열을 그대로 넣음
문서객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣음

<head>
  <title>글자 조작하기</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // 특정 아이디로 요소 선택
      const header1 = document.querySelector('#textContent')
      const header2 = document.querySelector('#innerHTML')

      // 조작
      // 값을 추출한다
      console.log(header1.textContent)
      console.log(header2.innerHTML)
      // 값을 넣는다
      header1.textContent = '원하는<br>문자열'
      header2.innerHTML = '원하는<br>문자열'
  
    })
  </script>
</head>
<body>
  <h1 id="textContent">textContent 속성 기존 문자열</h1>
  <h1 id='innerHTML'>innerHTML속성 기존 문자열</h1>
</body>

실행 결과

일반적으로 textContent 속성을 많이 사용
innerHTML 속성은 보안적으로 문제가 될 수 있어 많이 사용하진 않음

속성 조작하기

문서객체.setAttribute(속성이름, 값) : 특성 속성에 값을 지정
문서객체.getAttribute(속성이름) : 특성 속성을 추출

<head>
  <title>글자 조작하기</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // 조작
      const img = document.querySelector('img')
      // 값을 넣는 행위
      img.setAttribute('src', 'https://media.vlpt.us/images/onezeun/post/485ec27f-cca5-412d-98ed-203ac8153b9f/%EB%82%98%EC%9D%98%ED%94%84%EB%A1%9C%ED%95%84.png')
      // 값을 추출하는 행위
      console.log(img.getAttribute('src')) // 개발자 도구 콘솔에서 이미지 주소 확인 가능
      
      /* 간단하게 코드 쓰기
      값을 넣는 행위
      img.src = 'https://media.vlpt.us/images/onezeun/post/485ec27f-cca5-412d-98ed-203ac8153b9f/%EB%82%98%EC%9D%98%ED%94%84%EB%A1%9C%ED%95%84.png'
      값을 추출하는 행위
      console.log(img.src)
      */
    })
  </script>
</head>
<body>
  <img src='' alt=''>
</body>

스타일 조작하기

style속성(객체) 사용
내부에는 속성으로 CSS를 사용해서 지정

그라데이션 만들기

<head>
  <meta charset="UTF-8">
  <title>글자 조작하기</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const divs = document.querySelectorAll('div')
      divs.forEach((div, index) => { // div 개수만큼 반복하여 출력
        div.style.backgroundColor = `rgb(${index * 25.5},${index * 25.5},${index * 25.5})`
        div.style.height = '10px'
      })
    })
  </script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

실행 결과

onezeun

엉망진창

이전 포스트

07-2 자바스크립트 문서 객체 가져오기

다음 포스트