DOM 트리와 노드 리스트
🎯 잠깐 복습
1. DOM Tree
웹 문서에서 각 요소의 포함관계를 나타낸 것
2. Node
가지가 갈라져 나가는 부분
3. Root Node
DOM Tree의 시작 부분
- 모든 HTML 태그는 요소(Element) Node임
- HTML 태그 텍스트 내용은 자식 노드인 text node가 됨
- HTML 태그 속성은 자식 노드인 attribute node가 됨
- 주석은 comment node
Node List
querySelectorAll()은 여러 DOM 노드들을 한 번에 선택해서 NodeList 형태로 반환합니다.
<body>
<h1>노드 리스트 살펴보기</h1>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>
</body>
웹 문서에 새로운 노드 추가
click 하면 기존에 없던 새로운 요소를 추가
텍스트 노드 추가
🎯 방법
1. 텍스트 노드와 태그 요소 노드를 만들어서 연결
2. 웹 문서 원하는 위치에 추가
태그 요소 노드 만들기
document.createElement(요소명)
텍스트 노드 만들기
document.createTextNode(텍스트)
태그와 텍스트 노드 연결하기
부모 노드.appendChild(자식 노드)
속성값 있는 노드 추가
text를 추가할 때는 <p>만 추가했음
img를 추가할 때는 <img>뿐 아니라 src 속성도 필요함
요소 노드 만들기
document.createElement(요소명)
속성 노드 만들기
document.createAttribute(속성명)
노드명.value = 속성값
속성 노드 연결하기
노드명.setAttributeNode(속성 노드)
자식 노드 연결하기
부모 노드.appendChild(자식 노드)
기존 노드 앞에 새 요소 추가하기
insertBefore(새 노드, 기존 노드)
노드 삭제하기
remove()
요소.remove()
title에 h1 태그를 저장하고, 이걸 클릭하면 해당 항목을 삭제하는 코드
const title = document.querySelector("h1");
title.addEventListener("click", () => {
title.remove();
});
removeChild()
부모 요소를 찾고, 그 자식 요소를 삭제
부모 노드 찾기
노드.parentNode
자식 노드 삭제
부모 노드.removeChild(자식 노드)
const items = document.querySelectorAll("li"); /* 모든 항목 가져오기 */
for (let item of items) {
item.addEventListener("click", function () {
this.parentNode.removeChild(this); /* 부모 노드에서 삭제 */
/* 아래 방법으로도 가능 */
/* this.remove(this); */
});
}
📌 this 주의사항
- function() 내 this는 이벤트가 발생한 노드를 가리킴
- 화살표 함수 내 this는 window객체를 가리킴
DOM 구조 활용
<div id="cart">
<h1>장바구니</h1>
<div id="products">
<p>
<span>✗</span>
HTML+CSS+자바스크립트 웹 표준의 정석
</p>
<p><span>✗</span>리액트 프로그래밍 정석</p>
<p><span>✗</span>타입스크립트 프로그래밍</p>
</div>
</div>
const buttons = document.querySelectorAll("p > span"); /* 모든 항목 가져오기 */
for (let button of buttons) {
button.addEventListener("click", function () {
/* 항목 클릭했을 때 실행할 함수 */
/* 부모 노드에서 삭제 */
this.parentNode.remove();
});
}
1. x를 전부 모은 후, 하나씩 돌아가면서 click 이벤트를 감지한다.
2. click 발생 시, 부모 요소인 <p>를 얻고, <p>를 삭제함으로써 x표와 문자열을 같이 삭제한다.
끝
'JavaScript' 카테고리의 다른 글
| 자바스크립트 객체 (0) | 2025.03.31 |
|---|---|
| Javascript의 내장 객체 (0) | 2025.03.27 |
| 이벤트 (0) | 2025.03.23 |
| DOM (Document Object Model) (0) | 2025.03.20 |
| 함수 (0) | 2025.03.18 |