▼HTML, JavaScript 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Documnet</title>
</head>
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li>자바스크립트 공부</li>
<li>고양이 화장실 청소</li>
<li>고양이 장난감 쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow">
<li>자바스크립트 공부</li>
<li>뮤지컬 공연 예매</li>
<li>유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');노드 삭제 - remove 메소드
▼ 원하는 노드를 선택해서 remove 메소드를 호출하여 노드 삭제
// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
// 노드 삭제하기 : Node.remove()
tomorrow.remove()
특정 요소 노드를 삭제하고 싶다면 인덱스 값을 입력해 주고 그 뒤에 remove를 붙여준다.
▼특정 요소 노드 삭제
오늘 할 일의 자식 요소들 중 세 번째(2번 인덱스) 삭제하기
// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
// 노드 삭제하기 : Node.remove()
tomorrow.remove()
today.children[2].remove()
노드 이동하기 - prepend, append, before, after
이 전글에서 봤던 그 메소드들이 맞다. (기억이 안 난다면 다시 복습하기 [링크])
이 네 가지 메소드들을 활용하여 노드를 이동 시킬 수 있다.
▼append 메소드
'내일 할 일'의 두 번째 요소 [뮤지컬 공연 예매]를 '오늘 할 일' 마지막에 넣고자 할 때
오늘 할일(today)에 적용할 것이기에 append 메소드를 사용하고, 파라미터에는
내일 할 일(tomorrow)의 자식 요소(children)들 중에서 두 번째 요소 [1번 인덱스]를 입력해주면 된다.
// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
// 노드 이동하기: prepend, append, before, after/
today.append(tomorrow.children[1])
이러한 방식으로 요소를 이동 시킬 수 있으며
이렇게 말고도 [뮤지컬 공연 예매]를 선택 하는 방법은 다양하기에
어떤 방식으로 선택할 수 있을지 다른 방법을 생각해 볼 필요도 있다.
▼after 메소드
'오늘 할 일'의 두 번째 요소 [고양이 화장실 청소]를 '내일 할 일' 의 [뮤지컬 공연 예매] 다음으로 옮기자 할 때
일단 공연 얘매와 유튜브 시청 사이에는 내일의 할 일의 처음도 아니고 마지막도 아니기 때문에
tomorrow에 append나 prepend로 옮길 수 없기 때문에
tomorrow의 children 중에서 두 번째나 세 번째 기준으로 after나 before로 요소를 옮길 수 있다.
tomorrow의 children 프로퍼티에서 1번 인덱스 요소[뮤지컬 공연 에매]에 접근해서
after 메소드로 today의 children들 중에서 1번 인덱스[고양이 화장실 청소]를 옮겨주면 된다.
// 노드 삭제와 이동
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
// 노드 이동하기: prepend, append, before, after/
tomorrow.children[1].after(today.children[1])
만약 before를 사용할 경우 '내일 할 일'의 2번 인덱스[유튜브 시청]의 앞에 가면 되므로
아래 와 같이 코드를 작성한다.
tomorrow.children[2].before(today.children[1])
▶ GitHub
JavaScript_soloPlay/interactive_JS/09.노드삭제와이동 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
▶ Notion
https://purrfect-gargoyle-935.notion.site/TodoList-Node-11fe9530b3e1809a91c2cff355c6255b?pvs=4
TodoList Node | Notion
아래 내용을 만족하는addNewTodo함수를 완성한다.
purrfect-gargoyle-935.notion.site
'JS' 카테고리의 다른 글
| (11) Interactive JavaScript - Style (0) | 2024.10.16 |
|---|---|
| (10) Interactive JavaScript - HTML 속성 다루기 (0) | 2024.10.15 |
| (8) Interactive JavaScript - 요소 노드 추가 (0) | 2024.10.11 |
| (7) Interactive JavaScript - 요소 노드 프로퍼티 (0) | 2024.10.10 |
| (6) Interactive JavaScript - Approach the DOM Tree (0) | 2024.10.09 |