JQueryDOM조작

click이 발생하면 이벤트핸들러가 동작하면서 HTML을 조작한다. 

HTML DOM조작

• 엘리먼트, 엘리먼트의 속성, 엘리먼트의 컨텐츠를 조회/변경/추가/삭제 작업과 관련된 기능을 제공한다. 
• 대칭성을 갖고 있다. 
  • 조회기능 
  • $(selector).text()
    • 엘리먼트의 텍스트 컨텐츠를 반환 
    • 태그가 제외된 상태로 반환된다. 
    • p태그의 중심의 text를 반환한다. 
  • $(selector).html()
    • 엘리먼트의 html컨텐츠를 반환한다. 
    • 태그가 포함된 상태로 반환한다. 
  • $(selector).val()
    • 폼요소의 값을 반환한다.
  • $(selector).prop(name)
    • 엘리먼트의 프로퍼티의 값을 반환한다. 
    • checked, disable, readOnly
  • $(selector).attr(name)
    • 엘리먼트의 속성값을 반환한다. 
    • name, id, class, type, src, hret...등
  • 조회의 반환값은 값, text, boolean값이 반환된다. 
  • 조회의 기능을 제외하고는 모두 반환값이 집합객체이다. 
  • 메소드체이닝은 조회는 제공되지 않는다. 
• 변경기능 -->$(selector).text(매개변수)
  • 매개변수가 있으면 변경과 동일하다. 
  • 대칭적이기 때문이다. 
  • 변경을 이용하면 val("next")값이 변경이 된다. jQuery에서 집합객체가 획득된다. 
    • 한번 획득한 객체로 여러 메소드를 실행할 수 있다. 
    • 한번 검색한 엘리먼트로 하고 싶은 일을 여러차례진행할 수 있다. 

실습하기

• <h1>HTML DOM 조작하기</h1>
  </div>
  </div>
  <div class="row mb-3">
  <div class="col-3">
  <p id="text-content">텍스트 컨텐츠 입니다.</p>
  <button class="btn btn-outline-primary btn-sm" id="btn-read-text">.text()</button>
  <button class="btn btn-outline-primary btn-sm" id="btn-change-text">.text(텍스트)</button>
  </div>
  <div class="col-3">
  <div id="html-content" class="alert alert-danger">
  <strong>로그인 오류</strong> 존재하지 않는 회원입니다.
  </div>
  <button class="btn btn-outline-primary btn-sm" id="btn-read-html">.html()</button>
  <button class="btn btn-outline-primary btn-sm" id="btn-change-html">.html(html 텍스트)</button>
  </div>
  <div class="col-3">
  <h3>회원목록<button class="btn btn-primary btn-sm" id="btn-change-userlist">회원목록조회</button></h3>
  <!-- 버튼을 클릭하면 ul안에 데이터를 넣는다. -->
  <ul class="list-group" id="list-group-users">
  <li class="list-group-item">정보가 없습니다.</li>
  </ul>
  </div>
  <div class="col-3">
  <input type="text" class="form-control" name="amount" value="1"/>
  <div class="mt-3">
  <button class="btn btn-outline-dark btn-sm" id="btn-plus-amount">증가</button>
  <button class="btn btn-outline-dark btn-sm" id="btn-minus-amount">감소</button>
  <button class="btn btn-outline-dark btn-sm" id="btn-return-amount">다시</button>
  </div>
  </div>
  <div class="col-6">
  <table class="table" id="table-users">
  <thead>
  <tr>
  <th><input type="checkbox" id="checkbox-toggle-checked"/></th>
  <th>이름</th>
  <th>연락처</th>
  <th></th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>이순신</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>김유신</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>이하응</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>홍길동</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>홍길동</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  <tr>
  <td><input type="checkbox" name="userNo" value="10"/></td>
  <td>이성계</td>
  <td>010-1111-1111</td>
  <td><button class="btn btn-danger btn-sm">삭제</button></td>
  </tr>
  </tbody>
  </table>
  <div class="mt-3">
  <button class="btn btn-outline-secondary btn-sm" id="btn-delete-all">전체삭제</button>
  <button class="btn btn-outline-secondary btn-sm" id="btn-delete-selected-rows">전체삭제</button>
  </div>
  </div>
  </div>
  • 버튼의 경우 동작하는 방식이 다르면 개별id를 둬서 개별로 function을 정의해야한다. 
  • 엘리먼트가 항상 조작의 대상이 되어야 한다. 
  • 버튼을 읽어오는 것이 주 목적이 되지 않아, button에서는 this가 소용없다. 
  • 엘리먼트의 텍스트 컨텐츠를 조회/ 변경하기. text(), .text(텍스트 컨텐츠)
    • $('#btn-read-text').click(function(){
      //id가 btn-read-text를 클릭하면 콜백함수를 실행한다. 
        var textContent = $('#text-content').text();
      //id가 text-content의 text를 변수 textContent에 저장한다.
        alert(textContent);
      //textContent가 알람의 형태로 띄워진다.
        });
    • $('#btn-change-text').click(function(){
      //id가 btn-change-text를 클릭하면 콜백함수를 실행한다.
        $('#text-content').text("텍스트컨텐츠가 변경되었습니다.");
      //id가 text-content인 text('')를 변경한다. 
        });
  • 엘리먼트의 html컨텐츠를 조회/ 변경하기 .html(), html(html컨텐츠)
    • 장바구니의 값을 읽어들일 때 사용함 
    • $('#btn-read-html').click(function(){
        var htmlContent = $('#html-content').html();
        alert(htmlContent);
        })
    • $('#btn-change-html').click(function(){
        var htmlContent = '<strong>로그인 오류</strong> 비밀번호가 일치하지 않습니다.';
        $("#html-content").html(htmlContent);
        //2줄이상 작성시 ``을 작성한다.
        //엘리먼트의 안을 바꿀 때 사용한다.
        })
  • 회원목록을 조회해서 리스트에 반영하기
    • $('#btn-change-userlist').click(function(){
        //서버와 ajax통신해서 데이터를 조회함.
        
        var users = [{name:"김유신", email:"hong@gmail.com"},
        {name:"강감찬", email:"kang@gmail.com"},
        {name:"이순신", email:"lee@gmail.com"}]
      //연결되어 있다고 생각하고 임의의 변수를 입력했다. 
        var htmlContent = "";
      //htmlContent를 빈문자열을 넣어서 초기화 한다. 
        users.forEach(function(user, index){
      //변수 user을 반복해서 user과 index번호의 함수에 입력한다 "김유신의정보, 1"
        htmlContent += '<li class="list-group-item">'+user.name+'<span class="text-muted float-end">'+user.email+'</span></li>'
      //빈문자열에 html엘리먼트, user이름, html엘리먼트 ,user의 email정보를 넣는다.
        });
       
        $("#list-group-users").html(htmlContent);
      //클래서 list-group-users의 html에 변수 htmlContent를 넣는다.
        //기존의 내용을 무시하고 넣을 때 html이 유용하게 사용된다.
        //<li class="list-group-item">정보가 없습니다.</li> 
      -->전체적으로 삭제 후 데이터 text가 입력된다. 
        });
    • 전체 데이터를 삭제 후 변경 데이터를 넣을 때 사용된다.
  • 폼 입력필드의 값 조회 및 변경하기 
    • $("#btn-plus-amount").click(function(){
        var textContent = $('input[name=amount]').val(); //값 조회
      //더하기의 경우 문자열과 숫자의 결합으로 되기 때문에 정수로 변경 후 넣어준다.
        var amount = parseInt(textContent) + 1;
        //++textContent;
        $('input[name=amount]').val(amount); //값 변경
        })
    •  $('#btn-minus-amount').click(function(){
        var textContent = $('input[name=amount]').val();
      //마이너스도 문자열을 정수로 변경 후 넣어준다.
        var amount = parseInt(textContent) - 1;
        //--textContent;
        $('input[name=amount]').val(amount);
        });
    •   $('#btn-return-amount').click(function(){
        $('input[name=amount]').val(1);
        });
      //다시라는 버튼을 클릭하면 값이 1로 변경되게 설정한다. 
  • 폼 입력요소 중 체크박스의 체크여부 조회/ 변경하기 
    • 전체 선택/ 해제 체크바그의 체크여부에 따라서 테이블의 체크박스 선택/해제 시키기
      • $("#checkbox-toggle-checked").change(function(){
          //전체 선택/해제버튼의 체크여부를 조회한다..prop("checked")로 조회하면 true/false값이 반환된다.
          var checked = $(this).prop("checked");
          //테이블의 tbody에 포함된 모든 체크박스를 조회해서 .prop("checked",체크여부)로 체크상태를 변경한다.
          $("#table-users :checkbox[name=userNo]").prop("checked",checked);
          //checked의 값을 위의 checked처럼 변경한다.
          })
    • 테이블의 체크박스 중 하나를 선택/해제하면 전체 선택/해제 체크박스의 상태를 변경하기 
      • $("#table-users :checkbox[name=userNo]").change(function(){
          var totalLen = $("#table-users :checkbox[name=userNo]").length;
          //전체길이를 알 수 있다.
          var len = $("#table-users :checkbox[name=userNo]:checked").length;
          //체크박스중에서 체크된 것만 고르는 것, 선택자 중의 하나 
          if(totalLen == len) {
        //만약 전체길이와 체크된 체크박스의 길이가 같다면
          $("#checkbox-toggle-checked").prop("checked",true);
        //checkbox의 전체 체크의 속성을 true로 변경한다. 
          } else {
        //길이가 다르다면 
          $("#checkbox-toggle-checked").prop("checked",false);
        //checkbox의 전체 체크의 속성을 false로 변경한다
          }
          })
    • 개별 삭제 버튼을 누른 것/ 삭제 전체버튼을 누르면 삭제되게 만들기 
      • $('#btn-delete-all').click(function(){
         $("#table-users tbody").empty();//tbody안을 비운다.
          })
        
      • //$("#table-users tbody tr").remove();
        //table-users의 tbody내의 tr을 삭제한다.
      • 그냥 tr을 지우면 thead도 삭제될 수 있다. 그냥 table을 넣으면 다른 table을 삭제할 수 있다.
      • jQuery없이 그냥 코드로 만들 경우 
        •  var elements = document.querySelectorAll("#table-users tbody tr");
           elements.forEach(function(tr, index) { 
             tr.remove(); 
             })
        • 반복적으로 javascript에서는 지워야하지만, jQuery에서는 묵시적 반복을 지원해서 반복해서 지우지 않아도 된다. 
        • 코드가 간결해지니까, 가독성이 높아진다. 
        • 속도는 빠르다. 직접적으로 코딩해주는 것이 빠르가. 
        • jQuery,리액터, 뷰는 쌩코딩보다 속도가 느리다. 
        • 속도를 포기하는 대신, 생산성을 높인다. 
          • 속도도 우리가 감지할 정도가 아니다.
      • $('#btn-delete-selected-rows').click(function(){
         $("#table-users :checkbox[name=userNo]:checked").closest("tr").remove();
        })
        • 선택된 check에서 제일가까운 tr을 삭제한다. 
      • 혹은
      •  $("#table-users :checkbox[name=userNo]:checked").each(function(){
           $(this).closest("tr").remove();
           })
      • each()메소드 
      • jQuery에서 제공해준다. 반복처리하는 메소드로, (index, item)으로 적힌다.forEach와 반대이다.  
        • javascript
          • var elements = document.querySelectorAll("#table-users [name=userNo]");
              elements.forEach(function(checkbox, index){
              if(checkbox.checked){
              var tr = checkbox.parentElement.parentElement;
              tr.remove();
              }
              });
        • 가독성이 떨어진다.