[모던JS입문] 14장 문서 제어

Bora Im·2020년 6월 14일
0

모던JS입문

목록 보기
8/8

DOM 트리

웹 페이지의 내용은 Document 객체가 관리한다.
웹 브라우저가 웹 페이지를 읽어들이면 렌더링 엔진은 웹 페이지의 HTML 문서 구문을 해석하고
Document 객체에서 문서 내용을 관리하는 DOM 트리라고 하는 객체의 트리 구조를 만든다.

노드(Node) : DOM 트리를 구성하는 객체 하나

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

HTML은 요소 뒤에 공백 문자 (공백, 탭, 줄바꿈) 를 무시하지만
DOM 트리는 요소 앞뒤의 공백문자를 텍스트로 취급해 텍스트 노드로 생성한다.
공백 문자만으로 구성된 텍스트 노드를 공백 노드라고 한다.
딘, html 요소 안의 첫/마지막 공백은 취급하지 않는다.

DOM 트리는 HTML 문서 안의 요소와 텍스트 사이의 포함관계를 표현한다.

  • 부모 / 자식 / 형제 / 조상 / 자손
  • Document 객체는 모든 노드의 조상 노드이자 DOM 트리의 루트

노드 객체의 프로퍼티

// DOM 트리의 계층 구조
parentNode		childNodes (NodeList)
firstNode		lastNode
previousSibling		nextSibling

// 주요 노드 객체
nodeType	요소 노드 1, 속성 노드 2, 텍스트 노드 3, 주석 노드 8, 문서 노드 9
nodeValue	요소 노드는 null, 텍스트 노드는 텍스트
nodeName	요소 노드는 대문자(H1), 텍스트 노드는 #text

// HTML 요소의 계층 구조
parentElement		children (NodeList)	childElementCount
firstElementChild	lastElementChild
previousElementSibling	nextElementSibling

자바스크립트를 사용하면 DOM 트리의 노드 객체를 가져와서 제어할 수 있다.
렌더링 엔진은 DOM 트리와 스타일 규칙이 바뀔 때마다 렌더 트리를 다시 구성해서 웹 페이지를 다시 그린다.
웹 페이지를 사용자가 조작하거나 자바스크립트 코드로 DOM 트리나 스타일을 수정하면
렌더링 엔진은 그때마다 화면을 다시 렌더링한다.

노드 객체 가져오기

getElementById('id')		// <div id='id'>...</div>
getElementsByTagName('tag')
getElementsByClassName('class')
getElementsByName('name')	// form, input, iframe, img, map, object

querySelect('selector')
querySelectAll('selector')

NodeList 객체는 length 프로퍼티를 가진 유사배열객체로 for문 등을 사용해 순회할 수 있다.
getElementsBy 메서드가 반환하는 NodeList는 '살아있는' 동적(Dynamic) 상태로
Array.prototype.slice.call(NodeList, 0) 을 통해 정적(Static) 복사본을 만들 수 있고
querySelectAll 메서드가 반환하는 NodeList는 메서드를 호출한 시점에 일치하는 요소이다.

HTML 요소의 속성 값

요소 객체.속성 이름

HTML 요소의 속성 이름은 대소문자를 구별하지 않지만, 자바스크립트 요소 객체의 속성 프로퍼티는 소문자로 작성하되 여러 단어로 구성되었다면 2번째 단어부터는 첫 글자를 대문자로 표기한다. 자바스크립트 예약어인 경우 앞에 html을 붙인다. className은 예외.

getAttribute('속성 이름')
setAttribute('속성 이름', '속성 값')
요소 객체.hasAttribute('속성 이름')
요소 객체.removeAttribute('속성 이름')

NamedNodeMap 객체
요소 객체의 attributes 프로퍼티가 가지는 읽기전용 유사배열객체

<input id="아이디" class="클래스" name="이름" value="값" onclick="함수()">
input.attributes; // NamedNodeMap [ id="아이디", class="클래스", name="이름"... ]
input.attributes[0]	// id="아이디"
input.attributes[1]	// class="클래스"
input.attributes[1].name	// class
input.attributes[1].value	// 클래스

HTML 요소의 내용

요소 안의 HTML 코드 : innerHTML
요소를 웹 페이지에 표시할 때의 텍스트 정보 : textContent(IE9~), innerText

  • 지정한 요소의 모든 자식 텍스트 노드를 연결한 값
  • 스크립트 내 텍스트 : textContent 반환, innerText 반환 X
  • 공백 문자 : textContent 그대로 반환, innerText 남는 공백 문자 제거
  • innerText는 table tbody tr 등의 테이블 요소를 수정할 수 없다.

DOM 트리 수정 (노드 생성/삽입/삭제)

// 생성
createElement('tag')
createTextNode('텍스트')
createAttribute('속성 이름')

// 삽입
요소 노드.appendChild('삽입할 노드')
요소 노드.insertBefore('삽입할 노드', '자식 노드') // 지정한 노드 앞에 삽입

// 삭제
노드.removeChild('자식 노드')
node.parentNode.removeChild(node)

// 치환
노드.replaceChild('새로운 노드', '자식 노드')
node.parentNode.replaceChild(newnode, node)

HTML 요소의 위치

좌표계

  • 뷰 포트 좌표계 (윈도우 좌표계)
    뷰 포트 : 웹 브라우저에서 문서의 내용을 표시하는 영역 (메뉴, 도구 모음, 탭 미포함)

  • 문서 좌표계
    스크롤시 문서 좌표계를 따르는 요소의 좌표는 바뀌지 않는다.

요소 객체.getBoundingClientRect()

뷰 포트 좌표계로 측정한 해당 HTML 요소의 위치와 크기 정보를 담은 ClientRect 객체를 반환

  • 보더를 포함한 안쪽 영역
  • 프로퍼티 left top right bottom width height

뷰 포트의 크기

// 스크롤바 미포함
document.documentElement.clientWidth
document.documentElement.clientHeight

// IE9+ 스크롤바 포함
window.innerWidth
window.innerHeight

스크롤한 거리

// IE, Mozilla Firefox
document.documentElement.scrollLeft
document.documentElement.scrollTop

// Chrome, Safari, Opera, IE Edge
document.body.scrollLeft
document.body.scrollTop

// Firefox, Chrome, Safari, Opera, IE Edge, IE9+
window.pageXOffset
window.pageYOffset

스크롤하기

window.scrollTo(X,Y); // 특정 위치로
window.scrollBy(dx,dy); // 특정 거리만큼
요소 객체.scrollIntoView(alignWithTop); // 특정 요소가 있는 위치까지

alignWithTop : 기본값 true 로 표시 영역의 위쪽 끝이 기준, false 라면 표시 영역의 아래쪽 끝이 기준

HTML 폼

폼의 이용 형태

  • 입력한 데이터를 웹 서버로 보내 처리하고, 결과를 반환하거나 DB에 저장
  • 클라이언트 측 자바스크립트로 웹 App을 만들 때 입력받는 UI

📡 method 속성 : 데이터 전송 방법 ("POST" 또는 "GET")
🎬 action 속성 : 데이터를 처리하는 CGI 프로그램의 URL

폼 요소 객체 가져오기

// DOM 메서드
var slt = document.getElementById('slt');
var options = slt.getElementsByTagName('option');
var inputs = document.querySelectorAll('#form1 input[type=radio]');

// Document 객체의 forms 프로퍼티 (HTMLCollection 객체)
document.forms[0] 		// form 요소의 index (지양)
document.forms.form1 		// form 요소의 id
document.forms.questions 	// form 요소의 name
document.questions 		// 위의 name과 같음

form 요소 객체의 자식 요소 객체

document.forms.form1[3]
document.forms.form1.slt
document.forms.form1.bloodtype

// form 요소 객체의 elements 프로퍼티
document.forms.elements[3]
document.forms.elements.slt
document.forms.elements.bloodtype

CSS 제어

스타일 변경 방법

  • 요소 객체의 style 프로퍼티 수정 (CSSStyleDeclaration 객체)
  • 스타일 시트에 스타일을 클래스에 설정해, 요소의 class 속성값 수정

인라인 스타일 제어

요소 객체.style.프로퍼티 이름 = 값;
element.style.backgroundColor = 'pink';

CSSStyleDeclaration 객체 이름 법칙

  • 하이픈(-)이 없으면 그대로 사용
  • 하이픈이 있으면 제거하고 뒤 단어의 첫글자 대문자로
    font-size => fontSize
    background-color => backgroundColor
  • 앞에 하이픈이 있으면 제거하고 이어지는 단어 소문자
    -webkit-transform => webkitTransform
  • 예외
    float => cssFloat
profile
Bora Im
이전 포스트

[모던JS입문] 13장 웹 브라우저의 객체

0개의 댓글