[JavaScript] "Do it! 자바스크립트 입문" - 8장 | 문서 객체 모델(DOM)

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 자바, 파이썬을 공부한 적이 있다. 그래서 자바스크립트를 배울 때도 웬만한 문법의 개념은 익숙했다. 하지만 DOM은 낯설다. 다른 책을 통해 이를 먼저 접했는데 상당히 많은 내용을 담고 있었다. 그게 장점일 수 있지만 처음 배우는 입장에서는 중압감이 컸다! 반면 이 책은 핵심만 간결하게 잘 담은 인상이다. 잘 구조화되어 있어 기억도 잘 된다. 차근차근 따라가다 보면 어느새 quiz-2를 풀고 있다. 8장을 통해 다지게 된 점은 다음과 같다.

 

8장 문서 객체 모델(DOM)

1) DOM

- 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

 

2) DOM 트리 표현

- 태그: 요소 노드

- 태그 안 텍스트: (해당 태그 자식) 텍스트 노드

- 태그의 속성: (해당 태그 자식) 속성 노드

- 주석: 주석 노드

※ Live DOM Viewer: https://software.hixie.ch/utilities/js/live-dom-viewer

 

3) DOM 요소 접근 방법

- getElementById(): id 선택자 이용

- getElementsByClassName(): class 선택자 이용. class 선택자는 id 선택자와 다르게 웹 문서 안에서 여러 번 사용할 수 있다. getElements인 이유이다.

- getElementsByTagName(): id, class 선택자가 없는 경우 사용

- querySelector(): 이상의 경우 모두에 사용. id와 같은 1가지 요소에 사용

- querySelectorAll(): querySelector()와 같으나, 2가지 요소 이상에 사용

* getElementById() 함수는 단순히 id 선택자를 사용해서 요소에 접근하지만 querySelector()는 id 선택자뿐 아니라 둘 이상의 선택자를 사용해서 요소에 접근할 수 있다.

querySelector(#container > ul)

 

4) HTML 태그 속성 접근, 수정

- getAttribute(): 속성 접근

- setAttribute(): 속성 수정

※ 웹 요소의 속성 값을 수정할 때 setAttribute() 함수를 사용하지 않고 속성을 사용해도 된다.

for (var i = 0; i < smallPics.length; i++) {
  smallPics[i].onclick = function (e) {
    // bigPic.setAttribute("src", this.src);
    bigPic.src = this.src;
  };
}

 

5) DOM에서 이벤트 처리

- addEventListener: 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수. 한 요소에 여러 이벤트 연결 가능

var pic = document.querySelector('#pic');
// addEventListener를 두번 사용하여 mouseover, mouseout 이벤트를 연결하고 있다.
pic.addEventListener("mouseover", changePic, false); // 이벤트 유형, 함수, 캡처 여부(true는 캡처링, false는 버블링, 기본 값은 false)
pic.addEventListener("mouseout", originPic, false);

 

6) 웹 요소의 스타일 접근, 수정

- block, none 사용법 유의

document.querySelector("#detail").style.display = "block";  // 상세 정보를 화면에 표시
document.querySelector("#detail").style.display = "none";  // 상세 정보를 화면에서 감춤

 

7) DOM 요소 추가

- createElement(): 새 요소 노드 생성

- createTextNode(): (요소에 텍스트가 있을 경우) 텍스트 노드 생성

- appendChild(): 텍스트 노드를 요소 노드의 자식 노드로 추가

- createAttribute(): (요소에 속성이 있을 경우) 속성 노드 생성

- setAttributeNode(): 속성 노드를 요소 노드에 연결

- appendChild(): 새로 만든 요소 노드를 부모 노드에 추가

> var newP = document.createElement("p") // 요소 노드 생성
> var newText = document.createTextNode("주문이 완료되었습니다.") // 텍스트 노드 생성
> newP.appendChild(newText) // 자식 노드로 추가
< "주문이 완료되었습니다."

// ---------- createAttribute, setAttributeNode 사용 ----------
> document.body.appendChild(newText) // 자식 노드로 추가
< <p>​주문이 완료되었습니다.​</p>​
> var attr = document.createAttribute("class") // 속성 노드 생성
> attr.value = "accent" // class 속성 값 지정
< 'accent'
> newP.setAttributeNode(attr) // 속성 노드 연결

// -------- setAttribute 사용 --------
> document.body.appendChild(newP)
<p>​주문이 완료되었습니다.​</p>​
> newP.setAttribute("class","accent")

 

8) 추가한 노드 순서 변경, 삭제

- hasChildNodes(): 특정 노드에 자식 노드가 있는지 확인(true, false 반환)

- childNodes 속성: 자식 노드에 접근. 요소 노드뿐 아니라 텍스트 노드나 주석 노드까지 모두 접근(요소 노드에만 접근한다면 children 속성 사용)

- insertBefore(): 원하는 위치에 노드 삽입

- removeChild(), parentNode 속성: 특정 노드 삭제. 노드는 스스로를 삭제할 수 없기 때문에 부모 노드에 접근한 후 부모 노드에서 삭제해야 한다. parentNode 속성은 현재 노드의 부모 요소 노드를 반환