js 5일차 - DOM(DOM, 객체분해할당)

###########################################################################
###########################################################################
8장. DOM
###########################################################################

1. 개요
- Document Object Model
=> Document(html 문서)
   Object(JS객체)
=> 사용자가 만든 html(태그 및 속성)문서를 웹브라우저가 랜더링 하기 위해서
   html 내의 요소(태그 및 속성)에 해당되는 객체(HTMLButtonElemnet, HTMLAnchorElemnet)
   를 생성해서 메모리에 올리고(DOM Tree) 메모리에 올라간 객체를 참조해서 관리하는
   방법론.

   우리는 메모리에 올라간 JS객체(DOM)의 속성과 메서드를 이용해서
   동적인 화면처리가 가능하다.

- DOM 접근방법 (html 문서를 참조하는 Document 객체를 이용, 실제 참조는 document 변수를 이용)

    # 하나의 요소(객체)를 반환
    document.getElementById("아이디값");
    document.querySelector("css 선택자");

    # 여러개의 요소를 반환(배열)
    document.querySelectorAll("css 선택자");

2. DOM 의 값 종류
1> 시작태그와 종료태그의 content(body)
    ex>
        <p>홍길동</p>
        <p><span>홍길동</span></p>
        <div>홍길동</div>
        <div><span>홍길동</span></div>

- content 접근은 innerText / innerHTML 사용한다.

2> <input> 태그같은 폼의 태그의 값
- value 속성 사용한다.

3. 폼과 관련 내용 정리
1> 기본내용

    <form action="target.html" method="get|post" id="myForm">
        아이디: <input />

        <input type="submit" value="로그인">
        <button>로그인</button>

        <input type="button" value="로그인"> <== 눌러도 submit 이 안됨, JS 이용하면 가능함.
    </form>

- form 태그안에 감싸져있어야지 submit 이 가능하다.
- input 타입의 button 은 submit 이 불가능하다.

2> 동적으로 form 의 속성값을 변경할 수 있다.

    var f = document.querySelector("myForm"); // HTMLFormElement 객체
    f.action = "구글url";
    f.method = "get|post";

    f.submit();

3> submit 은 기본으로 동작됨. 기본동작을 방지할 수 있다.

    event.preventDefault();

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function get_message() {
            var p = document.querySelector("#x");
            // console.dir(p); // HTMLParagraphElement
            // console.log(p.innerHTML);
            // console.log(p.innerText);

            //-------------------------------

            var div = document.querySelector("#result");
            div.innerHTML = p.innerHTML;
        }

        function set_message() {
            var p = document.querySelector("#x");
            // p.innerText = "world";
            p.innerHTML = "<h1>world</h1>";
        }
    </script>
</head>

<body>
    <p id="x">
        <span>
            Hello
        </span>
    </p>

    <button onclick="get_message()">값 얻기</button>
    <button onclick="set_message()">값 수정</button>
    <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리02</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function get_message() {
            var input = document.querySelector("#username");
            console.dir(input); // HTMLInputElement
            console.log(input.value);

            var div = document.querySelector("#result");
            div.innerHTML = input.value;
        }

        function set_message() {

        }
    </script>
</head>

<body>
    입력값: <input type="text" name="username" id="username" value="이순신">
    <button onclick="get_message()">값 얻기</button>
    <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리03</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function count() {
            // var inpiut = document.querySelector("#message");
            // var message = input.value;

            var message = document.querySelector("#message").value;
            var cnt = message.length;

            // var div = document.querySelector("#result");
            // div.innerHTML = cnt;

            document.querySelector("#result").innerHTML = cnt;
        }
    </script>
</head>

<body>
    입력값: <input type="text" name="message" id="message" onkeyup="count()"><br>
    글자수: <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리04</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 방법1)
        function cal(op) {
            var v1 = document.querySelector("#v1").value;
            var v2 = document.querySelector("#v2").value;

            var result;
            switch (op) {
                case "+":
                    result = Number.parseInt(v1) + Number.parseInt(v2);
                    break;
                case "*":
                    result = Number.parseInt(v1) * Number.parseInt(v2);
                    break;
            }

            document.querySelector("#result").innerHTML = result;
        }

        // 방법2)
        function cal2() {
            var v1 = document.querySelector("#v1").value;
            var v2 = document.querySelector("#v2").value;

            // event.target 는 매우 중요함.
            // var op = event.target; <button>-</button> 로 나옴
            //                        content 를 가져올수 있음.
            var op = event.target.innerHTML;
            // console.log(op);
            var result;
            switch (op) {
                case "-":
                    result = Number.parseInt(v1) - Number.parseInt(v2);
                    break;
                case "/":
                    result = Number.parseInt(v1) / Number.parseInt(v2);
                    break;
            }

            document.querySelector("#result").innerHTML = result;
        }
    </script>
</head>

<body>
    입력값1: <input type="text" name="v1" id="v1"><br>
    입력값2: <input type="text" name="v2" id="v2"><br>
    <button onclick="cal('+')">+</button>
    <button onclick="cal('*')">*</button><br>

    <button onclick="cal2()">-</button>
    <button onclick="cal2()">/</button><br>

    결과값: <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리05</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function total() {
            var quantity = document.querySelector("#quantity").value;
            var price = document.querySelector("#price").value;
            var total = quantity * price;

            document.querySelector("#result").innerHTML = total;
        }
    </script>
</head>

<body>
    수량: <input type="text" name="quantity" id="quantity"><br>
    가격:
    <select name="price" id="price" onchange="total()">
        <option value="1000">1000</option>
        <option value="2000">2000</option>
        <option value="3000">3000</option>
    </select>

    <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리06</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function check() {
            // var addr1 = document.querySelector("#arrd1").value;
            // var addr2 = document.querySelector("#addr2").value;
            var checkbox = document.querySelector("#sameAddress");
            console.dir(checkbox.checked);

            if (checkbox.checked) {
                document.querySelector("#addr2").value
                    = document.querySelector("#addr1").value;
            } else {
                document.querySelector("#addr2").value = "";
            }

        } 
    </script>
</head>

<body>
    회원주소: <input type="text" name="addr1" id="addr1" value="부산시"><br>
    배송지가 회원주소와 같다면 체크하시오. <br>
    <input type="checkbox" name="sameAddress" id="sameAddress" onclick="check()"><br>
    배송지주소: <input type="text" name="addr2" id="addr2"><br>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리07</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        window.onload = init;
        function init() {
            var li_list = document.querySelectorAll("li");
            console.log(li_list);

            var sum = 0;
            li_list.forEach(function (v, idx) {
                // console.log(v.innerText, idx);
                sum += Number.parseInt(v.innerText);
            });

            document.querySelector("#result").innerText = sum;

            //----------------------------------------------------------

            // table 작업
            var td_list = document.querySelectorAll(".x");
            console.log(td_list);

            var sum2 = 0;
            td_list.forEach(function (v, idx) {
                console.log(v.innerText, idx);
                sum2 += Number.parseInt(v.innerText);
            });

            document.querySelector("#total").innerText = sum2;
        }
    </script>
</head>

<body>
    <h1>구매목록</h1>
    <ul>
        <li>2500</li>
        <li>3500</li>
    </ul>
    총합:
    <div id="result"></div>
    <br>
    <!-- --------------------------------- -->
    <table border="1">
        <tr>
            <th>상품명</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>사과</td>
            <td class="x">2500</td>
        </tr>
        <tr>
            <td>배</td>
            <td class="x">3500</td>
        </tr>
        <tr>
            <td>총가격</td>
            <td id="total"></td>
        </tr>
    </table>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리08</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 전체선택 & 전체해제
        function allCheck() {
            var check = document.querySelector("#allCheck").checked;
            // console.log(check);

            var check_list = document.querySelectorAll(".check");
            check_list.forEach(function (v, idx) {
                // v : 개별적인 checkbox
                v.checked = check;
            });
        }
    </script>
</head>

<body>
    <table border="1">
        <tr>
            <th>
                선택
                <input type="checkbox" onclick="allCheck()" id="allCheck">
            </th>
            <th>상품명</th>
            <th>가격</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>사과</td>
            <td>2500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>배</td>
            <td>3500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>바나나</td>
            <td>1500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"></td>
            <td>수박</td>
            <td>5500</td>
        </tr>
    </table>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리09</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 전체선택 & 전체해제
        function allCheck() {
            var check = document.querySelector("#allCheck").checked;
            // console.log(check);

            var check_list = document.querySelectorAll(".check");
            check_list.forEach(function (v, idx) {
                // v : 개별적인 checkbox
                v.checked = check;

            });

        }

        // check 된 물품 총합구하기
        function total() {
            // "input:checked" : input 태그의 checked
            var check_list = document.querySelectorAll("input:checked");
            // console.log(check_list);
            var sum = 0;
            check_list.forEach(function (v, idx) {
                // console.log(v["data-price"], idx);
                // data-price 접근은 dataset.price 형식으로 접근해서 사용한다.
                console.dir(v.dataset.price);
                sum += Number.parseInt(v.dataset.price);
            });

            document.querySelector("#result").innerHTML = sum;
        }


    </script>
</head>

<body>
    <table border="1">
        <tr>
            <th>
                선택
                <input type="checkbox" onclick="allCheck()" id="allCheck">
            </th>
            <th>상품명</th>
            <th>가격</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" data-price="2500"></td>
            <td>사과</td>
            <td>2500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" data-price="3500"></td>
            <td>배</td>
            <td>3500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" data-price="1500"></td>
            <td>바나나</td>
            <td>1500</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" data-price="5500"></td>
            <td>수박</td>
            <td>5500</td>
        </tr>
    </table>
    <button onclick="total()">총합구하기</button>
    <div id="result"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리10</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        function go() {
            var f = document.querySelector("#myForm");
            console.dir(f);
            f.action = "http://www.google.com";
            f.submit();
        }
    </script>
</head>

<body>
    <form action="target.html" id="myForm">
        아이디: <input type="text" id="username"><br>
        비번: <input type="text" id="passwd"><br>

        <input type="submit" value="로그인">
        <button>로그인</button>

        <!-- 눌러도 submit 이 안됨. 단, JS 를 이용하면 가능하다. -->
        <input type="button" value="로그인" onclick="go()">

    </form>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>js12_DOM처리11</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        // 수정버튼 ==> 구글
        // 삭제버튼 ==> 다음
        function go() {
            var btn = event.target.value;
            // console.log(btn);

            var f = document.querySelector("#myForm");

            if (btn == '수정') {
                f.action = "http://www.google.com";
            } else {
                f.action = "http://www.daum.net";
            }
            f.submit();
        }


    </script>
</head>

<body>
    <form action="target.html" id="myForm">
        아이디: <input type="text" id="username"><br>
        비번: <input type="text" id="passwd"><br>
        <br>
        <!-- input 타입의 button 은 자동 submit 이 안된다. -->
        <input type="button" value="수정" onclick="go()">
        <input type="button" value="삭제" onclick="go()">

    </form>
</body>

</html>

4. 객체분해할당 (destructuring) (*)

가. 배열 객체 분해 할당

<!DOCTYPE html>
<html>

<head>
    <title>js13_객체분해할당1_배열</title>
    <script>

        // 객체분해 할당

        //1. 배열

        //가. 이전 방식
        var arr = [10, 20];
        var a = arr[0];
        var b = arr[1];


        //나. 객체분해 할당
        var [a, b] = [10, 20];
        console.log(a, b);

        var [a, b] = [10, 20, 30, 40];
        console.log(a, b);

        var [a, b, c, d] = [10, 20];
        console.log(a, b, c, d);

        var [a, b, ...c] = [10, 20, 30, 40];
        console.log(a, b, c);

        var [a, b, c = 1, d = 2] = [10, 20];
        console.log(a, b, c, d);

        var a, b;
        [a, b] = [100, 200];
        console.log(a, b);

        //
        var [, , c] = [10, 20, 30];
        console.log(c);

        //활용
        var n = 10;
        var m2 = 20;

        // 2개의 값을 바꾸시오
        [m, n] = [n, m];
        console.log(n, m)

    </script>
</head>

<body>


</body>

</html>

나. JSON 객체 분해 할당

<!DOCTYPE html>
<html>

<head>
    <title>js13_객체분해할당2_JSON</title>
    <script>

        // 객체분해 할당

        //2. JSON

        //가. 이전 방식
        var json = { age: 20, name: '홍길동' };
        var name = json.name;  // 연관배열 사용 가능 json["age"]
        var age = json.age;     // 연관배열 사용 가능 json["name"]
        console.log(name, age);


        //나. 객체분해 할당

        var { name, age } = { age: 20, name: '홍길동' };
        console.log(name, age);

        var { name, email } = { age: 20, name: '홍길동' };
        console.log(name, email); // 

        var { name, email = "inky" } = { age: 20, name: '홍길동' };
        console.log(name, email);

        //변수명 변경
        var { age: x, name: y } = { age: 20, name: '홍길동' };
        console.log(x, y);

        //일반변수를 객체분해할당시 사용방법은 전체를 ()로 감싸야 된다.
        var age, name;
        ({ age, name } = { age: 20, name: '홍길동' });
        console.log(name, age);



    </script>
</head>

<body>


</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <title>js13_객체분해할당3_함수호출시파라미터로사용</title>
    <script>

        //1. 이전방식
        function fun(n) {
            console.log(n[0], n[1]);
        }
        //배열 객체 전달
        fun([10, 20]);

        //2. 객체분해할당 방식
        function fun([n, n2, n3 = 1]) {
            console.log(n, n2, n3);
        }
        //배열 객체 전달
        fun([10, 20]);

        ////////////////////////////

        //1. 이전 방식
        function fun(n) {
            console.log(n.age, n.name);
        }
        //json 객체 전달
        fun({ age: 20, name: '홍길동' });

        //2. 객체분해할당 방식
        function fun({ name, age }) {
            console.log(name, age);
        }
        //arrow 함수 
        var fun = ({ name, age }) => console.log(name, age);

        //json 객체 전달
        fun({ age: 20, name: '홍길동' });

        var { name, age } = { age: 20, name: '홍길동' };

    </script>
</head>

<body>


</body>

</html>

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

js 6일차 - 비동기, Ajax (0)	2024.05.16
js 6일차 - 클래스, 모듈 (0)	2024.05.16
js 5일차 - event(2) preventDefault (0)	2024.05.09
js 4일차 - event(1) (0)	2024.05.08
js 4일차 - 함수(2)(arrow, generator, 즉시실행함수) (0)	2024.05.08

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

yoon9i

js 5일차 - DOM(DOM, 객체분해할당)

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

js 5일차 - DOM(DOM, 객체분해할당)

'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역