[JavaScript] 문서객체모델 - DOMContentLoaded, 문서 객체 가져오기

리버 River 2024. 4. 2. 15:22

2024. 4. 2. 15:22

1. 문서 객체 모델 DOM Document Object Model

👩🏻‍💻 문서 객체를 조합해서 만든 전체적인 형태를 말함

👩🏻‍💻 자바 스크립트를 사용하는 목적은 html을 다루는 것
▶️ 자바 스크립트에서는 html 요소를 문서 객체 document object를 이용해 조작을 함

👩🏻‍💻 HTML 페이지는 코드를 위에서 아래로 차례대로 실행

➡️ body 태그 생성되기 이전인 head 태그에서 body 태그에 무언가 출력하려면 문제 발생

➡️ 기본적으로 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체(요소)에 접근 불가

<head>    
    <script>
        const h1 = (text) => `<h1>${text}</h1>`;
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.body.innerHTML += h1('1번째 script 태그');
        });
    </script>
</head>
<body>

    <h1>1번째 h1 태그</h1>
    <script>
        document.body.innerHTML += h1('3번째 script 태그');
    </script>
    <h1>2번째 h1 태그</h1>

</body>

(1) DOMContentLoaded 이벤트

💡 DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행
▶️ script 태그가 body 태그 이전에 위치해도 문제없이 코드 실행

<script>
    // DOMContentLoaded를 연결. DOMContentLoaded 상태가 되었을 때 콜백 함수를 호출
    document.addEventListener('DOMContentLoaded', () => {
        const h1 = (text) => `<h1>${text}</h1>`;
        document.body.innerHTML += h1('DocumentLoaded 이벤트 발생');
    });
</script>

📌 DOMContentLoaded 사용한 배경색 변경 예제

<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const changeBtn = document.querySelector('#changeBtn');
            const resetBtn = document.querySelector('#resetBtn');

            let i = 0;

            const bodyTag = document.querySelector('body');
            const color = ['red', 'orange', 'yellow', 'blue'];
            const handleColor = () => {
                bodyTag.style.backgroundColor = color[i++ % color.length];
            }

            changeBtn.addEventListener('click', handleColor);
            resetBtn.addEventListener('click', () => {
                changeBtn.removeEventListener('click', handleColor);
                bodyTag.style.backgroundColor = '';
            })
        })
    </script>
</head>
<body>
    <button id="changeBtn">배경색 변경</button>
    <button id="resetBtn">배경색 초기화</button>
</body>

💡 addEventListener('이벤트', '콜백함수') 메소드
- document라는 문서 객체의 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행하라는 의미

(2) 문서 객체 가져오기

document.head / document.body / document.title

👩🏻‍💻 head와 body 요소 내부에 다른 요소들은 다음과 같은 별도의 메소드를 사용해서 접근
⚡️ document.querySelector(선택자) : 요소를 하나만 추출
⚡️ document.querySelectorAll(선택자) : 선택자에 해당하는 모든 문서 객체를 배열로 가져옴
👩🏻‍💻 선택자 부분에는 CSS 선택자를 입력

이름	선택자 형태	설명
태그 선택자	태그	특정 태그를 가진 요소를 추출
아이디 선택자	#아이디	특정 id 속성을 가진 요소를 추출
클래스 선택자	.클래스	특정 class 속성을 가진 요소를 추출
속성 선택자	[속성=값]	특정 속성 값을 갖고 있는 요소 추출
후손 선택자	선택자_A 선택자_B	선택자_A 아래에 있는 선택자_B 선택

<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const header = document.querySelector('h1'); // 요소를 읽어들임. 제일 먼저 나오는 요소 하나만 가져옴.
            // 텍스트와 스타일을 변경.
            header.textContent = 'HEADERS';
            header.style.color = 'white';
            header.style.backgroundColor = 'black';
            header.style.padding = '10px';

            const headersAll = document.querySelectorAll('h2'); // 요소를 읽어들임.
            console.log(headersAll)
            headersAll.forEach((item) => { // 일반적으로 forEach() 메소드를 사용해서 반복을 돌림.
                item.textContent = 'headersAll';
                item.style.color = 'red';
                item.style.backgroundColor = 'black';
                item.style.padding = '20px';
            })

            // 1. for문을 사용해서 글자색을 빨강으로 변경
            for(let idx = 0; idx < headersAll.length; idx++) {
                headersAll[idx].style.color = 'red';
            }

            // 2. for in 문을 사용해서 글자색을 파랑으로 변경
            for(let idx in [...headersAll]) {
                headersAll[idx].style.color = 'blue';
            }

            // 3. for of 문을 사용해서 글자색을 주황으로 변경
            for(const i of headersAll) {
                i.style.color = 'orange';
            }

        })
    </script>
</head>
<body>
    <h1></h1>
    <h1>2</h1>
    <h2></h2>
    <h2></h2>
    <h2></h2>
    <h2></h2>
</body>

[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]

저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 이벤트 핸들러 등록과 제거 (0)	2024.04.02
[JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기 (0)	2024.04.02
[JavaScript] 타이머 함수, 기본 매개변수, 즉시 호출 함수, 엄격모드 (0)	2024.03.31
[JavaScript] 재귀 함수, 콜백 함수, 화살표 함수 (0)	2024.03.30
[JavaScript] 나머지 매개변수와 전개 연산자 (0)	2024.03.29

ID_ allriver