웹 서비스 개발(FB,BE,SERVER,DB)/Javascript

DOM API

Zoo_10th 2024. 3. 6.

1. DOM(Document Object Model)

DOM (Document Object Model)은 웹 브라우저가 HTML 문서를 인식하고 조작하는 방식에 관한 중요한 개념입니다. DOM을 이해하면 웹 페이지의 구조와 동작을 다루는 데 필수적인 지식을 얻을 수 있습니다.

DOM의 넓은 의미

웹 브라우저가 HTML을 인식하는 방식: 브라우저는 HTML 문서를 읽고, 이를 해석하여 사용자에게 시각적으로 표현합니다. 이 과정에서 DOM은 HTML 문서의 구조를 브라우저가 이해할 수 있는 형식으로 변환합니다.

DOM의 좁은 의미

document 객체와 관련된 객체의 집합: DOM은 HTML 문서 내의 각 요소를 나타내는 객체들의 트리 구조입니다. 이 객체들을 통해 JavaScript는 HTML 요소에 접근하고 조작할 수 있습니다. document 객체는 HTML 문서 전체를 대표하며, 이를 통해 문서 내의 다른 요소들에 접근할 수 있습니다.

HTML 태그를 객체로 표현

HTML의 태그를 자바스크립트에서 이용할 수 있도록 객체로 만든 것: DOM은 HTML 문서의 각 태그를 객체로 변환하여, JavaScript를 통해 이들을 조작할 수 있게 합니다. 예를 들어, HTML의 <p> 태그는 DOM에서 HTMLParagraphElement 객체로 표현될 수 있습니다.

DOM의 주요 구성 요소

Element Node: HTML 요소를 나타냅니다. 예를 들어, <div>, <p>, <input> 등 HTML 태그 각각이 Element Node로 표현됩니다.
Text Node (Text Content): HTML 요소 내의 텍스트를 나타냅니다. 예를 들어, <p>Hello World</p>에서 "Hello World" 텍스트 부분이 Text Node입니다.

DOM을 통한 웹 페이지 조작

DOM을 통해 JavaScript는 웹 페이지의 내용을 동적으로 변경할 수 있습니다. 이는 웹 페이지에 대한 사용자 상호작용, 페이지 내용의 업데이트, 스타일 변경 등 다양한 작업을 가능하게 합니다. 예를 들어, JavaScript를 사용하여 DOM의 특정 요소의 텍스트를 변경하거나, 새로운 요소를 추가하거나, 기존 요소를 제거하는 등의 작업을 할 수 있습니다.

DOM은 웹 개발에서 필수적인 개념으로, 웹 페이지의 동적인 조작과 상호작용을 가능하게 하는 핵심적인 기술입니다.

(1) 객체 가져오기

문서 객체 가져오기

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        // <head> 태그 전체를 출력합니다.
        console.log(document.head);

        // 문서의 제목을 출력합니다.
        console.log(document.title);

        // <body> 태그 전체를 출력합니다.
        console.log(document.body);

        // <head>의 첫 번째 자식 노드 (여기서는 <meta charset="UTF-8">)를 출력합니다.
        console.log(document.head.childNodes[1]);

        // <head>의 세 번째 자식 노드 (여기서는 <title>Document</title>)를 출력합니다.
        console.log(document.head.childNodes[3]);

        // <body>의 첫 번째 자식 노드 (여기서는 <script> 태그 자체)를 출력합니다.
        console.log(document.body.childNodes[1]);
    </script>
</body>
</html>

자바스크립트로 HTML 내용 작성

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    
    <!-- 함수 정의: h1 태그로 텍스트를 감싸는 HTML 문자열을 생성 -->
    <script>
        const h1 = (text) => `<h1>${text}</h1>`;
    </script>

    <!-- body가 아직 로드되지 않았기 때문에 실행되지 않음 -->
    <script>
        document.body.innerHTML += h1('1번째 script 태그');
    </script>
</head>
<body>
    <!-- body 내에 첫 번째 h1 태그를 추가 -->
    <script>
        document.body.innerHTML += h1('2번째 script 태그');
    </script>

    <!-- 정적인 HTML 내용 -->
    <h1>1번째 h1 태그</h1>

    <!-- body의 기존 내용을 덮어씌우고 새 h1 태그를 추가 -->
    <script>
        document.body.innerHTML += h1('3번째 script 태그');
    </script>

    <!-- 정적인 HTML 내용 -->
    <h1>2번째 h2 태그</h1>
</body>
</html>

웹 브라우저가 문서 객체를 모두 읽고 난 후 동작

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>

    <!-- h1 태그를 생성하는 함수를 정의합니다 -->
    <script>
        const h1 = (text) => `<h1>${text}</h1>`;
    </script>

    <!-- DOMContentLoaded 이벤트 리스너: 문서가 완전히 로드된 후에 실행됩니다 -->
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.body.innerHTML += h1('h1 태그 추가');
        });
    </script>
</head>
<body>
    <!-- 페이지에 이미 존재하는 h1 태그 -->
    <h1>h1 태그</h1>
</body>
</html>

h1 함수 정의: head 태그 내부에 있는 첫 번째 <script>에서 h1이라는 함수를 정의합니다. 이 함수는 주어진 텍스트를 <h1> 태그로 감싸는 HTML 문자열을 반환합니다.
DOMContentLoaded 이벤트 리스너: head 태그 내부의 두 번째 <script>는 DOMContentLoaded 이벤트 리스너를 추가합니다. 이 이벤트는 HTML 문서가 완전히 로드되고 파싱된 후, 즉 모든 DOM 객체가 준비된 후에 발생합니다.
동적 내용 추가: DOMContentLoaded 이벤트가 발생하면, h1 함수를 호출하여 새로운 <h1> 태그를 body의 내부 HTML에 추가합니다. 결과적으로, 원래 있는 <h1>h1 태그</h1> 아래에 새로운 <h1> 태그가 추가됩니다.

이 방법을 사용하면 HTML 문서가 완전히 로드되기 전에 JavaScript가 실행되어 생길 수 있는 문제들을 예방할 수 있습니다. DOMContentLoaded 이벤트는 문서의 모든 HTML이 로드되고, DOM 트리가 구성된 후에 발생하므로, 이 시점에서 DOM 조작이 안전하게 수행될 수 있습니다.

(2) 객체 조작

문서 객체 생성.

<script>
    // h1 태그를 생성합니다.
    const obj = document.createElement('h1');

    // 생성한 h1 태그에 텍스트 컨텐츠를 추가합니다.
    obj.textContent = 'Header';

    // 주석 처리된 부분: 텍스트 노드를 생성하고 h1 태그에 추가하는 다른 방법입니다.
    // const text = document.createTextNode('Header');
    // obj.appendChild(text);

    // 완성된 h1 태그를 문서의 body에 추가합니다.
    document.body.appendChild(obj);
</script>

h1 태그 생성: document.createElement('h1')을 사용하여 새로운 <h1> 태그를 생성합니다. 이 때 생성된 태그는 아직 문서의 DOM 트리에 추가되지 않았습니다.
텍스트 컨텐츠 추가: obj.textContent = 'Header'를 통해 생성된 <h1> 태그에 "Header"라는 텍스트를 추가합니다. textContent 속성을 사용하면 간편하게 텍스트를 요소에 추가할 수 있습니다.
(주석 처리된 부분): document.createTextNode('Header')를 사용하여 텍스트 노드를 생성하고, appendChild 메서드를 통해 이 텍스트 노드를 <h1> 태그에 추가하는 방법도 있습니다. 이 방법은 노드 기반의 접근 방식을 사용합니다.
DOM 트리에 h1 태그 추가: document.body.appendChild(obj)를 사용하여 완성된 <h1> 태그를 문서의 <body> 요소에 추가합니다. 이로써 <h1> 태그가 실제 웹 페이지에 표시됩니다.

이 코드는 순수 JavaScript를 사용한 DOM 조작의 기본 예시로, 웹 페이지에 동적으로 새로운 요소를 추가하는 방법을 보여줍니다. 이러한 방식은 웹 페이지를 동적으로 변경하고 사용자와의 상호작용을 구현하는 데 중요합니다.

문서 객체 속성 지정

<script>
    // h1 태그를 생성합니다.
    const obj = document.createElement('h1');

    // 생성한 h1 태그에 텍스트 컨텐츠 'Header'를 추가합니다.
    obj.textContent = 'Header';

    // 완성된 h1 태그를 문서의 body에 추가합니다.
    document.body.appendChild(obj);

    // h1 태그의 스타일 속성을 지정합니다.
    obj.style.color = 'red'; // 텍스트 색상을 빨간색으로 설정합니다.
    obj.style.backgroundColor = '#d9d9d9'; // 배경색을 회색으로 설정합니다.

    // h1 태그에 'id' 속성을 추가하고 'title'이라는 값을 지정합니다.
    obj.setAttribute('id', 'title');
</script>

h1 태그 생성 및 텍스트 추가: document.createElement('h1')을 사용하여 새로운 <h1> 태그를 생성하고, textContent 속성을 사용하여 "Header"라는 텍스트를 추가합니다.
DOM 트리에 h1 태그 추가: document.body.appendChild(obj)를 통해 <body>에 <h1> 태그를 추가합니다.
스타일 속성 지정: 생성된 <h1> 태그의 style 속성을 사용하여 CSS 스타일을 직접 지정합니다. 여기서는 텍스트 색상을 빨간색으로, 배경색을 회색으로 설정합니다.
ID 속성 지정: setAttribute 메서드를 사용하여 생성된 <h1> 태그에 id 속성을 추가하고, 이에 'title'이라는 값을 지정합니다.

이 코드는 웹 페이지에서 JavaScript를 사용하여 새로운 HTML 요소를 생성하고, 이 요소에 다양한 속성(텍스트, 스타일, ID 등)을 지정하는 방법을 보여줍니다. 이러한 방식은 웹 페이지의 동적인 구성과 사용자 상호작용을 위한 중요한 기술입니다.

문서 객체 제거

<script>
    // 문서에서 첫 번째 h1 요소를 선택합니다.
    const obj = document.querySelector('h1');

    // 선택한 h1 요소를 문서에서 제거합니다.
    document.body.removeChild(obj);
    // 다른 방법: obj.parentNode.removeChild(obj);
</script>

문서 객체 선택: document.querySelector('h1')를 사용하여 페이지 내의 첫 번째 <h1> 요소를 선택합니다.
문서 객체 제거:
- document.body.removeChild(obj)를 사용하여 <body>의 자식 요소 중 obj에 해당하는 요소(여기서는 <h1>)를 제거합니다.
- 주석 처리된 부분에서 obj.parentNode.removeChild(obj)는 선택된 요소(obj)의 부모 노드를 찾아, 그 부모 노드에서 obj를 제거하는 방법입니다. 이 방법은 요소가 문서의 어느 위치에 있든지 간에 그 요소를 제거할 수 있습니다.

주의사항

문서 객체를 제거하기 전에 해당 객체가 실제로 존재하는지 확인하는 것이 좋습니다. 객체가 존재하지 않을 경우, querySelector는 null을 반환하고, 이후에 removeChild를 호출하면 오류가 발생할 수 있습니다.
removeChild 메서드는 제거하려는 요소의 부모 노드에서 호출해야 합니다. 부모 노드가 무엇인지 확실하지 않은 경우, parentNode 속성을 사용하는 것이 안전합니다.

이 코드는 웹 페이지에서 JavaScript를 사용하여 특정 HTML 요소를 제거하는 기본적인 방법을 보여줍니다. 이러한 방식은 동적인 웹 페이지 제어와 사용자 상호작용에 중요한 역할을 합니다.

(3) 이벤트 사용

**addEventListener**

<body>
    <h1>제목</h1>
</body>
<script>
    // 문서에서 h1 요소를 선택합니다.
    const h1 = document.querySelector('h1');

    // h1 요소에 클릭 이벤트 리스너를 추가합니다.
    h1.addEventListener('click', function() {
        console.log('click');
    });
</script>

문서 객체 선택: document.querySelector('h1')를 사용하여 페이지 내의 첫 번째 <h1> 요소를 선택합니다.
이벤트 리스너 추가:
- addEventListener 메소드를 사용하여 <h1> 요소에 'click' 이벤트 리스너를 추가합니다.
- 클릭 이벤트가 발생할 때 실행될 콜백 함수를 정의합니다. 이 예시에서는 클릭 이벤트가 발생하면 콘솔에 "click"이라는 메시지를 출력합니다.

이벤트 리스너 제거

removeEventListener 메소드를 사용하여 이벤트 리스너를 제거할 수 있습니다. 이 메소드는 이벤트 리스너를 추가할 때 사용한 것과 동일한 이벤트명과 콜백 함수를 인자로 받습니다.
예: h1.removeEventListener('click', 콜백함수);를 사용하여 <h1> 요소에서 특정 클릭 이벤트 리스너를 제거할 수 있습니다.

주의사항

이벤트 리스너를 제거하려면, 제거하려는 리스너가 참조하는 콜백 함수가 동일해야 합니다. 익명 함수를 사용한 경우, 나중에 제거하기가 어려울 수 있으므로 명명된 함수를 사용하는 것이 좋습니다.
이벤트 리스너는 사용자와의 상호작용을 처리하고, 웹 페이지의 동적인 기능을 구현하는 데 중요합니다.

이 예시는 웹 페이지에서 이벤트를 처리하는 기본적인 방법을 보여줍니다. 이러한 방식은 사용자와의 상호작용을 적절하게 처리하는 데 필수적인 기능입니다.

키보드 이벤트

keydown: 키보드의 키가 눌릴 때 발생합니다. 키를 누르고 있을 때 발생하는 초기 이벤트입니다.
keypress: 키보드의 키가 입력되었을 때 발생합니다. 주로 문자 키에 대한 입력을 처리할 때 사용됩니다.
keyup: 사용자가 눌렀던 키를 놓았을 때 발생합니다. 키 입력이 완료되었을 때의 이벤트입니다.

<body>
    <h3>글자 수 : 0</h3>
    <input type="text" name="title" id="title">

    <script>
        // h3 요소와 input 요소를 선택합니다.
        const h3 = document.querySelector('h3');
        const input = document.querySelector('input');

        // input 요소에 keyup 이벤트 리스너를 추가합니다.
        input.addEventListener('keyup', function(event) {
            // 입력 필드의 글자 수를 계산합니다.
            const length = input.value.length;

            // h3 요소의 텍스트를 업데이트합니다.
            h3.textContent = `글자 수 : ${length}`;
        });
    </script>
</body>

사용자가 input 필드에 텍스트를 입력하고 키보드에서 손을 떼면 (keyup 이벤트), 이벤트 리스너가 활성화됩니다.
입력된 텍스트의 길이(length)가 계산되고, h3 요소의 텍스트가 이 길이를 반영하여 업데이트됩니다.
결과적으로, 사용자가 입력한 텍스트의 길이에 따라 h3 요소에 표시되는 글자 수가 실시간으로 변경됩니다.

이 예시는 사용자의 키보드 입력을 실시간으로 추적하고, 그 결과를 화면에 표시하는 방법을 보여줍니다. 웹 애플리케이션에서 사용자 입력을 처리하고 피드백을 제공하는 데 널리 사용되는 기술입니다.

키보드로 풍선 이모지(🎈) 이동하기

<body>
    <h1>🎈</h1>

    <script>
        const star = document.querySelector('h1');
        star.style.position = 'absolute';
        let [x, y] = [0, 0];
        const block = 20;

        const print = () => {
            star.style.left = `${x * block}px`;
            star.style.top = `${y * block}px`;
        };
        print();

        const [left, up, right, down] = [37, 38, 39, 40];
        document.body.addEventListener('keydown', (event) => {
            switch (event.keyCode) {
                case left: x -= 1; break;
                case up: y -= 1; break;
                case right: x += 1; break;
                case down: y += 1; break;
            }
            print();
        });
    </script>
</body>

풍선 이모지 초기화:
- star 변수는 페이지 내의 <h1> 요소 (풍선 이모지)를 참조합니다.
- star.style.position을 'absolute'로 설정하여, 풍선 이모지를 절대 위치로 이동할 수 있게 합니다.
이동 로직:
- [x, y]는 풍선 이모지의 현재 위치를 나타내는 변수입니다.
- block은 풍선 이모지가 한 번에 이동하는 픽셀 단위의 거리입니다.
- print 함수는 풍선 이모지의 위치를 업데이트하여 화면에 표시합니다.
키보드 이벤트 처리:
- 방향키의 키 코드를 [left, up, right, down] 배열로 저장합니다.
- keydown 이벤트 리스너를 사용하여 방향키 입력에 따라 풍선 이모지의 위치를 변경합니다.
- 각 방향키에 따라 x 또는 y 값을 조정하여 풍선 이모지의 위치를 업데이트합니다.
화면에 위치 표시:
- print 함수를 호출하여 풍선 이모지의 새 위치를 화면에 표시합니다.

이 코드는 키보드 입력에 반응하여 웹 페이지 내의 요소를 동적으로 이동시키는 기본적인 방법을 보여줍니다. 이러한 방식은 게임, 인터랙티브한 애니메이션, 사용자 인터페이스 등에서 유용하게 사용될 수 있습니다.

연습문제

inch를 cm로 변환하는 기능 구현하기

<body>
    <input type="text" id="inchInput"> inch
    <button id="convertButton">계산</button>
    <p id="result"></p>

    <script>
				// 변환 공식 : inch * 2.54 => cm
    </script>
</body>

체크박스 활성화

<body>
    <input type="checkbox">
    <span>타이머 활성화</span>
    <h1></h1>

    <script>
        let [timer, timerId] = [0, 0];
        const h1 = document.querySelector('h1');
        const checkbox = document.querySelector('input');

        checkbox.addEventListener('change', (event) => {
            if (event.currentTarget.checked) {
                // 체크박스가 선택될 경우, 타이머 시작
                timerId = setInterval(() => {
                    timer += 1;
                    h1.textContent = `${timer}초`;
                }, 1000);
            } else {
                // 체크박스 선택 해제시, 타이머 멈춤
                clearInterval(timerId);
            }
        });
    </script>
</body>

타이머 변수 초기화:
- timer는 타이머의 시간을 추적하며, timerId는 setInterval 함수로부터 반환된 타이머의 ID를 저장합니다.
DOM 요소 선택:
- h1은 타이머의 현재 값을 표시할 요소를 참조합니다.
- checkbox는 타이머를 제어할 체크박스 요소를 참조합니다.
이벤트 리스너 추가:
- 체크박스에 'change' 이벤트 리스너를 추가합니다. 체크박스의 상태가 변경될 때마다 이 리스너가 실행됩니다.
타이머 제어:
- 체크박스가 선택되면 (checked), setInterval 함수를 사용하여 1초마다 timer 값을 증가시키고 h1 요소에 현재 시간을 표시합니다.
- 체크박스 선택이 해제되면, clearInterval 함수를 사용하여 타이머를 멈춥니다.

동작 방식

사용자가 체크박스를 선택하면 타이머가 시작되어 매초마다 시간이 1초씩 증가합니다. 이 시간은 <h1> 요소에 표시됩니다.
사용자가 체크박스 선택을 해제하면 타이머가 멈춥니다.

이 코드는 사용자 입력에 따라 타이머를 동적으로 제어하는 방법을 보여줍니다. 이러한 방식은 사용자 상호작용에 따른 동적인 웹 페이지의 기능 구현에 유용하게 사용될 수 있습니다.

라디오버튼 활용

<body>
    <h3># 좋아하는 동물을 선택해주세요</h3>
    <input type="radio" name="pet" value="강아지"><span>강아지</span>
    <input type="radio" name="pet" value="고양이"><span>고양이</span>
    <input type="radio" name="pet" value="햄스터"><span>햄스터</span>
    <input type="radio" name="pet" value="기타"><span>기타</span>
    <hr>
    <h3 id="output"></h3>

    <script>
        const output = document.querySelector('#output');
        const radios = document.querySelectorAll('[name=pet]');

        radios.forEach((radio) => {
            radio.addEventListener('change', (event) => {
                const current = event.currentTarget;
                if (current.checked) {
                    output.textContent = `선택된 동물은 ${current.value}`;
                }
            });
        });
    </script>
</body>

DOM 요소 선택:
- output은 선택한 결과를 표시할 요소(<h3 id="output">)를 참조합니다.
- radios는 모든 라디오 버튼을 참조합니다. 이 요소들은 name="pet" 속성을 통해 그룹화됩니다.
이벤트 리스너 추가:
- 각 라디오 버튼에 change 이벤트 리스너를 추가합니다. 라디오 버튼의 상태가 변경될 때마다 이 리스너가 실행됩니다.
라디오 버튼 상태 확인 및 결과 출력:
- 사용자가 라디오 버튼 중 하나를 선택하면, 선택된 버튼의 value 속성 값을 읽어 output 요소의 텍스트로 설정합니다. 이를 통해 사용자가 선택한 동물을 표시합니다.

동작 방식

사용자가 라디오 버튼 중 하나를 클릭하면 해당 버튼의 value 값이 <h3> 태그에 "선택된 동물은 [동물명]" 형태로 표시됩니다.
라디오 버튼은 서로 배타적이므로, 한 번에 하나의 버튼만 선택될 수 있습니다.

이 코드는 라디오 버튼을 통해 사용자 선택을 받고, 이에 따른 반응을 페이지에 표시하는 방법을 보여줍니다. 이러한 방식은 설문조사, 선택 옵션 제공 등에 널리 사용됩니다.

(4) 이벤트 막기

기본 이벤트 막기 - preventDefault()

    // 문서가 완전히 로드된 후에 스크립트 실행
    document.addEventListener('DOMContentLoaded', () => {
        // 모든 'img' 태그를 선택
        const imgs = document.querySelectorAll('img');

        // 각 이미지에 대해 이벤트 리스너 추가
        imgs.forEach((img) => {
            img.addEventListener('contextmenu', (event) => {
                // 기본 이벤트 (여기서는 오른쪽 클릭에 의한 컨텍스트 메뉴)를 막음
                event.preventDefault();
            });
        });
    });

이벤트 리스너 추가:
- DOMContentLoaded 이벤트는 HTML 문서의 모든 DOM이 로드되었을 때 발생합니다. 이를 사용하여 스크립트가 문서의 로드가 완료된 후 실행되도록 합니다.
- querySelectorAll('img')를 사용하여 문서 내의 모든 <img> 태그를 선택합니다.
기본 이벤트 방지:
- 각 이미지(<img>)에 contextmenu 이벤트 리스너를 추가합니다. 이 이벤트는 사용자가 요소를 오른쪽 클릭할 때 발생합니다.
- 이벤트 핸들러 내에서 event.preventDefault()를 호출하여 브라우저의 기본 오른쪽 클릭 동작 (컨텍스트 메뉴 표시)을 막습니다.

동작 방식

사용자가 웹 페이지의 이미지를 오른쪽 클릭하려고 할 때, 일반적으로 나타나는 컨텍스트 메뉴가 나타나지 않습니다.
preventDefault() 메서드는 이벤트의 기본 동작을 방지하여 사용자 정의 동작을 구현할 수 있게 합니다.

이 코드는 웹 페이지에서 특정 이벤트의 기본 동작을 막고 사용자 경험을 제어하는 방법을 보여줍니다. 이러한 기법은 사용자가 예상치 못한 방식으로 웹 페이지의 컨텐츠를 사용하는 것을 방지하거나, 사용자 정의 동작을 구현할 때 유용하게 사용됩니다.

이벤트 전달 막기

<style>
div {
    border: 1px solid blue; display: inline-block;
}
div > div {
    width: 50px; height: 50px; margin: 20px;
}
</style>

<div style='width: 200px; height: 200px;'>
    <div style='background-color: red;'></div>
    <div style='background-color: blue; border-radius: 25px;'></div>
</div>

<script>
    // 첫 번째 자식 div에 이벤트 리스너 추가 (빨간색 div)
    document.querySelector('div > div:first-child').addEventListener('click', (event) => {
        console.log('red div');
    });

    // 두 번째 자식 div에 이벤트 리스너 추가 (파란색 div)
    document.querySelector('div > div:last-child').addEventListener('click', (event) => {
        console.log('blue div');
    });

    // 부모 div에 이벤트 리스너 추가
    document.querySelector('body > div').addEventListener('click', (event) => {
        console.log('parent div');
    });
</script>

스타일 설정:
- 모든 <div> 요소에 테두리 스타일을 적용합니다.
- 자식 <div> 요소들은 크기와 마진을 갖습니다.
이벤트 리스너 추가:
- 첫 번째 자식 <div> (빨간색)에 클릭 이벤트 리스너를 추가합니다. 클릭 시 'red div'를 콘솔에 출력합니다.
- 두 번째 자식 <div> (파란색)에 클릭 이벤트 리스너를 추가합니다. 클릭 시 'blue div'를 콘솔에 출력합니다.
- 부모 <div>에 클릭 이벤트 리스너를 추가합니다. 클릭 시 'parent div'를 콘솔에 출력합니다.

동작 방식

사용자가 빨간색 또는 파란색 <div>를 클릭하면, 해당 <div>의 이벤트 리스너가 활성화되고 콘솔에 메시지가 출력됩니다.
그러나 이벤트 버블링으로 인해 부모 <div>의 이벤트 리스너도 활성화되어, 'parent div' 메시지도 콘솔에 출력됩니다. 이는 이벤트가 자식 요소에서 부모 요소로 전달되는 것을 의미합니다.
이벤트 전달을 막으려면 자식 <div>의 이벤트 리스너 내에서 event.stopPropagation()을 호출해야 합니다. 이 메서드는 이벤트가 상위 요소로 전파되는 것을 방지합니다.

stopPropagation()

이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 것을 말하며, stopPropagation() 메서드를 사용하여 이를 방지할 수 있습니다.

<style>
div {
    border: 1px solid blue; display: inline-block;
}
div > div {
    width: 50px; height: 50px; margin: 20px;
}
</style>

<div style='width: 200px; height: 200px;'>
    <div style='background-color: red;'></div>
    <div style='background-color: blue; border-radius: 25px;'></div>
</div>

<script>
    // 첫 번째 자식 div (빨간색)에 이벤트 리스너 추가
    document.querySelector('div > div:first-child').addEventListener('click', (event) => {
        console.log('red div');
        event.stopPropagation(); // 이벤트 전달 막기
    });

    // 두 번째 자식 div (파란색)에 이벤트 리스너 추가
    document.querySelector('div > div:last-child').addEventListener('click', (event) => {
        console.log('blue div');
        event.stopPropagation(); // 이벤트 전달 막기
    });

    // 부모 div에 이벤트 리스너 추가
    document.querySelector('body > div').addEventListener('click', (event) => {
        console.log('parent div');
        event.stopPropagation(); // 이벤트 전달 막기
    });
</script>

스타일 설정:
- 모든 <div> 요소에 테두리 스타일을 적용합니다.
- 자식 <div> 요소들은 크기와 마진을 갖습니다.
이벤트 리스너 추가 및 이벤트 전달 방지:
- 첫 번째 자식 <div> (빨간색)와 두 번째 자식 <div> (파란색)에 각각 'click' 이벤트 리스너를 추가합니다.
- 각 이벤트 리스너에서 console.log를 사용하여 어떤 요소가 클릭되었는지 콘솔에 출력하고, event.stopPropagation()을 호출하여 이벤트 버블링을 방지합니다.

동작 방식

사용자가 빨간색 또는 파란색 <div>를 클릭하면, 해당 <div>의 이벤트 리스너가 활성화되어 콘솔에 메시지가 출력됩니다.
event.stopPropagation() 호출로 인해, 해당 이벤트는 부모 요소로 전달되지 않습니다. 따라서 부모 <div>의 이벤트 리스너는 활성화되지 않습니다.

이 코드는 이벤트 버블링을 제어하여 하위 요소에서 발생한 이벤트가 상위 요소의 이벤트 리스너를 트리거하지 않도록 하는 방법을 보여줍니다. 이벤트 전달을 제어하는 것은 웹 애플리케이션에서 사용자 인터페이스를 더 정밀하게 제어하는 데 중요할 수 있습니다.

2. JQuery

jQuery는 웹 페이지의 DOM 요소를 보다 쉽게 찾고 조작하기 위한 JavaScript 라이브러리입니다. jQuery를 사용하려면 먼저 jQuery 라이브러리를 웹 페이지에 포함시켜야 합니다. 그 후에는 $ 함수를 사용하여 요소를 선택하고 조작할 수 있습니다.

(1) jQuery 사용을 위한 라이브러리 포함하기

HTML 문서의 <head> 태그 내에 jQuery 라이브러리를 포함시키는 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery 예시</title>
    <!-- jQuery 라이브러리 포함 -->
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
</head>
<body>
    <!-- 여기에 웹 페이지의 내용 -->
</body>
</html>

(2) jQuery의 기본 사용법

요소 선택하기:
- jQuery는 CSS 선택자를 사용하여 요소를 선택합니다.
- 예: $('#id')는 ID가 'id'인 요소를 선택합니다. $('.class')는 클래스가 'class'인 모든 요소를 선택합니다.
이벤트 핸들링:
- 요소에 이벤트 리스너를 추가하는 것도 간단합니다.
- 예: $('button').click(function() { alert('버튼 클릭!'); });
요소 조작:
- CSS 스타일, 텍스트, HTML 컨텐츠 등을 쉽게 변경할 수 있습니다.
- 예: $('#id').css('color', 'red'); 또는 $('#id').text('새로운 텍스트');
애니메이션과 효과:
- jQuery는 애니메이션과 시각적 효과를 쉽게 적용할 수 있는 메소드를 제공합니다.
- 예: $('#id').hide(); 또는 $('#id').fadeIn();

(3) jQuery 예시 코드

    
        // 문서가 준비되면 실행되는 jQuery 코드
        $(document).ready(function() {
            // ID가 'myButton'인 버튼에 클릭 이벤트 리스너 추가
            $('#myButton').click(function() {
                // 클릭 시 ID가 'myText'인 요소의 텍스트 변경
                $('#myText').text('jQuery로 변경된 텍스트!');
            });
        });

<script> 태그 내부에서는 jQuery의 $(document).ready() 함수를 사용하여, 문서가 완전히 로드된 후에 코드가 실행되도록 합니다.
**$('#myButton').click(...)**는 ID가 'myButton'인 요소 (여기서는 버튼)에 클릭 이벤트 리스너를 추가합니다.
클릭 이벤트가 발생하면, ID가 'myText'인 요소 (여기서는 <h1> 태그)의 텍스트를 'jQuery로 변경된 텍스트!'로 변경합니다.

728x90

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

'웹 서비스 개발(FB,BE,SERVER,DB) > Javascript' 카테고리의 다른 글

4. 비동기처리 (1)	2024.03.06
3. 함수 (0)	2024.03.06
2. 자료형(DataType) (1)	2024.03.06
1. JavaScript (0)	2024.03.04

DOM API

1. DOM(Document Object Model)

(1) 객체 가져오기

(2) 객체 조작

(3) 이벤트 사용

(4) 이벤트 막기

2. JQuery

(1) jQuery 사용을 위한 라이브러리 포함하기

(2) jQuery의 기본 사용법

(3) jQuery 예시 코드

'웹 서비스 개발(FB,BE,SERVER,DB) > Javascript' 카테고리의 다른 글

댓글

티스토리툴바