09009

[Javascript] 문서 객체 모델 본문

Front-End/Javascript
[Javascript] 문서 객체 모델
09009

• 문서 객체 : HTML에서 요소라고 하던 것을 자바스크립트에선 문서 객체라고 칭한다.

자바스크립트에서 문서 객체를 조작한다 = HTML 태그를 조작한다

 

자바스크립트를 사용하여 문서 객체를 조작해서 태그를 추가, 수정, 제거 가능

HTML 태그의 내용을 변경할 수 있고 출력되는 모양이나 색상을 동적으로 변경 가능

 

 

•  정적 생성: 웹 페이지 처음 실행 시 HTML 태그로 적힌 문서 객체를 생성하는 것

•  동적 생성: 웹 페이지 실행 중에 자바스크립트를 사용하여 문서 객체를 생성하는 것

 

•  문서 객체 모델: 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식을 의미

 

실행 순서에 따른 문서 객체 사용 오류

웹 브라우저는 HTML 코드를 위쪽에서 아래쪽으로 실행한다. 

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // h1 태그의 배경 색상 변경
        document.querySelector('h1').style.backgroundColor = 'red';
        // h2 태그의 배경 색상 변경
        document.querySelector('h2').style.backgroundColor = 'red';
    </script>
</head>
<body>
    <h1>Hello - 1</h1>
    <h2>Hello - 2</h2>
</body>
</html>

💻 출력 

실행한 결과 분명 해당 태그의 배경 색상을 변경하는 코드를 작성하였지만 적용되지 않았다.

웹 브라우저가 위쪽에서 아래쪽으로 코드를 실행하기 때문에 script 태그를 읽을 때는 h1 태그와 h2 태그가

생성되어 있지 않아 존재하지 않는 것(null)에서 style이라는 속성을 읽을 수 없어 오류가 발생한 것이다.

 

위 문제를 해결하려면 코드를 어떻게 작성해야 할까?

 

script 태그를 h1, h2 태그 뒤에 옮기는 방법이 있지만 이벤트 기능을 활용하여 위 문제를 해결하는 것이 더 바람직하다.

 

(이벤트가 정확히 무엇인지는 다음 문서에 작성할 예정)

 

* 해결 방법

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
            // h1 태그의 배경 색상 변경
            document.querySelector('h1').style.backgroundColor = 'red';
            // h2 태그의 배경 색상 변경
            document.querySelector('h2').style.backgroundColor = 'red';
        };
    </script>
</head>
<body>
    <h1>Hello - 1</h1>
    <h2>Hello - 2</h2>
</body>
</html>

💻 출력 

script 태그에 이벤트 기능을 사용하여 배경 색상이 올바르게 적용된 것을 확인할 수 있다.

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

 

문서 객체는 1개 또는 여러 개 선택 가능

문서 객체를 여러 개 선택하는 메서드 사용 시 문서 객체가 배열 형태로 반환됨

 

1개 선택 document.getElementById(아이디) 아이디로 1개 선택
document.querySelector(선택자) 선택자로 1개 선택
여러 개 선택 document.getElementsByName(이름) name 속성으로 여러 개 선택
document.getElementsByClassName(클래스) class 속성으로 여러 개 선택
document.querySelectorAll(선택자) 선택자로 여러 개 선택

 

getElementById()

- 문서 객체 1개 선택하여 조작, id 속성 사용

 

✍ 입력 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function() {
            // 문서 객체를 선택합니다.
            var header = document.getElementById('header');

            // 문서 객체를 조작합니다.
            header.style.color = 'orange';
            header.style.background = 'red';
            header.innerHTML = 'From JavaScript';
        };
    </script>
</head>
<body>
    <h1 id="header">Header</h1>
</body>
</html>

💻 출력 

id 속성을 사용하여 문서 객체를 선택하고 스타일과 내부 글자를 조작한다.

 

querySelector()

- 문서 객체 1개 선택하여 조작, 선택자 사용

- id 속성 대신 선택자를 사용하는 것만 제외하고 getElementById() 메서드와 사용 방법 동일

- querySelector() 메서드는 문서 객체 하나를 선택하기 때문에 이름이 같은 선택자가 여러 개일 경우 가장 먼저 등장하는 것을 선택

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function() {
            // 문서 객체를 선택합니다.
            var header = document.querySelector('h1');

            // 문서 객체를 조작합니다.
            header.style.color = 'orange';
            header.style.background = 'red';
            header.innerHTML = 'From JavaScript';
        };
    </script>
</head>
<body>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
</body>
</html>

💻 출력 

querySelector() 메서드는 문서 객체 하나만 선택하기 때문에 가장 먼저 등장한 h1 태그의 hello만 변경된 것이다.

 

querySelectorAll()

- 문서 객체 여러 개 선택하여 조작, 선택자 사용

 

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function() {
            // 문서 객체를 선택합니다.
            var headers = document.querySelectorAll('h1');

            for (var i = 0; i < headers.length; i++) {
                // 변수를 선언합니다.
                var header = headers[i];
                 // 문서 객체를 조작합니다.
                header.style.color = 'orange';
                header.style.background = 'red';
                header.innerHTML = 'From JavaScript';
            }
        };
    </script>
</head>
<body>
    <h1>Hello</h1>
    <h1>Hello</h1>
    <h1>Hello</h1>
</body>
</html>

querySelectorAll() 메서드 같이 문서 객체를 여러 개 선택하는 메서드 사용 시 문서 객체가 배열 형태로 반환된다

 

💻 출력 

 

'Front-End > Javascript' 카테고리의 다른 글

[Javascript] 이벤트  (0) 2023.04.03
[Javascript] 문서 객체 조작  (0) 2023.04.03
[Javascript] 함수와 객체  (0) 2023.04.01
[Javascript] 변수, 조건문, 반복문, 배열  (0) 2023.04.01
[Javascript] 자바스크립트를 이용한 메시지 출력  (0) 2023.03.31
'Front-End/Javascript' Related Articles more
Comments