[Do it! 모던 자바스크립트 프로그래밍의 정석] 07. DOM 활용하기

07. DOM 활용하기

DOM 트리와 노드 리스트

DOM 트리와 노드

• DOM에는 단순히 태그에 해당하는 요소 노드뿐만 아니라 여러 종류의 노드가 있음
• 노드: DOM 트리에서 가지가 갈라져 나가는 부분
• 루트 노드: DOM 트리의 시작 부분/ HTML 노드/ 나무 뿌리에 해당

노드를 구성하는 원칙

• 모든 HTML 태그는 요소 노드가 됨
• HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드가 됨
• HTML 태그에 있는 속성은 모두 자식 노드인 속성 노드가 됨
• 주석들은 주석 노드가 됨

---

노드 리스트

• `querySelectorAll()` 메서드 사용: 여러 개의 노드를 한꺼번에 가져올 수 있음
• 가져온 여러 개의 노드 정보를 저장한 것: 노드 리스트
  • 배열과 비슷하게 생겼고 배열처럼 사용할 수 있음 (배열 X)

<h1> 노드 리스트 살펴보기</h1>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>

// 콘솔 창에 입력
docuemnt.querySelectorAll("p")

// p요소 노드들을 저장한 노드 리스트 중에서 두 번째 노드
document.querySelectorAll("p")[1]

---

새로운 노드 추가하기

웹 문서에 새로운 노드 추가하기

웹 문서에서 처음에는 화면에 보이지 X 이벤트 발생 -> 화면에 특정한 내용 표시?

=> 특정 이벤트가 발생했을 대 DOM 트리에 새로운 노드 추가

텍스트 내용이 있는 노드 추가하기

새로운 추가할 노드에 텍스트 내용만 있다면

1. 텍스트 노드를 만들고 (텍스트 내용이 있는 노드)
2. 요소 노드를 만들어서 (ex. p 요소 노드)
3. 텍스트 노드를 요소 노드에 연결한 후 (p 요소 노드에 텍스트 내용 연결)
4. 원하는 영역에 추가

---

createElement() - 요소 노드 만들기

DOM에 새로운 요소를 추가할 때 가장 먼저 요소 노드를 만들어야 함

// 기본형
document.createElement(요소명)

// 콘솔 창에 입력하기
let newP = document.createElement("p")

 

=> `createElement()`는 새로운 노드를 만들 뿐, <p> 태그의 내용에 해당하는 텍스트 노드 만들어야 함

createTextNode() - 텍스트 노드 만들기

// 기본형
document.createTextNode(텍스트)

// 새로운 p 요소에 들어갈 내용을 텍스트 노드로 만들고 textNode라는 변수에 저장
let textNode = document.createTextNode("Typescript")

appendChild() - 자식 노드 연결하기

p 노드와 텍스트 노드가 따로 만들어진 상태

-> 서로 부모 노드와 자식 노드로 연결해야 함

// 기본형
부모_노드.appendChild(자식_노드)

// 콘솔 창에 입력하기
newP.appendChild(textNode) // 텍스트 노드를 p 요소에 연결
document.body.appendChild(newP) // p 요소를 body 노드에 연결

---

속성 값이 있는 노드 추가하기

• HTML 태그에서는 여러 가지 속성을 사용해서 웹 요소를 제어
• 속성이 필요한 요소를 추가할 때는 속성 노드도 함께 만들어서 자식 노드로 연결해야 함

createElement() - 요소 노드 만들기

// 새로운 이미지 노드 만들기
let newImg = document.createElement("img")

createAttribute() - 속성 노드 만들기

1. `createAttribute()` 메서드: 속성 노드 만듦
2. 속성의 값은 `value` 프로퍼티 사용해서 지정

// 기본형
document.createAttribue(속성명)
노드명.value = 속성값

// 콘솔 창에 입력하기
let scrNode = document.createAttribute("src")
scrNode.value = "images/wall.jpg"

setAttributeNode() - 속성 노드 연결하기

`setAttribute()` 메서드: 새로 만든 속성 노드를 요소 노드에 추가

`setAttribute()`와 다른 메서드 

// 기본형
요소 노드.setAttributeNode(속성 노드)

// 콘솔 창에 입력하기
newImg.setAttributeNode(scrNode)

 

appendChild() - 자식 노드 연결하기

img 요소에 속성 노드가 연결되었지만, img 요소는 아직 DOM에 연결되지 않은 상태

`appendChild()`: img 요소를 원하는 위치에 연결

// 콘솔 창에 입력하기
document.body.appendChild(newImg)

insertBefore() - 기존 노드 앞에 추가하기

특정 노드 앞에 새 요소를 추가

// 기본형
insertBefore(새 노드, 기준 노드)

// ex.
let tsNode = document.createElement("p")
let tsTextNode = document.createTextNode("Typescript")
tsNode.appendChild(tsTextNode)

let basisNode = document.querySelectorAll("p")[0] // 첫 번째 p 요소를 기준 노드로 정하기
document.body.insertBefore(tsNode, basisNode) // 기준 노드 앞에 tsNode 추가하기

---

노드 삭제하기

remove() - 노드 삭제하기

// 기본형
요소.remove()

// ex.
heading = document.querySelector("h1")
heading.remove()

---

removeChild() - 자식 노드 삭제하기

• 부모 노드를 찾아야 하고 그 후에 자식 노드를 삭제해야 함
• 예전에 IE에서는 `removeChild()` 메서드만 사용할 수 있어서 주로 `removeChild()`를 사용
  이제 모든 브라우저에서는 `remove()` 메서드를 사용해도 됨

// 기본형
// 부모 노드를 찾는 parentNode 프로퍼티
노드명.parentNode

// 자식 노드를 제거하는 removeChild() 메서드
부모 노드.removeChild(자식 노드)

// 목록에서 각 항목을 클릭했을 때 항목이 삭제
const items = document.querySelectorAll("li");
for (let item of items) {
	item.addEventListener("click", function() {
    	this.parentNode.removeChild(this);
        // this.remove(this); 도 가능
    });
}

---

이벤트 리스너에서 함수 안에 있는 this

item.addEventListener("click", function() {
	this.parentNode.removeChild(this);
});

 

• 이벤트 리스너에서 `functino() {...}`에 `this` 사용 -> `this`: 이벤트가 발생한 노드 가리킴
  • ex. 첫 번째 항목 클릭 -> 첫 번째 `li` 요소가 `this`
• 이벤트 리스너에서 화살표 함수 사용 -> `this`: 최상위 객체 `window` 가리킴
  • 화살표 함수 사용 -> 클릭한 요소 찾을 때 `this` 사용할 수 X
  • 이벤트가 발생한 요소를 `this`로 사용 -> `function() {}` 사용

---

출처

Do it! 모던 자바스크립트 프로그래밍의 정석