[Javascript] 버튼 클릭 시 주변 노드 text 가져오기

댓글 수정 버튼을 클릭하면 클릭한 버튼 아래에 있는 text를 가져와 모달 창의 textarea 요소에 띄워야했다.

1. HTML

1. 모달창

<div class="modal fade modal-dialog-centered" id="modal-comment-update" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5">알림</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><textarea class="form-control" id="comment-contents-update" rows="3" style="resize: none"></textarea></p>
                <p><input class="form-control form-control-sm" id="comment-contents-update-upw" type="password" placeholder="작성 시 등록했던 패스워드를 입력해주세요."></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">취소</button>
                <button type="button" class="btn btn-primary btn-modal-confirm">확인</button>
            </div>
        </div>
    </div>
</div>

2. 댓글 수정 버튼

<th:block th:if="${post.comments != null}">
    <div class="card-body">
        <th:block th:each="c : ${post.comments}">
            <p class="card-text">
                <span th:text="'닉네임:' + ${c.unm}"></span> &nbsp; <span style="font-size: small; color: gray" th:text="${c.created_at}"></span>
                <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-comment-update-modal-open" data-bs-toggle="modal" data-bs-target="#modal-comment-update" style="margin-left: 10px">수정</button>
                <button type="button" class="btn btn-outline-danger btn-sm" id="btn-comment-delete-modal-open" data-bs-toggle="modal" data-bs-target="#modal-comment-delete" style="margin-left: 10px">삭제</button>
            </p>
            <p class="p-comment-contents" th:text="${c.contents}"></p>
        </th:block>
    </div>
</th:block>

2. Javascript

    $(document).click((e) => {
        // 댓글 수정 플래그
       if(e.target.id == 'btn-comment-update-modal-open') {
           let copyNode = e.target.parentNode.nextSibling.nextSibling; // 댓글 내용이 있는 <p> 요소 접근
           let copyText = copyNode.textContent; // <p>의 text를 빼옴
           let commentContentsUpdate = document.getElementById('comment-contents-update'); // text를 넣을 요소의 id 가져오기
           commentContentsUpdate.value = copyText; // text 넣기
       }

        // 댓글 삭제 플래그
        // ...
    });

• copyNode - text를 복사할 노드 요소를 가져온다. closest를 사용할 수도 있겠지만 차피 부모 노드의 다음 형제 노드를 가져와야 했기에 closest는 무용지물.. 때문에 부모의 형제 노드를 가져오는 방식으로 작성했다.
• copyText - 위에서 복사할 노드의 text만 빼온다. copyNode는요소이므로 textNode로는 빼올 수 없다. textContent를 사용하여 text를 빼올 수 있다.
• commentContentsUpdate - 댓글 창에 수정할 댓글의 text를 붙여넣을 요소의 id를 가져온다.
• commentContentsUpdate.value - value를 통해 textarea에 복사할 text를 넣는다.