Language/JavaScript + TypeScript

[JavaScript] 문서 객체 선택 및 조작

깨구르르 2024. 3. 12. 16:45
728x90

1. 문서 객체 선택이란?

문서 객체를 선택한다는 것은?

👉 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것

 

 

2. 문서 객체 선택 메서드 종류

 

🩶 1개를 선택하는 메서드 🩶

  • document.getElementyById(아이디) : 아이디로 1개 선택
  • document.querySelector(선택자) : 선택자로 1개 선택
    👉 이름이 같은 선택자가 여러 개라면 가장 먼저 등장하는 것을 선택함

 

🩶 여러 개를 선택하는 메서드 🩶

  • document.getElementyByName(이름) : name 속성으로 여러 개 선택
  • document.getElementByClassName(클래스) : class 속성으로 여러 개 선택
  • document.querySelectorAll(선택자) : 선택자로 여러 개 선택

 

 

3. 문서 객체 조작 개요

SPA란?

👉 Single Page Application

웹 페이지를 한 번만 읽어들이고, 사용자가 조작할 때 웹 페이지 내용을
자바스크립트를 사용해 바꾸는 형태의 웹 페이지

  • SPA의 장점
    • 웹 페이지를 여러 번 요청하지 않아도 되어 서버 부담 줄어듦
    • 사용자가 웹 페이지를 이동할 때 새로 웹 페이지를 읽어 들이며 발생하는 깜빡임도 없어짐

👉  이러한 웹 페이지 개발을 위해 React, Vue, 자바스크립트 프레임워크가 등장

 

 

4. 문서 객체 조작 - 글자 조작

  • textContent : 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
    👉 입력한 글자가 body 태그 내부에 바로 들어감
  • innerHTML : 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
    👉 HTML 태그를 적용해 내부 글자를 변경함

 

 

5. 문서 객체 조작 - 스타일 조작

  • 자바스크립트로 CSS 속성 값을 수정/변경할 수 있다. 👉 style 속성을 변경
  • 자바스크립트는 특수 문자 '-'를 사용할 수 없으므로 -로 연결된 단어의 첫 번째 글자를 대문자로 바꿔주면 됨
더보기

예시)

Element.style.background-color 👉 Element.style.backgroundColor

스타일시트의 스타일 속성 자바스크립트의 스타일 식별자
background-image backgroundImage
background-color backgroundColor
box-sizing boxSizing
list-style listStyle
더보기

문자열을 사용한 스타일 속성 접근

: 문자열을 사용해 스타일 속성에 접근할 때는 다음 두 가지 방법을 모두 사용할 수 있음

document.body.style['backgroundColor'] = 'red';

document.body.style['background-color'] = 'red';

  • 아래 예제는 div 태그 256개가 위쪽에서 아래쪽으로 그레디언트를 형성함
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Basic</title>
    <script>
        window.onload = function() {
            var output = '';

			// body에 256개의 div 생성
            for(var i=0; i<256; i++) output += '<div></div>';
            document.body.innerHTML = output;
			
            // 아래로 2px씩 내려갈 때마다 색을 점차 밝혀나감
            var divs = document.querySelectorAll('div');
            for(var i=0; i<divs.length; i++) {
                var div = divs[i];
                div.style.height = '2px';
                div.style.background = 'rgb(' + i + ',' + i + ',' + i +')';
            }
        };
    </script>
</head>
<body>
    
</body>
</html>

 

 

6. 문서 객체 조작 - 속성 조작

  • setAttribute(속성 이름, 속성 값) : 속성 지정
  • getAttribute(속성 이름) : 속성 추출
더보기

웹 표준에서 지정하지 않은 속성이 있는 경우

문자열 data-로 시작하는 것(사용자 지정 속성)은 반드시 속성 조작 메서드를 사용해서 접근해야 함 

 

🩶 img 태그 속성 조작하기 🩶

  • 자바스크립트의 문서 객체 코드에서 src 속성 등을 지정하므로 setAttribute, getAttribute를 쓰지 않고 .src 같은 식으로 속성을 변경할 수 있다.

 

🩶 body 태그 속성 조작하기 🩶

  • 아래 예제는 body 태그에 data-custom 속성을 지정한 후 속성을 다시 추출해서 출력한다.
    웹 표준에서 지정하고 있지 않은 속성이므로 속성 조작 메서드를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            document.body.setAttribute('data-custom', 'value');

            var dataCustom = document.body.getAttribute('data-custom');
            alert(dataCustom);
        }
    </script>
</head>
<body>
    
</body>
</html>

 

728x90