JavaScript/Javascript_Advanced

[JS]DOM(Document Object Model) part.2

MoZZANG 2022. 4. 14. 22:07

part.1에 이어서 또 다른예제로 DOM공부를 해보자

 

<body>
  <h2>DOM API 사용하기:노드의 위치 바꾸기</h2>
  <fieldset style="width:60%">
    <legend>메뉴 위치 변경하기</legend>
    <ul>
      <li>메뉴1</li>
      <li>메뉴2</li>
      <li>메뉴3</li>
      <li>메뉴4</li>
      <li>메뉴5</li>
      <li>메뉴6</li>
    </ul>
    <button class="up">위로</button>
    <button class="down">아래로</button>
  </fieldset>
</body>

▲ 위 body태그의 상태이며 우리의 목표는 메뉴 중 하나를 선택하고 위로 또는 아래로 버튼을 눌렀을 때 해당 메뉴탭이 위 또는 아래로 움직이는 기능을 구현하는 것이다.

 

head태그안에 script태그를 넣을 것이기 때문에 window.addEventListener를 사용할 것이다.

 

 

<script>
    window.addEventListener("load",function()
    {
      var ul = document.querySelector('ul');
      var up = document.querySelector('.up');
      var down = document.querySelector('.down');

      var li = null;

      //li의 부모인 ul에 이벤트 바인딩
      ul.onclick=function(e){
        console.log(e.target.nodeName);
        if(e.target.nodeName==='LI'){
          if(li !=null) li.style.backgroundColor='white';
          //클릭한 li의 배경색 설정
          e.target.style['background-color']='lightgray';
          li = e.target;
        }
      };

      up.onclick=function(){
        if(li===null){
          alert('메뉴를 선책하세요?');
          return;
        }

        var previous=li.previousElementSibling;
        console.log('previous:',previous);
        if(previous===null){
          alert('이전 메뉴가 없습니다');
          return;
        }
        li.insertAdjacentElement('afterend',previous);
      };

      down.onclick=function(){
        if(li===null){
          alert('메뉴를 선책하세요?');
          return;
        }

        var next=li.nextElementSibling;        
        if(next===null){
          alert('다음 메뉴가 없습니다');
          return;
        }
        li.insertAdjacentElement('beforebegin',next);
      };

    });

  </script>

 

 

 

 

 

또 다른 예제를 보자

<body>
  <h2>DOM API 사용하기:노드복제 하기</h2>
  <fieldset>
    <legend>데이타 뿌려주기(복제할 행이 있는 경우)</legend>

    <input type="button" class="btnData" value="데이타 넣기" />
    <hr />
    <table style="text-align:center;background-color: black;border-spacing:1px;width:70%">
      <thead>
        <tr style="background-color: white;">
          <th style="width:5%">번호</th>
          <th>제목</th>
          <th style="width:15%">작성일</th>
          <th style="width:15%">작성자</th>
          <th style="width:8%">조회수</th>
        </tr>
      </thead>
      <tbody>
        <tr style="background-color: white;">
          <td>1</td>
          <td style="text-align:left">제목1</td>
          <td>2022-09-01</td>
          <td>가길동</td>
          <td>20</td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <fieldset>
  
  <!----------------------------------------------------------------------------->
    <legend>데이타 뿌려주기(복제할 행이 없는 경우)</legend>
    <input type="button" class="btnData" value="데이타 넣기" />
    <hr />
    <template>
      <tr style="background-color: white;">
        <td>1</td>
        <td style="text-align:left">제목1</td>
        <td>2022-09-01</td>
        <td>가길동</td>
        <td>20</td>
      </tr>
    </template>
    <table style="text-align:center;background-color: black;border-spacing:1px;width:70%">
      <thead>
        <tr style="background-color: white;">
          <th style="width:5%">번호</th>
          <th>제목</th>
          <th style="width:15%">작성일</th>
          <th style="width:15%">작성자</th>
          <th style="width:8%">조회수</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </fieldset>
</body>

▲ 이번예제는 게시판에 글을 추가하였을 때 해당 형식에 맞춰서 게시판에 추가되는 기능을 간단하게 구현해보려고 한다. 케이스는 두 가지로 하나는 게시판에 기존 데이터가 있는 경우와 없는 경우로 나누어서 연습을 해보자.

 

첫번째로 게시판에 데이터가 존재하는 경우부터 보자.

 

 

<script>
    window.addEventListener("load", function () {

      var data = [
        { no: 2, title: "제목2", postDate: "2022-01-01", writer: "김길동1", hit: 10 },
        { no: 3, title: "제목 입니다", postDate: "2022-02-03", writer: "박길동2", hit: 5 },
        { no: 4, title: "내일 공약사항을 발표하겠습니다", postDate: "2022-05-03", writer: "박길동3", hit: 15 },
        { no: 5, title: "축하드립니다", postDate: "2022-11-15", writer: "박길동4", hit: 25 },
      ];

▲ 게시판에 추가할 데이터들을 담은 배열이다. 

 

 

기존데이터가 있는 경우에는 기존 데이터의 형식을 복사(cloning)하여 사용할 수 있다.

 

우리가 body태그안에 tbody가 두개인점을 먼저 상기하고 진행하여야 할 것이다.

 

 

     //노드 생성후 생성된 각 노드를 append()함수로 추가하여 구현하지 않고
      //cloneNode()를 사용해 노드를 복제하여 구현하자
      var tbodys = document.querySelectorAll('tbody');
      var btnDatas = document.querySelectorAll(".btnData");

      var tr = tbodys[0].querySelector('tr');

      btnDatas[0].onclick = function () {
        data.forEach(function (item, index) {
          var clone = tr.cloneNode(true);

          var tds = clone.querySelectorAll('td');
          tds[0].textContent = data[index].no;
          tds[1].textContent = data[index]["title"];
          tds[2].textContent = data[index].postDate;
          tds[3].textContent = data[index]["writer"];
          tds[4].textContent = data[index].hit;
          //방법1
          //tbodys[0].append(clone);
          //방법2
          //append()대신 insertAdjacentElement()사용
          tr.insertAdjacentElement('afterend', clone);
          tr = clone;//복제한 클론으로 갱신

        });
      };

 

 

 

두번째 케이스(복제할 데이터가 없는경우)를 해보자. 이 경우에는 템플릿을 가져와서 추가하는 방식이다.

 

 

//복제할 행이 없는 경우
      var template = document.querySelector('template');

      btnDatas[1].onclick = function () {
        data.forEach(function (item, index) {
          var clone = document.importNode(template.content, true);
          var tds = clone.querySelectorAll('td');
          tds[0].textContent = data[index].no;
          tds[1].textContent = data[index]["title"];
          tds[2].textContent = data[index].postDate;
          tds[3].textContent = data[index]["writer"];
          tds[4].textContent = data[index].hit;
          tbodys[1].append(clone);
        });
      };

▲template에 있는 형식을 가져와서 그 형식에 데이터들을 넣고 그것을 tbody에 append함으로써 구현된다.

 

 

 

 

'JavaScript > Javascript_Advanced' 카테고리의 다른 글

[JS]BOM(Browser Object Model) part.1  (0) 2022.04.15
[JS]DOM(Document Object Model) part.3  (0) 2022.04.15
[JS]DOM(Document Object Model) part.1  (0) 2022.04.13
[JS]Function(함수) part.4  (0) 2022.04.12
[JS]Function(함수) part.3  (0) 2022.04.12

'JavaScript/Javascript_Advanced'의 다른글

  • 현재글[JS]DOM(Document Object Model) part.2

관련글

댓글

티스토리툴바