예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.5~11.6

11.5 HTML 폼 검증

자바스크립트는 HTML 폼에 사용자가 입력한 데이터를 서버로 보내기 전에 데이터가 유효한지를 검증할 수 있다.

11.5.1 폼 입력 여부 확인

다음은 텍스트 입력창과 비밀번호 입력창에 입력된 값을 체크해서 비어있는 경우, 알림창에 경고 메시지를 출력하는 예이다.

예제 11-23. 아이디/비밀번호 입력 여부 체크하기

check_id1.html

코드 원문

<form name="form1" method="post" onsubmit="return validateForm()">
    아이디: <input type="text" name="id"><br>
    비밀번호 : <input type="password" name="pass"><br>
    <input type="submit" value="확인">
</form>
<script>
    function validaeForm() {
        if(document.forms["form1"]["id"].value == "") {
            alert("아이디를 입력하세요!");
        }
        if (document.forms["forms"]["pass"].value == "") {
            alert("비밀번호를 입력하세요!");
        }
    }
</script>

예제 11-23. 아이디/비밀번호 입력 여부 체크하기

check_id1.html

코드 원문

<form name="form1" method="post" onsubmit="return validateForm()">
/*  */
    아이디: <input type="text" name="id"><br>
    비밀번호 : <input type="password" name="pass"><br>
    <input type="submit" value="확인">
</form>
<script>
    function validaeForm() {
        if(document.forms["form1"]["id"].value == "") {
        /* document 문서에서 forms 요소인 'form1' 이름을 지고 'id'를 선택한다. */
            alert("아이디를 입력하세요!");
        }
        if (document.forms["forms"]["pass"].value == "") {
        /* document 문서에서 forms 요소인 'forms' 이름을 달고 있는 'pass'를 선택한다. */
            alert("비밀번호를 입력하세요!");
        }
    }
</script>

11.5.2 숫자 입력 검증하기

다음은 텍스트 입력창에 1에서 10까지의 숫자가 입력되었는지를 체크하는 예제이다.

예제 11-24. 입력창에 1~10 숫자 입력 체크하기

check_number.html

코드 원문

<input id="num">
<button type="button" onclick="myFunction()">확인</button>
<p id="show"></p>
<script>
    function myFunction() {
        let x = document.getElementById("num").value;
        let text;
        if (isNaN(x) || x < 1 || x > 10) {
            document.getElementById("show").innerHTML = "1~10 숫자를 입력해수제요!";
        } else {
            document.getElementById("show").innerHTML = "입력 OK!";
        }
    }
</script>

예제 11-24. 입력창에 1~10 숫자 입력 체크하기

check_number.html

코드 원문

<input id="num">
<button type="button" onclick="myFunction()">확인</button>
<p id="show"></p>
<script>
    function myFunction() {
        let x = document.getElementById("num").value;
        let text;
        if (isNaN(x) || x < 1 || x > 10) {
            document.getElementById("show").innerHTML = "1~10 숫자를 입력해수제요!";
        } else {
            document.getElementById("show").innerHTML = "입력 OK!";
        }
    }
</script>

11.6 DOM 노드

DOM(Document Object Model)은 11.1에서 설명한 것과 같이 계층적 트리 구조를 가지고 있다. DOM 트리의 가장 기본이 되는 HTML 요소, 속성, 텍스트 등은 모두 노드(node)에 속한다.

자바스크립트에서는 DOM을 이용해서 DOM 트리에 포함된 모든 노드에 접근하고 노드의 추가, 생성, 삭제 등의 조작을 할 수 있다.

11.6.1 노드의 종류

DOM 트리의 구성 요소인 노드는 여러 형태를 가지고 있으며 주요한 노드를 표로 정리하면 다음과 같다.

노드의 종류
노드 타입	설명
요소 노드(element node)	<body>, <p>, <div> 등 모든 HTML 요소를 의미한다.
속성 노드(attribute node)	HTML 요소의 속성을 의미함
텍스트 노트(text node)	HTML 문서에 있는 모든 텍스트를 의미함
문서 노드(document node)	HTML 문서 전체를 의미함, DOM의 루트 노드(root node)임
주석 노드(comment node)	HTML 주석문인 <!-- 과 --> 사이에 포함된 모든 주석을 의미함

DOM 트리의 최상위는 루트 노드이며 루트 노드 외의 모든 노드는 단 하나의 부모 노드(parent node)만 가진다. 그리고 루트 노드를 포함한 모든 노드는 하나 또는 여러 개의 자식 노드(child node)를 가질 수 있다.

조상 노드(ancestor node)는 자신보다 상위에 있는 노드들을 의미하고 자손 노드(descendant node)는 자식 노드를 포함한 자신보다 하위에 있는 노드를 의미한다. 그리고 형제 노드(sibling node)는 같은 부모를 가진 노드를 의미한다.

11.6.2 노드 추가하기

DOM 트리에 새로운 노드를 추가하기 위해서는 먼저 노드를 생성한 다음 DOM 트리에 추가해야 한다. 다음 예제에서는 appendChild() 메서드를 이용해서 DOM 트리에 요소 노드(element node)인 요소를 추가한다.

예제 11-25. appendChild로 요소 추가하기

append_child.html

코드 원문

<div id="box">
    <p>단락1</p>
    <p>단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    const text_node = document.createTextNode("새로운 단락!");

    elem.appendChild(text_node);
    document.getElementById("box").appendChild(elem);
</script>

예제 11-25. appendChild로 요소 추가하기

append_child.html

코드 원문

<div id="box">
    <p>단락1</p>
    <p>단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    /* createElement() 메서드는 새로운 노드를 생성한다.
    createElement("p")는 새로운 <p> 노드를 생성하여 elem에 저장한다. */
    const text_node = document.createTextNode("새로운 단락!");
    /* createTextNode("새로운 단락")은 '새로운 단락!'이란 텍스트 노드를
    생성한다. */

    elem.appendChild(text_node);
    /* elem.appendChild(text_node)는 텍스트 노드인 text_node를 elem에
    자식으로 추가한다. */
    document.getElementById("box").appendChild(elem);
    /* 아이디 box 안에 elem를 자식으로 추가한다. */
</script>

11.6.3 노드 삽입하기

'단락2' 앞에 새로운 단락을 삽입하려면 insertBefore() 메서드를 이용하면 된다. insertBefor()의 사용법에 대해서 알아보자.

예제 11-26. insertBefore()로 요소 추가하기

insert_before.html

코드 원문

<div id="box">
    <p id="p1">단락1</p>
    <p id="p2">단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    const text_node = document.createTextNode("새로운 단락!");
    elem.appendChild(text_node);

    const p2 = document.getElementById("p2");
    document.getElementById("box").insertBefore(elem, p2);
</script>

예제 11-26. insertBefore()로 요소 추가하기

insert_before.html

코드 분석

<div id="box">
    <p id="p1">단락1</p>
    <p id="p2">단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    /* createElement()로 <p> 요소를 생성하고, createTextNode()로
    새로운 텍스트 노드를 만든 다음 appendChild()로 생성된 <p> 요소에
    텍스트 노드를 추가한다. */
    const text_node = document.createTextNode("새로운 단락!");
    elem.appendChild(text_node);

    const p2 = document.getElementById("p2");
    /* '단락2'의 <p> 요소를 가져와 p2에 저장한다.
    document.getElementById("box").insertBefore(elem, p2);
    /* insertBefore() 메서드를 이용해서 p2 요소 앞에 새로운 요소 elem를 삽입
    그 결과 '단락2' 앞에 '새로운 단락!'이 삽입된다. */
</script>

11.6.4 노드 삭제하기

remove() 메서드는 DOM 트리에서 노드를 삭제하는 데 사용된다. 다음 예제에서는 웹 페이지에 있는 요소를 하나 삭제한다.

예제 11-27. remove()로 요소 삭제하기

remove.html

코드 원문

<div id="box">
    <p id="p1">단락1</p>
    <p id="p2">단락2</p>
    <p id="p3">단락3</p>
</div>

<script>
    const elem = document.getElementById("p2");
    elem.remove();
</script>

예제 11-27. remove()로 요소 삭제하기

remove.html

코드 원문

<div id="box">
    <p id="p1">단락1</p>
    <p id="p2">단락2</p>
    <p id="p3">단락3</p>
</div>

<script>
    const elem = document.getElementById("p2");
    elem.remove();
    // elem.remove()는 <p> 요소 '단락2'를 DOM 트리에서 삭제한다.
</script>

11.6.5 노드 변경하기

replaceChild() 메서드는 기존에 존재하고 있는 노드를 다른 노드로 변경할 때 사용된다. 다음은 웹 페이지에 있는 요소를 새로운 요소로 변경하는 예이다.

예제 11-28. replaceChild()로 요소 변경하기

replace_dhild.html

코드 원문

<div id="box">
    <p>단락1</p>
    <p>단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    const text_node = document.createTextNode("새로운 단락!");

    elem.appendChild(text_node);
    document.getElementById("box").appendChild(elem);
</script>

예제 11-28. replaceChild()로 요소 변경하기

replace_dhild.html

코드 원문

<div id="box">
    <p>단락1</p>
    <p>단락2</p>
</div>

<script>
    const elem = document.createElement("p");
    const text_node = document.createTextNode("새로운 단락!");

    elem.appendChild(text_node);
    document.getElementById("box").appendChild(elem);
    /* document.getElementById("box").replaceChild(elem, p1)은
    <p> 요소 '단락1' 대신에 새로운 <p> 요소 '새로운 단락!'을
    <div> 요소(아이디:box)의 자식으로 변경한다. */
</script>

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

예제로 배우는 자바스크립트 요약 및 코드 분석 12장 12.4 (0)	2023.10.18
예제로 배우는 자바스크립트 요약 및 코드 분석 12장 12.1~12.3 (0)	2023.10.18
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.3~11.4 (0)	2023.10.17
예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2 (0)	2023.10.16
예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4 (0)	2023.10.16

IT tech development

예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.5~11.6

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

티스토리툴바

예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.5~11.6

'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글

관련글

티스토리툴바