javascript ES5 정리

노드 삽입(insertBefore, insertAdjacentElement), 노드 순회(firstChild, previousSibli)

풀스택 개발자 2020. 9. 29. 22:04

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "index.js"></script>
</head>
<body>
    <section id="section8">
        <h1>Ex8-노드 삽입과 바꾸기</h1>            
        <div>                
            <input type="button" class="up-button" value="위로" />                
            <input type="button" class="down-button" value="아래로" />
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성일</td>
                    <td>작성자</td>
                    <td>조회수</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: lightblue;">
                    <td>1</td>
                    <td><a href="1">자바스크립트란..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="2">유투브에 끌려다니지 않으려고 했는데....ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                </tr>
                <tr>                        
                    <td>3</td>
                    <td><a href="3">기본기가 튼튼해야....</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a href="4">근데 조회수가 ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </section>
</body>

</html>

 

js

window.addEventListener("load", function(){

    var section = document.querySelector("#section8");
    
    var noticeList =section.querySelector(".notice-list"); 
    var tbodyNode = noticeList.querySelector("tbody");
    var upButton = section.querySelector(".up-button");
    var downButton = section.querySelector(".down-button");

    var currentNode = tbodyNode.firstElementChild;//.children[0];

    downButton.onclick = function(){
            var nextNode = currentNode.nextElementSibling;//현재 노드의 다음노드
            if(nextNode==null)
            {
                alert("더이상 이동 불가");
            }
            else{
               // tbodyNode.removeChild(nextNode);//다음 노드 삭제
               // tbodyNode.insertBefore(nextNode,currentNode);//nextNode 를 currentNode기준으로 앞에 삽입한다.
               currentNode.insertAdjacentElement("beforebegin",nextNode);//currentNode의 앞에 nextNode를 삽입한다
            }
    };

    upButton.onclick = function(){
            var preNode = currentNode.previousElementSibling;
            if(preNode == null)
            {
                alert("더이상 이동 불가");
            }
            else{
               // tbodyNode.removeChild(currentNode);//현재노드 삭제
               // tbodyNode.insertBefore(currentNode,preNode);//currentNode 를 preNode기준 앞으로 삽입한다.
               currentNode.insertAdjacentElement("afterend",preNode)//currentNode의 뒤에 preNode를 삽입한다.
            }
    };

});

 

방법은 총 2가지

1.insertBefore 사용

(method) Node.insertBefore<Element>(newChild: Element, refChild: Node): Element

2.insertAdjacentElement 사용

(method) Element.insertAdjacentElement(position: InsertPosition, insertedElement: Element): Element