문서 제어

DOM 트리

• 웹 페이지의 내용은 Document 객체가 관리
• 브라우저가 HTML 문서를 읽어 들이면 Document 객체로 시작하는 DOM 트리가 만들어 짐.
• Document 객체는 모든 노드의 조상 노드이며 DOM 트리의 루트

노드(Node)

DOM 트리를 구성하는 객체 하나

• 문서 노드: 전체 문서를 가리키는 Document 객체. document로 참조
• HTML 요소 노드: HTML 요소를 가리키는 객체
• 텍스트 노드: 텍스트를 가리키는 객체

노드 객체의 프로퍼티

보통은 id와 class 속성을 사용하여 원하는 요소 객체를 직접 가져옴.

주요 노드 객체

노드 객체 가져오기

id 속성으로 노드 가져오기

document.getElementById(id 값);

요소의 이름으로 노드 가져오기

document.getElementsByTagName(요소의 태그 이름);

// NodeList 객체를 반환
// 요소 이름 대신 와일드카드(*)를 지정하면 NodeList에 HTML 문서 안의 모든 요소를 담아 반환

class 속성 값으로 노드 가져오기

document.getElementsByClassName(class의 이름);

/* 식별자 여러 개를 공백 문자로 연결한 문자열을 인수로 넘기면, 
그 식별자들을 class 속성 값으로 갖는 요소의 목록을 가져올 수 있음. */

name 속성 값으로 노드 가져오기

document.getElementByName(name 속성 값);

CSS 선택자로 노드 가져오기

document.querySelectorAll("선택자");
document.querySelector("선택자");

속성 값의 읽기와 쓰기

요소 객체의 프로퍼티로 요소의 속성을 읽고 쓰기

• 요소 객체에는 일반적인 HTML 속성 이벤트 처리기 프로퍼티 등이 정의되어 있음
• 요소 객체. 속성 이름 과 같이 표기

속성 값 가져오기

요소 객체.getAttribute(속성의 이름)
// 해당하는 속성이 없을 때는 null 또는 빈 문자열 반환

속성 값 설정하기

요소 객체.setAttribute(속성 이름, 속성 값)
// 해당하는 속성이 없을 때는 그 속성을 새롭게 추가한 후에 설정

속성이 있는지 확인하기

요소 객체.hasAttribute(속성 이름)

속성 삭제하기

요소 객체.removeAttribute(속성 이름)

노드 생성/ 삽입/ 삭제하기

노드 생성하기

var element = document. createElement(요소의 이름); // 새로운 요소 노드 객체 생성
var textnode = document.createTextNode(텍스트); // 새로운 텍스트 노드 생성

노드 삽입하기

요소의 마지막에 삽입하기: appendChild 메서드

요소 노드.appendChild(삽입할 노드)

// 인수로 넘긴 노드 객체를 해당 요소의 마지막 자식 노드로 삽입

지정한 자식 노드의 바로 앞에 삽입하기: insertBefore 메서드

요소 노드.insertBefore(삽입할 노드, 자식 노드)

노드 옮기기

• 이미 있는 노드를 appendChild 와 insertBefore 메서드로 문서에 삽입하면 해당 노드를 현재 위치에서 삭제하고 새로운 위치에 삽입 → 결과적으로 이동

노드 삭제하기

노드.removeChild(자식 노드) // 삭제하려는 노드의 부모 노드 객체에서 호출
node.parentNode.removeChild(node) // 특정 노드인 node를 삭제하고자 할 때 

노드 치환하기

노드.replaceChild(새로운 노드, 자식 노드) // 치환하려는 노드의 부모 노드에서 호출
node.parentNode.replaceChild(newnode, node);

HTML 요소의 위치

HTML 요소의 위치를 표현하는 좌표계

• 뷰 포트 좌표계

  뷰 포트(웹 브라우저에서 문서의 내용을 표시하는 영역)의 위 왼쪽 꼭짓점을 원점으로하는 좌표계. 메뉴, 도구 모음, 탭 등을 포함하지 않음. (= 윈도우 좌표계)

• 문서 좌표계

  문서의 왼쪽 위 꼭짓점을 원점으로 하는 좌표계. 문서를 스크롤하면 문서 좌표계의 원점이 뷰 포트를 따라 이동.

HTML 요소의 위치와 크기 구하기

var rect = 요소 객체.getBoundingClientRect();

뷰 포트의 크기 가져오기

document.documentElement.clientWidth // 뷰 포트의 너비 (스크롤 막대 미포함)
document.documentElement.clientHeight // 뷰 포트의 높이 (스크롤 막대 미포함)

window.innerWidth // 뷰 포트의 너비 (스크롤 막대의 너비를 포함)
window.innerHeight // 뷰 포트의 높이 (스크롤 막대의 높이 포함)

스크롤 하기

// 뷰 포트의 원점까지 스크롤
window.scrollTo(X,Y);

// 특정 거리만큼 스크롤
window.scrollBy(dx, dy);

// 특정 요소가 있는 위치까지 스크롤하기
요소 객체.scrollIntoView(alignWidthTop);

참고: "모던 자바스크립트 입문/ 이소 히로시 14장 문서 제어를 읽고 정리한 내용입니다."