[웹 서비스 개발] HMTL_DOM_1_24_Script

김광일·2024년 11월 15일

웹 서비스 개발

목록 보기

25/45

일자 : 10주차 1차시

HTML DOM

[1-1] HTML DOM이란?

HTML DOM은 HTML에 대한 표준 객체 모델과 프로그래밍 인터페이스이다. 이는 다음을 정의한다:
- HTML 요소를 객체로 정의
- 모든 HTML 요소의 속성
- 모든 HTML 요소에 접근하기 위한 메서드
- 모든 HTML 요소의 이벤트
즉, HTML DOM은 HTML 요소를 가져오고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준이다.

[1-2] HTML DOM이란?

HTML DOM을 사용하면 JavaScript로 HTML 문서의 모든 요소를 접근하고 변경할 수 있다.

웹 페이지가 로드되면 브라우저는 해당 페이지의 문서 객체 모델(Document Object Model)을 생성한다. HTML DOM 모델은 객체로 구성된 트리 구조로 만들어진다.

[2] 객체 모델

객체 모델을 통해 JavaScript는 동적 HTML을 생성하는 데 필요한 모든 기능을 얻는다:
- JavaScript로 페이지의 모든 HTML 요소를 변경할 수 있다.
- JavaScript로 페이지의 모든 HTML 속성을 변경할 수 있다.
- JavaScript로 페이지의 모든 CSS 스타일을 변경할 수 있다.
- JavaScript로 기존의 HTML 요소와 속성을 제거할 수 있다.
- JavaScript로 새로운 HTML 요소와 속성을 추가할 수 있다.
- JavaScript로 페이지의 기존 HTML 이벤트에 반응할 수 있다.
- JavaScript로 페이지에 새로운 HTML 이벤트를 생성할 수 있다.

[3] 이벤트 사용

HTML DOM을 통해 이벤트가 발생할 때 코드를 실행할 수 있다.

<!-- 버튼을 클릭했을 때 id가 'id1'인 요소의 색상을 빨간색으로 변경하는 코드 -->
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
  Click Me!
</button>

[4] DOM

DOM은 W3C(World Wide Web Consortium) 표준이다.
DOM은 문서에 접근하는 표준을 정의한다:
"W3C 문서 객체 모델(DOM)은 플랫폼 및 언어에 중립적인 인터페이스로, 프로그램과 스크립트가 문서의 콘텐츠, 구조 및 스타일을 동적으로 접근하고 업데이트할 수 있게 한다."
W3C DOM 표준은 세 가지로 나뉜다:
- Core DOM - 모든 문서 유형에 대한 표준 모델
- XML DOM - XML 문서에 대한 표준 모델
- HTML DOM - HTML 문서에 대한 표준 모델

1) 동작 / 값

HTML DOM 메서드는 실행 가능한 동작(HTML 요소에 대한)을 의미한다.
HTML DOM 속성은 설정하거나 변경할 수 있는 값(HTML 요소의)을 의미한다.

[5] HTML DOM 문서 객체(Document Object)

document 객체는 웹 페이지를 나타낸다.
HTML 페이지의 어떤 요소에든 접근하려면 항상 document 객체에 접근하는 것부터 시작한다.
아래는 document 객체를 사용하여 HTML 요소에 접근하고 조작하는 몇 가지 예이다.

[6] HTML 요소 찾기

메서드	설명
`document.getElementById(id)`	요소의 ID를 이용해 요소를 찾는다
`document.getElementsByTagName(name)`	태그 이름을 이용해 요소를 찾는다
`document.getElementsByClassName(name)`	클래스 이름을 이용해 요소를 찾는다

1) `getElementById`

: 특정 ID를 가진 HTML 요소를 찾고 내용을 조작하는 역할을 한다.

<!-- "intro"라는 ID를 가진 요소의 내용을 가져와 "demo" ID를 가진 요소에 출력하는 코드 -->
<script>
    const element = document.getElementById("intro"); // ID가 'intro'인 요소를 가져옴

    document
        .getElementById("demo") // ID가 'demo'인 요소를 선택
        .innerHTML = "The text from the intro paragraph is: " + element.innerHTML; // 'intro'의 내용을 출력
</script>

2) `getElementsByTagName`

: 특정 태그 이름을 가진 HTML 요소들을 배열 형태로 가져와 사용할 수 있다.

<!-- 페이지에서 첫 번째 'p' 태그의 내용을 가져와 "demo" ID를 가진 요소에 출력하는 코드 -->
<script>
    const element = document.getElementsByTagName("p"); // 모든 'p' 태그를 가져옴

    document
        .getElementById("demo") // ID가 'demo'인 요소를 선택
        .innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML; // 첫 번째 'p' 태그의 내용을 출력
</script>

3) `getElementsByClassName`

: 특정 클래스 이름을 가진 HTML 요소들을 배열 형태로 가져와 사용할 수 있다.

<!-- 페이지에서 특정 클래스의 첫 번째 'p' 태그 내용을 가져와 "demo" ID를 가진 요소에 출력하는 코드 -->
<script>
    const element = document.getElementsByClassName("example"); // 클래스가 'example'인 모든 요소를 가져옴

    document
        .getElementById("demo") // ID가 'demo'인 요소를 선택
        .innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML; // 첫 번째 요소의 내용을 출력
</script>

[7] HTML 요소 변경

: JavaScript를 사용하여 HTML 요소의 내용, 속성, 스타일을 변경할 수 있다.

1) 속성(Property)

: HTML 요소의 속성이나 스타일을 변경하는 역할을 한다.

속성	설명
`element.innerHTML = new html content`	요소의 내부 HTML 콘텐츠를 변경한다.
`element.attribute = new value`	HTML 요소의 속성 값을 변경한다.
`element.style.property = new style`	HTML 요소의 스타일을 변경한다.

2) 메서드(Method)

: HTML 요소의 속성을 변경할 때 사용한다.

메서드	설명
`element.setAttribute(attribute, value)`	HTML 요소의 속성 값을 변경한다.

[8] 요소 추가 및 삭제

: HTML 요소를 생성, 추가, 삭제, 교체할 수 있다.

메서드	설명
`document.createElement(element)`	새로운 HTML 요소를 생성한다.
`document.removeChild(element)`	HTML 요소를 삭제한다.
`document.appendChild(element)`	HTML 요소를 추가한다.
`document.replaceChild(new, old)`	HTML 요소를 교체한다.
`document.write(text)`	HTML 출력 스트림에 내용을 작성한다.

[9] 이벤트 핸들러 추가

: HTML 요소에 이벤트 핸들러를 추가하여 특정 이벤트에 반응하도록 한다.

메서드	설명
`document.getElementById(id).onclick = function() {code}`	`onclick` 이벤트에 실행할 코드를 추가한다.

[10] HTML 요소 조작

JavaScript로 HTML 요소를 조작할 때 자주 사용한다.
요소를 조작하기 위해 먼저 찾아야 하며, 다음과 같은 방법이 있다:
- ID로 HTML 요소 찾기
- 태그 이름으로 HTML 요소 찾기
- 클래스 이름으로 HTML 요소 찾기
- CSS 선택자로 HTML 요소 찾기
- HTML 객체 컬렉션으로 HTML 요소 찾기

[11] HTML 객체 컬렉션으로 HTML 요소 찾기

이 예제는 forms 컬렉션에서 id="frm"인 폼 요소를 찾아 해당 폼 내 모든 요소의 값을 표시한다.

<script>
    // ID가 'frm'인 폼 요소를 가져옴
    const form = document.forms["frm"];

    // 폼 내 모든 요소 값을 순차적으로 출력
    for (let i = 0; i < form.length; i++) {
        console.log(form.elements[i].value);
    }
</script>

[12] HTML 콘텐츠 변경

HTML 요소의 내용을 수정하는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것이다.
HTML 요소의 내용을 변경하려면 다음 구문을 사용한다:

<!-- id가 'id'인 요소의 내부 HTML 내용을 새로운 HTML로 변경 -->
document.getElementById(id).innerHTML = new HTML;

[13] 속성 값 변경

HTML 속성 값을 변경하려면 다음 구문을 사용한다:

<!-- id가 'id'인 요소의 특정 속성을 새로운 값으로 변경 -->
document.getElementById(id).attribute = new value;

[14] 동적 HTML 콘텐츠

JavaScript는 동적으로 HTML 콘텐츠를 생성할 수 있다.

1) 날짜 변경

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
    // 'demo' ID를 가진 요소에 현재 날짜를 출력
    document.getElementById("demo").innerHTML = "Date : " + Date();
</script>

</body>
</html>

2) `document.write()`

JavaScript에서 document.write()를 사용하면 HTML 출력 스트림에 직접 내용을 작성할 수 있다.

[15] JavaScript를 이용한 폼 유효성 검사

JavaScript를 사용하여 HTML 폼 유효성을 검사할 수 있다.
예를 들어, 폼 필드(fname)가 비어 있을 경우, 아래 함수는 경고 메시지를 표시하고, 폼 제출을 방지하기 위해 false를 반환한다.

<script>
    // 폼 유효성 검사 함수
    function validateForm() {
        // 'myForm'이라는 이름의 폼에서 'fname' 필드 값을 가져옴
        let x = document.forms["myForm"]["fname"].value;

        // 입력 값이 비어 있는지 확인
        if (x == "") {
            // 비어 있을 경우 경고 메시지 표시
            alert("이름을 반드시 입력해야 합니다.");
            // 폼 제출 방지
            return false;
        }
    }
</script>

1) 숫자 입력 유효성 검사

JavaScript는 숫자 입력 값을 유효성 검사하는 데 자주 사용된다.

<script>
    function myFunction() {
        // Get the value of the input field with id="numb"
        let x = document.getElementById("numb").value;
        // If x is Not a Number or less than one or greater than 10
        let text;
        if (isNaN(x) || x < 1 || x > 10) {
            text = "Input not valid";
        } else {
            text = "Input OK";
        }
        document.getElementById("demo").innerHTML = text;
    }
</script>

2) 자동 HTML 폼 검증

브라우저가 HTML 폼 검증을 자동으로 수행할 수 있다.
만약 fname 필드가 비어있으면, required 속성이 해당 폼의 제출을 방지한다.

<form action="/action_page.php" method="post">
    <input type="text" name="fname" required>
    <input type="submit" value="Submit">
</form>

[16] HTML 요소의 스타일 변경

HTML DOM을 사용하면 자바스크립트로 HTML 요소의 스타일을 변경할 수 있다.

<script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "larger";
</script>

[17] 자바스크립트 HTML DOM 애니메이션

1) 애니메이션 컨테이너 생성
모든 애니메이션은 컨테이너 요소를 기준으로 수행된다.

2) 요소 스타일 지정

컨테이너 요소는 position: relative 스타일로 설정해야 한다.
움직이는 요소는 position: absolute 스타일로 설정해야 한다.

3) 애니메이션 코드

자바스크립트 애니메이션은 요소의 스타일을 점진적으로 변경하여 구현된다.
이러한 변경은 타이머에 의해 호출되며, 타이머 간격이 짧을수록 애니메이션이 더 부드럽게 보인다.

<script>
// 박스를 움직이는 함수
function myMove() {
    let id = null; // 애니메이션 ID 초기화
    const elem = document.getElementById("animate"); // 움직일 요소 선택
    let pos = 0; // 초기 위치 설정

    clearInterval(id); // 이전 애니메이션 멈춤
    id = setInterval(frame, 5); // 5ms마다 frame 함수 실행

    // 박스의 움직임을 정의하는 함수
    function frame() {
        if (pos == 350) { // 목표 위치(350px)에 도달하면 멈춤
            clearInterval(id);
        } else {
            pos++; // 위치를 1px씩 증가
            elem.style.top = pos + "px"; // 위쪽 위치 설정
            elem.style.left = pos + "px"; // 왼쪽 위치 설정
        }
    }
}
</script>

[18] 이벤트에 반응하기

자바스크립트는 이벤트가 발생했을 때 실행될 수 있다.
예를 들어, 사용자가 HTML 요소를 클릭했을 때 코드 실행이 가능하다.
HTML 이벤트 속성에 자바스크립트 코드를 추가하여 이벤트 발생 시 코드를 실행한다.

1) HTML 이벤트 예시

사용자가 마우스를 클릭할 때
웹 페이지가 로드되었을 때
이미지가 로드되었을 때
마우스가 요소 위로 이동했을 때
입력 필드가 변경되었을 때
HTML 폼이 제출되었을 때
사용자가 키를 누를 때

1) this

this.innerHTML

<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>

this를 parameter로 전달

<h2 onclick="changeText(this)">Click on this text!</h2>

<script>
    function changeText(id) {
        id.innerHTML = "Ooops!";
    }
</script>

getElementById를 button에 바로 사용

<button onclick="displayDate()">The time is?</button>

<script>
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
</script>

삽입만 함수로 만들어서 사용

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
    document.getElementById("myBtn").onclick = displayDate;

    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
</script>

[19] onload와 onunload 이벤트

onload와 onunload 이벤트는 사용자가 페이지에 들어오거나 떠날 때 발생한다.

onload 이벤트는 방문자의 브라우저 유형과 버전을 확인하고, 이에 따라 적절한 웹 페이지 버전을 로드하는 데 사용할 수 있다.
onload와 onunload 이벤트는 쿠키 처리에도 사용할 수 있다.

<script>
    // 쿠키 사용 가능 여부를 확인하는 함수
    function checkCookies() {
        let text = ""; // 결과 메시지를 저장할 변수
        if (navigator.cookieEnabled == true) {
            // 쿠키가 활성화되어 있을 경우
            text = "Cookies are enabled.";
        } else {
            // 쿠키가 비활성화되어 있을 경우
            text = "Cookies are not enabled.";
        }
        // 결과 메시지를 HTML 요소에 삽입
        document.getElementById("demo").innerHTML = text;
    }
</script>

[20] onchange 이벤트

onchange 이벤트는 입력 필드 검증과 함께 자주 사용된다.
사용자가 입력 필드의 내용을 변경하면 onchange 이벤트가 발생한다.
아래는 onchange 이벤트를 사용하는 예제이다.
사용자가 내용을 변경하면 upperCase() 함수가 호출된다.

<script>
    function upperCase() {
        const x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
<input type="text" id="fname" onchange="upperCase()">

[21] onmouseover와 onmouseout 이벤트

onmouseover와 onmouseout 이벤트는 사용자가 HTML 요소 위로 마우스를 이동하거나,
요소를 벗어날 때 함수를 호출하도록 사용할 수 있다.

<script>
    function mouseOver() {
        document.getElementById("demo").style.color = "red";
    }

    function mouseOut() {
        document.getElementById("demo").style.color = "black";
    }
</script>
<p id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">
    Hover over this text.
</p>

Summary

[1-1, 1-2] HTML DOM이란?

HTML DOM은 HTML 요소, 속성, 메서드, 이벤트를 정의하는 표준 객체 모델이자 프로그래밍 인터페이스다.
JavaScript를 통해 HTML 문서의 모든 요소를 조작할 수 있는 트리 구조로 생성된다.

[2] 객체 모델

JavaScript로 HTML 요소/속성/스타일 변경, 추가/삭제, 이벤트 생성 및 반응 가능.

[3] 이벤트 사용

특정 이벤트 발생 시 코드를 실행하도록 정의 가능.

[6] HTML 요소 찾기

getElementById(id) - ID로 특정 요소 찾기.
getElementsByTagName(name) - 태그 이름으로 요소 배열 반환.
getElementsByClassName(name) - 클래스 이름으로 요소 배열 반환.

[7] HTML 요소 변경

속성(element.innerHTML), 스타일(element.style.property), 메서드(element.setAttribute)로 요소 변경 가능.

[8] 요소 추가 및 삭제

요소 생성(createElement), 추가(appendChild), 삭제(removeChild), 교체(replaceChild) 가능.

[9] 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 연결하여 특정 이벤트에 반응하도록 설정.

[12] HTML 콘텐츠 변경

innerHTML 속성을 사용해 HTML 콘텐츠를 동적으로 변경 가능.

[13] 속성 값 변경

element.attribute로 요소의 속성을 동적으로 변경.

[14] 동적 HTML 콘텐츠

JavaScript로 현재 날짜, 시간 등을 동적으로 생성 가능.

[15] 폼 유효성 검사

필드가 비어 있는지 확인하거나, 숫자 입력값을 유효성 검사 가능.

[16] HTML 스타일 변경

style.property로 HTML 요소의 스타일 변경 가능.

[17] JavaScript 애니메이션

setInterval과 CSS 스타일 변경으로 애니메이션 구현.

[18] 이벤트에 반응하기

HTML 이벤트(onclick, onmouseover, onchange 등)에 반응하도록 코드 작성.

[19] `onload`와 `onunload` 이벤트

페이지 로드 시 브라우저 유형 확인, 쿠키 처리 가능.

[20] `onchange` 이벤트

입력 필드 값이 변경될 때 실행되는 이벤트.

[21] `onmouseover`와 `onmouseout` 이벤트

마우스가 요소 위에 있을 때 또는 벗어날 때 스타일 변경 가능.

김광일

안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com

[웹 서비스 개발] HMTL_DOM_1_24_Script