자바스크립트의 DOM과 Event

JavaScript

자바스크립트의 DOM과 Event

한민규 2022. 11. 7. 06:00

DOM이란

DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다

DOM은 Document Object Model의 약자로 문서 객체 모델이라고 번역하며, 트리형태로 구조화한다.

문서객체란 html의 <html>, <span>, <div> 등을 말한다.

즉 자바스크립트에서는 DOM을 통해 html, css 등을 변경할 수 있는 것이다.

event란

event란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.

자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심의 프로그래밍 모델이라고 한다.

예를 들어 사용자가 클릭했을 때 어떤 동작을 하게 해주는 click이벤트를 만들어주고, 시용자가 클릭했을때 클릭 이벤트가 실행되게 해주는 것이다.

<!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>
</head>

<body>
    <input id="id" type="text" placeholder="아이디를 적어주세요."> <br><br>
    <input id="password" type="password" placeholder="비밀번호를 입력해주세요."> <br><br>
    <button id="btn">버튼</button>
    <h1>유저목록</h1>
    <ul></ul>
    <script>
        const id = document.querySelector("#id")
        const password = document.querySelector("#password")
        const botton = document.querySelector("#btn")
        const ul = document.querySelector("ul")

        btn.addEventListener("click", () => {
            //아이디나 비번이 비어있을경우
            if (id.value == "" || password.value == "")
                alert("아이디 또는 비밀번호가 빈 값입니다")
            //둘다 값이 입력되어 있을경우
            else {
                const li = document.createElement("li")
                li.innerHTML = `아이디 : ${id.value},   비밀번호 : ${password.value}`
                ul.append(li)
                id.value = ""
                password.value = ""
            }
        })
    </script>
</body>

</html>

위와 같은 경우 버튼에 이벤트를 줬고, 아이디 비밀번호를 입력하고 버튼을 누르면 이벤트를 받아서 리스트를 생성해 주는 것이다.